import { useState, useEffect } from 'react';
import { Shield, Lock, Eye, Trash2 } from 'lucide-react';
import { Card } from '../components/ui/Card';
import { Toggle } from '../components/ui/Toggle';
import { Button } from '../components/ui/Button';
import { GradientButton } from '../components/ui/GradientButton';
import { api } from '../api/client';

interface Settings {
  showOnline: boolean;
  showRating: boolean;
  twoFactorEnabled: boolean;
  notifEmail: boolean;
  marketingEmail: boolean;
}

export function SettingsPage() {
  const [settings, setSettings] = useState<Settings>({
    showOnline: true,
    showRating: true,
    twoFactorEnabled: false,
    notifEmail: true,
    marketingEmail: false,
  });
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);

  useEffect(() => {
    api.get<Settings>('/users/settings')
      .then(setSettings)
      .catch(() => {})
      .finally(() => setLoading(false));
  }, []);

  const handleSave = async () => {
    setSaving(true);
    try {
      const updated = await api.put<Settings>('/users/settings', {
        showOnline: settings.showOnline,
        showRating: settings.showRating,
        notifEmail: settings.notifEmail,
        marketingEmail: settings.marketingEmail,
      });
      setSettings(updated);
    } catch {}
    setSaving(false);
  };

  const update = (key: keyof Settings, value: boolean) => {
    setSettings(prev => ({ ...prev, [key]: value }));
  };

  if (loading) return <div className="text-center text-gray-500 py-12">Loading settings...</div>;

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-gray-900">Privacy & Security Settings</h1>
        <p className="text-sm text-gray-500 mt-1">Manage your privacy, security and data preferences</p>
      </div>

      <Card>
        <div className="flex items-center gap-3 mb-4">
          <div className="w-8 h-8 rounded-lg bg-primary-50 flex items-center justify-center">
            <Eye className="w-4 h-4 text-primary-500" />
          </div>
          <h2 className="font-semibold text-gray-900">Account Privacy</h2>
        </div>
        <div className="space-y-4">
          <Toggle checked={settings.showOnline} onChange={(v) => update('showOnline', v)} label="Show Online Status" description="Let others see when you're online" />
          <Toggle checked={settings.showRating} onChange={(v) => update('showRating', v)} label="Show Seller Rating" description="Display your rating on your profile" />
          <div className="flex items-center justify-between">
            <div>
              <div className="text-sm font-medium text-gray-700">Blocked Users</div>
              <div className="text-xs text-gray-500">Manage your blocked users list</div>
            </div>
            <Button variant="outline" size="sm">Manage</Button>
          </div>
        </div>
      </Card>

      <Card>
        <div className="flex items-center gap-3 mb-4">
          <div className="w-8 h-8 rounded-lg bg-primary-50 flex items-center justify-center">
            <Shield className="w-4 h-4 text-primary-500" />
          </div>
          <h2 className="font-semibold text-gray-900">Security Settings</h2>
        </div>
        <div className="space-y-4">
          <Toggle checked={settings.twoFactorEnabled} onChange={(v) => update('twoFactorEnabled', v)} label="Two-Factor Authentication" description="Add an extra layer of security" />
          <div className="flex items-center justify-between">
            <div>
              <div className="text-sm font-medium text-gray-700">Password Reset</div>
              <div className="text-xs text-gray-500">Change your account password</div>
            </div>
            <Button variant="outline" size="sm">Change</Button>
          </div>
          <div className="flex items-center justify-between">
            <div>
              <div className="text-sm font-medium text-gray-700">Login Activity</div>
              <div className="text-xs text-gray-500">View your recent login activity</div>
            </div>
            <Button variant="outline" size="sm">View</Button>
          </div>
        </div>
      </Card>

      <Card>
        <div className="flex items-center gap-3 mb-4">
          <div className="w-8 h-8 rounded-lg bg-primary-50 flex items-center justify-center">
            <Lock className="w-4 h-4 text-primary-500" />
          </div>
          <h2 className="font-semibold text-gray-900">Data & Privacy</h2>
        </div>
        <div className="space-y-4">
          <Toggle checked={settings.notifEmail} onChange={(v) => update('notifEmail', v)} label="Notification Emails" description="Receive email notifications" />
          <Toggle checked={settings.marketingEmail} onChange={(v) => update('marketingEmail', v)} label="Marketing Emails" description="Receive promotional emails" />
          <div className="flex items-center justify-between">
            <div>
              <div className="text-sm font-medium text-gray-700">Privacy Policy</div>
              <div className="text-xs text-gray-500">Read our privacy policy</div>
            </div>
            <Button variant="ghost" size="sm">View</Button>
          </div>
          <div className="flex items-center justify-between">
            <div>
              <div className="text-sm font-medium text-gray-700">Terms of Service</div>
              <div className="text-xs text-gray-500">Read our terms of service</div>
            </div>
            <Button variant="ghost" size="sm">View</Button>
          </div>
        </div>
      </Card>

      <div className="flex items-center justify-between pt-4">
        <Button variant="danger" size="md">
          <Trash2 className="w-4 h-4 mr-2" /> Delete Account
        </Button>
        <GradientButton size="md" onClick={handleSave} disabled={saving}>
          {saving ? 'Saving...' : 'Save Settings'}
        </GradientButton>
      </div>
    </div>
  );
}
