'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import Card from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import Input from '@/components/ui/Input';
import { 
  Settings, 
  Building2, 
  Mail, 
  Globe,
  Upload,
  Save,
  Bell,
  Shield,
  Eye,
  Trash2
} from 'lucide-react';

interface SponsorProfile {
  name: string;
  email: string;
  website: string;
  description: string;
  logoUrl: string | null;
}

interface NotificationSettings {
  emailNewSponsorships: boolean;
  emailWeeklyReport: boolean;
  emailRaceAlerts: boolean;
  emailPaymentAlerts: boolean;
}

// Mock data
const MOCK_PROFILE: SponsorProfile = {
  name: 'Acme Racing Co.',
  email: 'sponsor@acme-racing.com',
  website: 'https://acme-racing.com',
  description: 'Premium sim racing equipment and accessories for competitive drivers.',
  logoUrl: null,
};

const MOCK_NOTIFICATIONS: NotificationSettings = {
  emailNewSponsorships: true,
  emailWeeklyReport: true,
  emailRaceAlerts: false,
  emailPaymentAlerts: true,
};

function Toggle({ checked, onChange, label }: { checked: boolean; onChange: (checked: boolean) => void; label: string }) {
  return (
    <label className="flex items-center justify-between cursor-pointer">
      <span className="text-gray-300">{label}</span>
      <button
        type="button"
        onClick={() => onChange(!checked)}
        className={`relative w-11 h-6 rounded-full transition-colors ${checked ? 'bg-primary-blue' : 'bg-iron-gray'}`}
      >
        <span 
          className={`absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform ${checked ? 'translate-x-5' : ''}`}
        />
      </button>
    </label>
  );
}

