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>
  );
};