'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { motion, useReducedMotion } from 'framer-motion';
import Card from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import Input from '@/components/ui/Input';
import Toggle from '@/components/ui/Toggle';
import SectionHeader from '@/components/ui/SectionHeader';
import FormField from '@/components/ui/FormField';
import PageHeader from '@/components/ui/PageHeader';
import {
  Settings,
  Building2,
  Mail,
  Globe,
  Upload,
  Save,
  Bell,
  Shield,
  Eye,
  Trash2,
  CheckCircle,
  User,
  Phone,
  MapPin,
  FileText,
  Link as LinkIcon,
  Image as ImageIcon,
  Lock,
  Key,
  Smartphone,
  AlertCircle
} from 'lucide-react';

// ============================================================================
// Types
// ============================================================================

interface SponsorProfile {
  companyName: string;
  contactName: string;
  contactEmail: string;
  contactPhone: string;
  website: string;
  description: string;
  logoUrl: string | null;
  industry: string;
  address: {
    street: string;
    city: string;
    country: string;
    postalCode: string;
  };
  taxId: string;
  socialLinks: {
    twitter: string;
    linkedin: string;
    instagram: string;
  };
}

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

interface PrivacySettings {
  publicProfile: boolean;
  showStats: boolean;
  showActiveSponsorships: boolean;
  allowDirectContact: boolean;
}

// ============================================================================
// Mock Data
// ============================================================================

const MOCK_PROFILE: SponsorProfile = {
  companyName: 'Acme Racing Co.',
  contactName: 'John Smith',
  contactEmail: 'sponsor@acme-racing.com',
  contactPhone: '+1 (555) 123-4567',
  website: 'https://acme-racing.com',
  description: 'Premium sim racing equipment and accessories for competitive drivers. We specialize in high-performance steering wheels, pedals, and cockpit systems used by professionals worldwide.',
  logoUrl: null,
  industry: 'Racing Equipment',
  address: {
    street: '123 Racing Boulevard',
    city: 'Indianapolis',
    country: 'United States',
    postalCode: '46222',
  },
  taxId: 'US12-3456789',
  socialLinks: {
    twitter: '@acmeracing',
    linkedin: 'acme-racing-co',
    instagram: '@acmeracing',
  },
};

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

const MOCK_PRIVACY: PrivacySettings = {
  publicProfile: true,
  showStats: false,
  showActiveSponsorships: true,
  allowDirectContact: true,
};

const INDUSTRY_OPTIONS = [
  'Racing Equipment',
  'Automotive',
  'Technology',
  'Gaming & Esports',
  'Energy Drinks',
  'Apparel',
  'Financial Services',
  'Other',
];

// ============================================================================
// Components
// ============================================================================

function SavedIndicator({ visible }: { visible: boolean }) {
  const shouldReduceMotion = useReducedMotion();
  
  return (
    <motion.div
      initial={{ opacity: 0, x: 20 }}
      animate={{ opacity: visible ? 1 : 0, x: visible ? 0 : 20 }}
      transition={{ duration: shouldReduceMotion ? 0 : 0.2 }}
      className="flex items-center gap-2 text-performance-green"
    >
      <CheckCircle className="w-4 h-4" />
      <span className="text-sm font-medium">Changes saved</span>
    </motion.div>
  );
}

