import { useState } 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';

export function SettingsPage() {
  const [showOnline, setShowOnline] = useState(true);
  const [showRating, setShowRating] = useState(true);
  const [twoFactor, setTwoFactor] = useState(false);
  const [notifEmail, setNotifEmail] = useState(true);
  const [marketingEmail, setMarketingEmail] = useState(false);
  const [cookiePref, setCookiePref] = useState(true);

  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>

      {/* Account Privacy */}
      <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={showOnline} onChange={setShowOnline} label="Show Online Status" description="Let others see when you're online" />
          <Toggle checked={showRating} onChange={setShowRating} 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>

      {/* Security Settings */}
      <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={twoFactor} onChange={setTwoFactor} 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>

      {/* Data & Privacy */}
      <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={notifEmail} onChange={setNotifEmail} label="Notification Emails" description="Receive email notifications" />
          <Toggle checked={marketingEmail} onChange={setMarketingEmail} label="Marketing Emails" description="Receive promotional emails" />
          <Toggle checked={cookiePref} onChange={setCookiePref} label="Cookie Preferences" description="Manage cookie settings" />
          <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>

      {/* Danger Zone */}
      <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">Save Profile</GradientButton>
      </div>
    </div>
  );
}
