veza/apps/web/src/components/studio/CloudSettingsView.tsx

import React, { useState } from 'react';
import { Card } from '../ui/card';
import { Button } from '../ui/button';
import { ProgressBar } from '../ui/progress';
import { HardDrive, Trash2, Clock, MapPin, AlertCircle } from 'lucide-react';
import { useToast } from '../../context/ToastContext';

export const CloudSettingsView: React.FC = () => {
  const { addToast } = useToast();
  const [retention, setRetention] = useState('30');
  const [region, setRegion] = useState('us-east-1');

  return (
    <div className="h-full flex flex-col gap-8 animate-fadeIn">
        
        {/* Quota */}
        <Card variant="gaming">
            <h3 className="font-bold text-white mb-6 flex items-center gap-2">
                <HardDrive className="w-5 h-5 text-kodo-cyan" /> Storage Quota
            </h3>
            <div className="text-center mb-6">
                <div className="text-5xl font-display font-bold text-white mb-2">65.4 GB</div>
                <div className="text-sm text-gray-400">used of 100 GB (Pro Plan)</div>
            </div>
            <ProgressBar value={65.4} color="cyan" />
            <div className="grid grid-cols-3 gap-4 mt-8 text-center">
                <div className="p-3 bg-kodo-ink rounded border border-kodo-steel/50">
                    <div className="text-xs text-gray-500 uppercase font-bold">Audio</div>
                    <div className="text-lg font-bold text-white">45 GB</div>
                </div>
                <div className="p-3 bg-kodo-ink rounded border border-kodo-steel/50">
                    <div className="text-xs text-gray-500 uppercase font-bold">Projects</div>
                    <div className="text-lg font-bold text-white">15 GB</div>
                </div>
                <div className="p-3 bg-kodo-ink rounded border border-kodo-steel/50">
                    <div className="text-xs text-gray-500 uppercase font-bold">Other</div>
                    <div className="text-lg font-bold text-white">5.4 GB</div>
                </div>
            </div>
            <Button variant="primary" className="w-full mt-6" onClick={() => addToast("Upgrade flow opened")}>Increase Storage</Button>
        </Card>

        {/* Preferences */}
        <Card variant="default">
            <h3 className="font-bold text-white mb-6">Preferences</h3>
            
            <div className="space-y-6">
                <div>
                    <label className="block text-sm font-bold text-gray-400 mb-2 flex items-center gap-2">
                        <Clock className="w-4 h-4" /> Trash Retention Policy
                    </label>
                    <select 
                        className="w-full bg-kodo-ink border border-kodo-steel rounded p-3 text-white outline-none focus:border-kodo-cyan"
                        value={retention}
                        onChange={(e) => setRetention(e.target.value)}
                    >
                        <option value="7">7 Days</option>
                        <option value="30">30 Days</option>
                        <option value="90">90 Days</option>
                        <option value="forever">Never Delete</option>
                    </select>
                    <p className="text-xs text-gray-500 mt-1">Deleted files are permanently removed after this period.</p>
                </div>

                <div>
                    <label className="block text-sm font-bold text-gray-400 mb-2 flex items-center gap-2">
                        <MapPin className="w-4 h-4" /> Storage Region
                    </label>
                    <select 
                        className="w-full bg-kodo-ink border border-kodo-steel rounded p-3 text-white outline-none focus:border-kodo-cyan"
                        value={region}
                        onChange={(e) => setRegion(e.target.value)}
                    >
                        <option value="us-east-1">US East (N. Virginia)</option>
                        <option value="eu-west-1">Europe (Ireland)</option>
                        <option value="ap-northeast-1">Asia Pacific (Tokyo)</option>
                    </select>
                    <div className="flex items-start gap-2 mt-2 text-xs text-kodo-gold bg-kodo-gold/10 p-2 rounded">
                        <AlertCircle className="w-3 h-3 mt-0.5" />
                        Changing regions requires data migration which may take up to 24 hours.
                    </div>
                </div>

                <div className="pt-4 border-t border-kodo-steel">
                    <Button variant="ghost" className="text-kodo-red hover:bg-kodo-red/10 border border-kodo-red/30 w-full" onClick={() => addToast("Trash emptied")}>
                        <Trash2 className="w-4 h-4 mr-2" /> Empty Trash Now
                    </Button>
                </div>
            </div>
        </Card>
    </div>
  );
};