// ============================================================================
// Main Component
// ============================================================================

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

  const handleSaveProfile = async () => {
    setSaving(true);
    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. All sponsorship data will be permanently removed.')) {
      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('/');
    }
  };

  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: shouldReduceMotion ? 0 : 0.1,
      },
    },
  };

  const itemVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: { opacity: 1, y: 0 },
  };

  return (
    <motion.div 
      className="max-w-4xl mx-auto py-8 px-4"
      variants={containerVariants}
      initial="hidden"
      animate="visible"
    >
      {/* Header */}
      <motion.div variants={itemVariants}>
        <PageHeader
          icon={Settings}
          title="Sponsor Settings"
          description="Manage your company profile, notifications, and security preferences"
          action={<SavedIndicator visible={saved} />}
        />
      </motion.div>

      {/* Company Profile */}
      <motion.div variants={itemVariants}>
        <Card className="mb-6 overflow-hidden">
          <SectionHeader 
            icon={Building2} 
            title="Company Profile" 
            description="Your public-facing company information"
          />
          <div className="p-6 space-y-6">
            {/* Company Basic Info */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <FormField label="Company Name" icon={Building2} required>
                <Input
                  type="text"
                  value={profile.companyName}
                  onChange={(e) => setProfile({ ...profile, companyName: e.target.value })}
                  placeholder="Your company name"
                />
              </FormField>

              <FormField label="Industry">
                <select
                  value={profile.industry}
                  onChange={(e) => setProfile({ ...profile, industry: e.target.value })}
                  className="w-full px-3 py-2 bg-iron-gray border border-charcoal-outline rounded-lg text-white focus:outline-none focus:border-primary-blue"
                >
                  {INDUSTRY_OPTIONS.map(industry => (
                    <option key={industry} value={industry}>{industry}</option>
                  ))}
                </select>
              </FormField>
            </div>

            {/* Contact Information */}
            <div className="pt-4 border-t border-charcoal-outline/50">
              <h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">
                Contact Information
              </h3>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <FormField label="Contact Name" icon={User} required>
                  <Input
                    type="text"
                    value={profile.contactName}
                    onChange={(e) => setProfile({ ...profile, contactName: e.target.value })}
                    placeholder="Full name"
                  />
                </FormField>

                <FormField label="Contact Email" icon={Mail} required>
                  <Input
                    type="email"
                    value={profile.contactEmail}
                    onChange={(e) => setProfile({ ...profile, contactEmail: e.target.value })}
                    placeholder="sponsor@company.com"
                  />
                </FormField>

                <FormField label="Phone Number" icon={Phone}>
                  <Input
                    type="tel"
                    value={profile.contactPhone}
                    onChange={(e) => setProfile({ ...profile, contactPhone: e.target.value })}
                    placeholder="+1 (555) 123-4567"
                  />
                </FormField>

                <FormField label="Website" icon={Globe}>
                  <Input
                    type="url"
                    value={profile.website}
                    onChange={(e) => setProfile({ ...profile, website: e.target.value })}
                    placeholder="https://company.com"
                  />
                </FormField>
              </div>
            </div>

            {/* Address */}
            <div className="pt-4 border-t border-charcoal-outline/50">
              <h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">
                Business Address
              </h3>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="md:col-span-2">
                  <FormField label="Street Address" icon={MapPin}>
                    <Input
                      type="text"
                      value={profile.address.street}
                      onChange={(e) => setProfile({ 
                        ...profile, 
                        address: { ...profile.address, street: e.target.value } 
                      })}
                      placeholder="123 Main Street"
                    />
                  </FormField>
                </div>

                <FormField label="City">
                  <Input
                    type="text"
                    value={profile.address.city}
                    onChange={(e) => setProfile({ 
                      ...profile, 
                      address: { ...profile.address, city: e.target.value } 
                    })}
                    placeholder="City"
                  />
                </FormField>

                <FormField label="Postal Code">
                  <Input
                    type="text"
                    value={profile.address.postalCode}
                    onChange={(e) => setProfile({ 
                      ...profile, 
                      address: { ...profile.address, postalCode: e.target.value } 
                    })}
                    placeholder="12345"
                  />
                </FormField>

                <FormField label="Country">
                  <Input
                    type="text"
                    value={profile.address.country}
                    onChange={(e) => setProfile({ 
                      ...profile, 
                      address: { ...profile.address, country: e.target.value } 
                    })}
                    placeholder="Country"
                  />
                </FormField>

                <FormField label="Tax ID / VAT Number" icon={FileText}>
                  <Input
                    type="text"
                    value={profile.taxId}
                    onChange={(e) => setProfile({ ...profile, taxId: e.target.value })}
                    placeholder="XX12-3456789"
                  />
                </FormField>
              </div>
            </div>

            {/* Description */}
            <div className="pt-4 border-t border-charcoal-outline/50">
              <FormField label="Company Description">
                <textarea
                  value={profile.description}
                  onChange={(e) => setProfile({ ...profile, description: e.target.value })}
                  placeholder="Tell potential sponsorship partners about your company, products, and what you're looking for in sponsorship opportunities..."
                  rows={4}
                  className="w-full px-4 py-3 bg-iron-gray border border-charcoal-outline rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-primary-blue resize-none"
                />
                <p className="text-xs text-gray-500 mt-1">
                  This description appears on your public sponsor profile.
                </p>
              </FormField>
            </div>

            {/* Social Links */}
            <div className="pt-4 border-t border-charcoal-outline/50">
              <h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">
                Social Media
              </h3>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <FormField label="Twitter / X" icon={LinkIcon}>
                  <Input
                    type="text"
                    value={profile.socialLinks.twitter}
                    onChange={(e) => setProfile({ 
                      ...profile, 
                      socialLinks: { ...profile.socialLinks, twitter: e.target.value } 
                    })}
                    placeholder="@username"
                  />
                </FormField>

                <FormField label="LinkedIn" icon={LinkIcon}>
                  <Input
                    type="text"
                    value={profile.socialLinks.linkedin}
                    onChange={(e) => setProfile({ 
                      ...profile, 
                      socialLinks: { ...profile.socialLinks, linkedin: e.target.value } 
                    })}
                    placeholder="company-name"
                  />
                </FormField>

                <FormField label="Instagram" icon={LinkIcon}>
                  <Input
                    type="text"
                    value={profile.socialLinks.instagram}
                    onChange={(e) => setProfile({ 
                      ...profile, 
                      socialLinks: { ...profile.socialLinks, instagram: e.target.value } 
                    })}
                    placeholder="@username"
                  />
                </FormField>
              </div>
            </div>

            {/* Logo Upload */}
            <div className="pt-4 border-t border-charcoal-outline/50">
              <FormField label="Company Logo" icon={ImageIcon}>
                <div className="flex items-start gap-6">
                  <div className="w-24 h-24 rounded-xl bg-gradient-to-br from-iron-gray to-deep-graphite border-2 border-dashed border-charcoal-outline flex items-center justify-center overflow-hidden">
                    {profile.logoUrl ? (
                      <img src={profile.logoUrl} alt="Company logo" className="w-full h-full object-cover" />
                    ) : (
                      <Building2 className="w-10 h-10 text-gray-600" />
                    )}
                  </div>
                  <div className="flex-1">
                    <div className="flex items-center gap-3">
                      <label className="cursor-pointer">
                        <input
                          type="file"
                          accept="image/png,image/jpeg,image/svg+xml"
                          className="hidden"
                        />
                        <div className="px-4 py-2 rounded-lg bg-iron-gray border border-charcoal-outline text-gray-300 hover:bg-charcoal-outline transition-colors flex items-center gap-2">
                          <Upload className="w-4 h-4" />
                          Upload Logo
                        </div>
                      </label>
                      {profile.logoUrl && (
                        <Button variant="secondary" className="text-sm text-gray-400">
                          Remove
                        </Button>
                      )}
                    </div>
                    <p className="text-xs text-gray-500 mt-2">
                      PNG, JPEG, or SVG. Max 2MB. Recommended size: 400x400px.
                    </p>
                  </div>
                </div>
              </FormField>
            </div>

            {/* Save Button */}
            <div className="pt-6 border-t border-charcoal-outline flex items-center justify-end gap-4">
              <Button
                variant="primary"
                onClick={handleSaveProfile}
                disabled={saving}
                className="min-w-[160px]"
              >
                {saving ? (
                  <span className="flex items-center gap-2">
                    <span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                    Saving...
                  </span>
                ) : (
                  <span className="flex items-center gap-2">
                    <Save className="w-4 h-4" />
                    Save Profile
                  </span>
                )}
              </Button>
            </div>
          </div>
        </Card>
      </motion.div>

      {/* Notification Preferences */}
      <motion.div variants={itemVariants}>
        <Card className="mb-6 overflow-hidden">
          <SectionHeader 
            icon={Bell} 
            title="Email Notifications" 
            description="Control which emails you receive from GridPilot"
            color="text-warning-amber"
          />
          <div className="p-6">
            <div className="space-y-1">
              <Toggle
                checked={notifications.emailNewSponsorships}
                onChange={(checked) => setNotifications({ ...notifications, emailNewSponsorships: checked })}
                label="Sponsorship Approvals"
                description="Receive confirmation when your sponsorship requests are approved"
              />
              <Toggle
                checked={notifications.emailWeeklyReport}
                onChange={(checked) => setNotifications({ ...notifications, emailWeeklyReport: checked })}
                label="Weekly Analytics Report"
                description="Get a weekly summary of your sponsorship performance"
              />
              <Toggle
                checked={notifications.emailRaceAlerts}
                onChange={(checked) => setNotifications({ ...notifications, emailRaceAlerts: checked })}
                label="Race Day Alerts"
                description="Be notified when sponsored leagues have upcoming races"
              />
              <Toggle
                checked={notifications.emailPaymentAlerts}
                onChange={(checked) => setNotifications({ ...notifications, emailPaymentAlerts: checked })}
                label="Payment & Invoice Notifications"
                description="Receive invoices and payment confirmations"
              />
              <Toggle
                checked={notifications.emailNewOpportunities}
                onChange={(checked) => setNotifications({ ...notifications, emailNewOpportunities: checked })}
                label="New Sponsorship Opportunities"
                description="Get notified about new leagues and drivers seeking sponsors"
              />
              <Toggle
                checked={notifications.emailContractExpiry}
                onChange={(checked) => setNotifications({ ...notifications, emailContractExpiry: checked })}
                label="Contract Expiry Reminders"
                description="Receive reminders before your sponsorship contracts expire"
              />
            </div>
          </div>
        </Card>
      </motion.div>

      {/* Privacy & Visibility */}
      <motion.div variants={itemVariants}>
        <Card className="mb-6 overflow-hidden">
          <SectionHeader 
            icon={Eye} 
            title="Privacy & Visibility" 
            description="Control how your profile appears to others"
            color="text-performance-green"
          />
          <div className="p-6">
            <div className="space-y-1">
              <Toggle
                checked={privacy.publicProfile}
                onChange={(checked) => setPrivacy({ ...privacy, publicProfile: checked })}
                label="Public Profile"
                description="Allow leagues, teams, and drivers to view your sponsor profile"
              />
              <Toggle
                checked={privacy.showStats}
                onChange={(checked) => setPrivacy({ ...privacy, showStats: checked })}
                label="Show Sponsorship Statistics"
                description="Display your total sponsorships and investment amounts"
              />
              <Toggle
                checked={privacy.showActiveSponsorships}
                onChange={(checked) => setPrivacy({ ...privacy, showActiveSponsorships: checked })}
                label="Show Active Sponsorships"
                description="Let others see which leagues and teams you currently sponsor"
              />
              <Toggle
                checked={privacy.allowDirectContact}
                onChange={(checked) => setPrivacy({ ...privacy, allowDirectContact: checked })}
                label="Allow Direct Contact"
                description="Enable leagues and teams to send you sponsorship proposals"
              />
            </div>
          </div>
        </Card>
      </motion.div>

      {/* Security */}
      <motion.div variants={itemVariants}>
        <Card className="mb-6 overflow-hidden">
          <SectionHeader 
            icon={Shield} 
            title="Account Security" 
            description="Protect your sponsor account"
            color="text-primary-blue"
          />
          <div className="p-6 space-y-4">
            <div className="flex items-center justify-between py-3 border-b border-charcoal-outline/50">
              <div className="flex items-center gap-4">
                <div className="p-2 rounded-lg bg-iron-gray">
                  <Key className="w-5 h-5 text-gray-400" />
                </div>
                <div>
                  <p className="text-gray-200 font-medium">Password</p>
                  <p className="text-sm text-gray-500">Last changed 3 months ago</p>
                </div>
              </div>
              <Button variant="secondary">
                Change Password
              </Button>
            </div>

            <div className="flex items-center justify-between py-3 border-b border-charcoal-outline/50">
              <div className="flex items-center gap-4">
                <div className="p-2 rounded-lg bg-iron-gray">
                  <Smartphone className="w-5 h-5 text-gray-400" />
                </div>
                <div>
                  <p className="text-gray-200 font-medium">Two-Factor Authentication</p>
                  <p className="text-sm text-gray-500">Add an extra layer of security to your account</p>
                </div>
              </div>
              <Button variant="secondary">
                Enable 2FA
              </Button>
            </div>

            <div className="flex items-center justify-between py-3">
              <div className="flex items-center gap-4">
                <div className="p-2 rounded-lg bg-iron-gray">
                  <Lock className="w-5 h-5 text-gray-400" />
                </div>
                <div>
                  <p className="text-gray-200 font-medium">Active Sessions</p>
                  <p className="text-sm text-gray-500">Manage devices where you're logged in</p>
                </div>
              </div>
              <Button variant="secondary">
                View Sessions
              </Button>
            </div>
          </div>
        </Card>
      </motion.div>

      {/* Danger Zone */}
      <motion.div variants={itemVariants}>
        <Card className="border-racing-red/30 overflow-hidden">
          <div className="p-5 border-b border-racing-red/30 bg-gradient-to-r from-racing-red/10 to-transparent">
            <h2 className="text-lg font-semibold text-racing-red flex items-center gap-3">
              <div className="p-2 rounded-lg bg-racing-red/10">
                <AlertCircle className="w-5 h-5 text-racing-red" />
              </div>
              Danger Zone
            </h2>
          </div>
          <div className="p-6">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-4">
                <div className="p-2 rounded-lg bg-racing-red/10">
                  <Trash2 className="w-5 h-5 text-racing-red" />
                </div>
                <div>
                  <p className="text-gray-200 font-medium">Delete Sponsor Account</p>
                  <p className="text-sm text-gray-500">
                    Permanently delete your account and all associated sponsorship data.
                    This action cannot be undone.
                  </p>
                </div>
              </div>
              <Button 
                variant="secondary" 
                onClick={handleDeleteAccount}
                className="text-racing-red border-racing-red/30 hover:bg-racing-red/10"
              >
                Delete Account
              </Button>
            </div>
          </div>
        </Card>
      </motion.div>
    </motion.div>
  );
}