export default function SponsorSettingsPage() {
  const router = useRouter();
  const [profile, setProfile] = useState(MOCK_PROFILE);
  const [notifications, setNotifications] = useState(MOCK_NOTIFICATIONS);
  const [saving, setSaving] = useState(false);
  const [saved, setSaved] = useState(false);

  const handleSaveProfile = async () => {
    setSaving(true);
    // Simulate API call
    await new Promise(resolve => setTimeout(resolve, 800));
    setSaving(false);
    setSaved(true);
    setTimeout(() => setSaved(false), 3000);
  };

  const handleDeleteAccount = () => {
    if (confirm('Are you sure you want to delete your sponsor account? This action cannot be undone.')) {
      // Clear demo cookies and redirect
      document.cookie = 'gridpilot_demo_mode=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT';
      document.cookie = 'gridpilot_sponsor_id=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT';
      router.push('/');
    }
  };

  return (
    <div className="max-w-3xl mx-auto py-8 px-4">
      {/* Header */}
      <div className="mb-8">
        <h1 className="text-2xl font-bold text-white flex items-center gap-3">
          <Settings className="w-7 h-7 text-gray-400" />
          Sponsor Settings
        </h1>
        <p className="text-gray-400 mt-1">Manage your sponsor profile and preferences</p>
      </div>

      {/* Company Profile */}
      <Card className="mb-6">
        <div className="p-4 border-b border-charcoal-outline">
          <h2 className="text-lg font-semibold text-white flex items-center gap-2">
            <Building2 className="w-5 h-5 text-primary-blue" />
            Company Profile
          </h2>
        </div>
        <div className="p-4 space-y-4">
          <div>
            <label className="block text-sm font-medium text-gray-300 mb-2">Company Name</label>
            <Input
              type="text"
              value={profile.name}
              onChange={(e) => setProfile({ ...profile, name: e.target.value })}
              placeholder="Your company name"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-300 mb-2">
              <div className="flex items-center gap-2">
                <Mail className="w-4 h-4 text-gray-500" />
                Contact Email
              </div>
            </label>
            <Input
              type="email"
              value={profile.email}
              onChange={(e) => setProfile({ ...profile, email: e.target.value })}
              placeholder="sponsor@company.com"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-300 mb-2">
              <div className="flex items-center gap-2">
                <Globe className="w-4 h-4 text-gray-500" />
                Website
              </div>
            </label>
            <Input
              type="url"
              value={profile.website}
              onChange={(e) => setProfile({ ...profile, website: e.target.value })}
              placeholder="https://company.com"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-300 mb-2">Company Description</label>
            <textarea
              value={profile.description}
              onChange={(e) => setProfile({ ...profile, description: e.target.value })}
              placeholder="Tell leagues about your company..."
              rows={3}
              className="w-full px-3 py-2 bg-iron-gray border border-charcoal-outline rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-primary-blue resize-none"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-300 mb-2">
              <div className="flex items-center gap-2">
                <Upload className="w-4 h-4 text-gray-500" />
                Company Logo
              </div>
            </label>
            <div className="flex items-center gap-4">
              <div className="w-20 h-20 rounded-lg bg-iron-gray border border-charcoal-outline flex items-center justify-center">
                <Building2 className="w-8 h-8 text-gray-500" />
              </div>
              <div>
                <input
                  type="file"
                  accept="image/png,image/jpeg,image/svg+xml"
                  className="block w-full text-sm text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-primary-blue/10 file:text-primary-blue hover:file:bg-primary-blue/20"
                />
                <p className="text-xs text-gray-500 mt-1">PNG, JPEG, or SVG. Max 2MB.</p>
              </div>
            </div>
          </div>

          <div className="pt-4 border-t border-charcoal-outline flex items-center justify-between">
            <Button
              variant="primary"
              onClick={handleSaveProfile}
              disabled={saving}
            >
              {saving ? (
                'Saving...'
              ) : saved ? (
                <>
                  <Save className="w-4 h-4 mr-2" />
                  Saved!
                </>
              ) : (
                <>
                  <Save className="w-4 h-4 mr-2" />
                  Save Changes
                </>
              )}
            </Button>
          </div>
        </div>
      </Card>

      {/* Notification Preferences */}
      <Card className="mb-6">
        <div className="p-4 border-b border-charcoal-outline">
          <h2 className="text-lg font-semibold text-white flex items-center gap-2">
            <Bell className="w-5 h-5 text-warning-amber" />
            Notifications
          </h2>
        </div>
        <div className="p-4 space-y-4">
          <Toggle
            checked={notifications.emailNewSponsorships}
            onChange={(checked) => setNotifications({ ...notifications, emailNewSponsorships: checked })}
            label="Email when a sponsorship is approved"
          />
          <Toggle
            checked={notifications.emailWeeklyReport}
            onChange={(checked) => setNotifications({ ...notifications, emailWeeklyReport: checked })}
            label="Weekly analytics report"
          />
          <Toggle
            checked={notifications.emailRaceAlerts}
            onChange={(checked) => setNotifications({ ...notifications, emailRaceAlerts: checked })}
            label="Race day alerts for sponsored leagues"
          />
          <Toggle
            checked={notifications.emailPaymentAlerts}
            onChange={(checked) => setNotifications({ ...notifications, emailPaymentAlerts: checked })}
            label="Payment and invoice notifications"
          />
        </div>
      </Card>

      {/* Privacy & Visibility */}
      <Card className="mb-6">
        <div className="p-4 border-b border-charcoal-outline">
          <h2 className="text-lg font-semibold text-white flex items-center gap-2">
            <Eye className="w-5 h-5 text-performance-green" />
            Privacy & Visibility
          </h2>
        </div>
        <div className="p-4 space-y-4">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-gray-300">Public Profile</p>
              <p className="text-sm text-gray-500">Allow leagues to see your sponsor profile</p>
            </div>
            <Toggle checked={true} onChange={() => {}} label="" />
          </div>
          <div className="flex items-center justify-between">
            <div>
              <p className="text-gray-300">Show Sponsorship Stats</p>
              <p className="text-sm text-gray-500">Display your total sponsorships and investment on profile</p>
            </div>
            <Toggle checked={false} onChange={() => {}} label="" />
          </div>
        </div>
      </Card>

      {/* Security */}
      <Card className="mb-6">
        <div className="p-4 border-b border-charcoal-outline">
          <h2 className="text-lg font-semibold text-white flex items-center gap-2">
            <Shield className="w-5 h-5 text-primary-blue" />
            Security
          </h2>
        </div>
        <div className="p-4 space-y-4">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-gray-300">Change Password</p>
              <p className="text-sm text-gray-500">Update your account password</p>
            </div>
            <Button variant="secondary" className="text-sm">
              Change
            </Button>
          </div>
          <div className="flex items-center justify-between">
            <div>
              <p className="text-gray-300">Two-Factor Authentication</p>
              <p className="text-sm text-gray-500">Add an extra layer of security</p>
            </div>
            <Button variant="secondary" className="text-sm">
              Enable
            </Button>
          </div>
        </div>
      </Card>

      {/* Danger Zone */}
      <Card className="border-racing-red/30">
        <div className="p-4 border-b border-racing-red/30">
          <h2 className="text-lg font-semibold text-racing-red flex items-center gap-2">
            <Trash2 className="w-5 h-5" />
            Danger Zone
          </h2>
        </div>
        <div className="p-4">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-gray-300">Delete Sponsor Account</p>
              <p className="text-sm text-gray-500">Permanently delete your account and all sponsorship data</p>
            </div>
            <Button 
              variant="secondary" 
              onClick={handleDeleteAccount}
              className="text-sm text-racing-red border-racing-red/30 hover:bg-racing-red/10"
            >
              Delete Account
            </Button>
          </div>
        </div>
      </Card>

      {/* Alpha Notice */}
      <div className="mt-6 rounded-lg bg-warning-amber/10 border border-warning-amber/30 p-4">
        <p className="text-xs text-gray-400">
          <strong className="text-warning-amber">Alpha Note:</strong> Settings are demonstration-only and won't persist.
          Full account management will be available when the system is fully implemented.
        </p>
      </div>
    </div>
  );
}