import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Clock, MapPin, AlertCircle, Trash2 } from 'lucide-react';
import { RETENTION_OPTIONS, REGION_OPTIONS } from './types';
import type { RetentionValue, RegionValue } from './types';

interface CloudSettingsViewPreferencesProps {
  retention: RetentionValue;
  onRetentionChange: (value: RetentionValue) => void;
  region: RegionValue;
  onRegionChange: (value: RegionValue) => void;
  onEmptyTrash: () => void;
}

export function CloudSettingsViewPreferences({
  retention,
  onRetentionChange,
  region,
  onRegionChange,
  onEmptyTrash,
}: CloudSettingsViewPreferencesProps) {
  return (
    <Card variant="default">
      <h3 className="font-bold text-foreground mb-6 tracking-tight">Preferences</h3>

      <div className="space-y-6">
        <div>
          <label className="block text-sm font-bold text-muted-foreground mb-2 flex items-center gap-2">
            <Clock className="w-4 h-4" /> Trash Retention Policy
          </label>
          <select
            className="w-full bg-muted border border-border rounded-xl p-4 text-foreground outline-none focus:border-primary transition-colors duration-[var(--duration-normal)]"
            value={retention}
            onChange={(e) => onRetentionChange(e.target.value as RetentionValue)}
          >
            {RETENTION_OPTIONS.map((opt) => (
              <option key={opt.value} value={opt.value}>
                {opt.label}
              </option>
            ))}
          </select>
          <p className="text-xs text-muted-foreground mt-1">
            Deleted files are permanently removed after this period.
          </p>
        </div>

        <div>
          <label className="block text-sm font-bold text-muted-foreground mb-2 flex items-center gap-2">
            <MapPin className="w-4 h-4" /> Storage Region
          </label>
          <select
            className="w-full bg-muted border border-border rounded-xl p-4 text-foreground outline-none focus:border-primary transition-colors duration-[var(--duration-normal)]"
            value={region}
            onChange={(e) => onRegionChange(e.target.value as RegionValue)}
          >
            {REGION_OPTIONS.map((opt) => (
              <option key={opt.value} value={opt.value}>
                {opt.label}
              </option>
            ))}
          </select>
          <div className="flex items-start gap-2 mt-2 text-xs text-warning bg-warning/10 p-2 rounded-xl">
            <AlertCircle className="w-3 h-3 mt-0.5 shrink-0" />
            Changing regions requires data migration which may take up to 24 hours.
          </div>
        </div>

        <div className="pt-4 border-t border-border">
          <Button
            variant="destructive"
            className="w-full"
            onClick={onEmptyTrash}
          >
            <Trash2 className="w-4 h-4 mr-2" /> Empty Trash Now
          </Button>
        </div>
      </div>
    </Card>
  );
}