import { useState, useEffect } from 'react'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { useAuth } from '@/context/AuthContext'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Badge } from '@/components/ui/badge'
import { api } from '@/lib/api'
import {
  Mail,
  User,
  CreditCard,
  Shield,
  Settings as SettingsIcon,
  ArrowLeft,
  Plus,
  Trash2,
  Check,
  X,
  ExternalLink,
  Loader2,
  Crown,
  Star,
  Brain,
  Building2,
} from 'lucide-react'
import type { AIControlSettings, CompanyLabel, CategoryInfo } from '@/types/settings'

type TabType = 'profile' | 'accounts' | 'vip' | 'ai-control' | 'subscription'

interface EmailAccount {
  id: string
  email: string
  provider: 'gmail' | 'outlook'
  connected: boolean
  lastSync?: string
}

interface VIPSender {
  email: string
  name?: string
}

interface Subscription {
  status: string
  plan: string
  currentPeriodEnd?: string
  cancelAtPeriodEnd?: boolean
}

export function Settings() {
  // #region agent log
  try {
    fetch('http://127.0.0.1:7242/ingest/4fa7412d-6f79-4871-8728-29c37c9e5772',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'Settings.tsx:52',message:'Settings component rendering',data:{},timestamp:Date.now(),sessionId:'debug-session',runId:'run1',hypothesisId:'A'})}).catch(()=>{});
  } catch(e) {}
  // #endregion
  
  const { user } = useAuth()
  const navigate = useNavigate()
  const [searchParams, setSearchParams] = useSearchParams()
  
  const activeTab = (searchParams.get('tab') as TabType) || 'profile'
  
  // #region agent log
  try {
    fetch('http://127.0.0.1:7242/ingest/4fa7412d-6f79-4871-8728-29c37c9e5772',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'Settings.tsx:60',message:'Settings state initialized',data:{hasUser:!!user,activeTab},timestamp:Date.now(),sessionId:'debug-session',runId:'run1',hypothesisId:'A'})}).catch(()=>{});
  } catch(e) {}
  // #endregion
  const [loading, setLoading] = useState(false)
  const [saving, setSaving] = useState(false)
  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null)

  const [name, setName] = useState(user?.name || '')
  const [email] = useState(user?.email || '')
  const [accounts, setAccounts] = useState<EmailAccount[]>([])
  const [connectingProvider, setConnectingProvider] = useState<string | null>(null)
  const [vipSenders, setVipSenders] = useState<VIPSender[]>([])
  const [newVipEmail, setNewVipEmail] = useState('')
  const [subscription, setSubscription] = useState<Subscription | null>(null)
  
  // AI Control state
  const [aiControlSettings, setAiControlSettings] = useState<AIControlSettings>({
    enabledCategories: [],
    categoryActions: {},
    autoDetectCompanies: true,
  })
  const [categories, setCategories] = useState<CategoryInfo[]>([])
  const [companyLabels, setCompanyLabels] = useState<CompanyLabel[]>([])
  const [newCompanyLabel, setNewCompanyLabel] = useState({ name: '', condition: '', category: 'promotions' })

  useEffect(() => {
    loadData()
  }, [user])

  const loadData = async () => {
    // #region agent log
    try {
      fetch('http://127.0.0.1:7242/ingest/4fa7412d-6f79-4871-8728-29c37c9e5772',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'Settings.tsx:84',message:'loadData called',data:{hasUser:!!user,userId:user?.$id},timestamp:Date.now(),sessionId:'debug-session',runId:'run1',hypothesisId:'E'})}).catch(()=>{});
    } catch(e) {}
    // #endregion
    
    if (!user?.$id) return
    setLoading(true)
    
    try {
      const [accountsRes, subsRes, prefsRes, aiControlRes, companyLabelsRes] = await Promise.all([
        api.getEmailAccounts(user.$id),
        api.getSubscriptionStatus(user.$id),
        api.getUserPreferences(user.$id),
        api.getAIControlSettings(user.$id),
        api.getCompanyLabels(user.$id),
      ])

      if (accountsRes.data) setAccounts(accountsRes.data)
      if (subsRes.data) setSubscription(subsRes.data)
      if (prefsRes.data?.vipSenders) setVipSenders(prefsRes.data.vipSenders)
      if (aiControlRes.data) setAiControlSettings(aiControlRes.data)
      if (companyLabelsRes.data) setCompanyLabels(companyLabelsRes.data)

      // Load categories from API or use defaults
      const categoryList: CategoryInfo[] = [
        { key: 'vip', name: 'Important', description: 'Important emails from known contacts', defaultAction: 'star', color: '#ff0000', enabled: true },
        { key: 'customers', name: 'Clients', description: 'Emails from clients and projects', defaultAction: 'inbox', color: '#4285f4', enabled: true },
        { key: 'invoices', name: 'Invoices', description: 'Invoices, receipts and financial documents', defaultAction: 'inbox', color: '#0f9d58', enabled: true },
        { key: 'newsletters', name: 'Newsletter', description: 'Regular newsletters and updates', defaultAction: 'archive_read', color: '#9c27b0', enabled: true },
        { key: 'promotions', name: 'Promotions', description: 'Marketing emails and promotions', defaultAction: 'archive_read', color: '#ff9800', enabled: true },
        { key: 'social', name: 'Social', description: 'Social media and platform notifications', defaultAction: 'archive_read', color: '#00bcd4', enabled: true },
        { key: 'security', name: 'Security', description: 'Security codes and notifications', defaultAction: 'inbox', color: '#f44336', enabled: true },
        { key: 'calendar', name: 'Calendar', description: 'Calendar invites and events', defaultAction: 'inbox', color: '#673ab7', enabled: true },
        { key: 'review', name: 'Review', description: 'Emails that need manual review', defaultAction: 'inbox', color: '#607d8b', enabled: true },
      ]

      // Update enabled status from settings
      const enabledCategories = aiControlRes.data?.enabledCategories || categoryList.map(c => c.key)
      const updatedCategories = categoryList.map(cat => ({
        ...cat,
        enabled: enabledCategories.includes(cat.key),
      }))
      setCategories(updatedCategories)
      
      // #region agent log
      try {
        fetch('http://127.0.0.1:7242/ingest/4fa7412d-6f79-4871-8728-29c37c9e5772',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'Settings.tsx:122',message:'loadData success',data:{accountsCount:accountsRes.data?.length||0,categoriesCount:updatedCategories.length},timestamp:Date.now(),sessionId:'debug-session',runId:'run1',hypothesisId:'E'})}).catch(()=>{});
      } catch(e) {}
      // #endregion
    } catch (error) {
      // #region agent log
      try {
        fetch('http://127.0.0.1:7242/ingest/4fa7412d-6f79-4871-8728-29c37c9e5772',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'Settings.tsx:123',message:'loadData error',data:{errorMessage:error instanceof Error?error.message:String(error),errorStack:error instanceof Error?error.stack:undefined},timestamp:Date.now(),sessionId:'debug-session',runId:'run1',hypothesisId:'E'})}).catch(()=>{});
      } catch(e) {}
      // #endregion
      console.error('Failed to load settings data:', error)
    } finally {
      setLoading(false)
    }
  }

  const setTab = (tab: TabType) => {
    setSearchParams({ tab })
    setMessage(null)
  }

  const showMessage = (type: 'success' | 'error', text: string) => {
    setMessage({ type, text })
    setTimeout(() => setMessage(null), 5000)
  }

  const handleSaveProfile = async () => {
    setSaving(true)
    try {
      showMessage('success', 'Profile saved!')
    } catch {
      showMessage('error', 'Failed to save')
    } finally {
      setSaving(false)
    }
  }

  const handleConnectAccount = async (provider: 'gmail' | 'outlook') => {
    if (!user?.$id) return
    setConnectingProvider(provider)
    
    try {
      const res = await api.getOAuthUrl(provider, user.$id)
      if (res.data?.url) {
        window.location.href = res.data.url
      }
    } catch {
      showMessage('error', `Failed to connect ${provider}`)
      setConnectingProvider(null)
    }
  }

  const handleDisconnectAccount = async (accountId: string) => {
    if (!user?.$id) return
    
    try {
      await api.disconnectEmailAccount(accountId, user.$id)
      setAccounts(accounts.filter(a => a.id !== accountId))
      showMessage('success', 'Account disconnected')
    } catch {
      showMessage('error', 'Failed to disconnect')
    }
  }

  const handleAddVip = () => {
    if (!newVipEmail.trim() || !newVipEmail.includes('@')) return
    
    if (vipSenders.some(v => v.email === newVipEmail)) {
      showMessage('error', 'This email is already in the VIP list')
      return
    }
    
    setVipSenders([...vipSenders, { email: newVipEmail }])
    setNewVipEmail('')
    showMessage('success', 'VIP added')
  }

  const handleRemoveVip = (email: string) => {
    setVipSenders(vipSenders.filter(v => v.email !== email))
  }

  const handleSaveVips = async () => {
    if (!user?.$id) return
    setSaving(true)
    
    try {
      await api.saveUserPreferences(user.$id, { vipSenders })
      showMessage('success', 'VIP list saved!')
    } catch {
      showMessage('error', 'Failed to save')
    } finally {
      setSaving(false)
    }
  }

  const handleManageSubscription = async () => {
    if (!user?.$id) return
    
    try {
      const res = await api.createPortalSession(user.$id)
      if (res.data?.url) {
        window.location.href = res.data.url
      }
    } catch {
      showMessage('error', 'Failed to open customer portal')
    }
  }

  const handleUpgrade = async (plan: string) => {
    if (!user?.$id) return
    
    try {
      const res = await api.createSubscriptionCheckout(plan, user.$id, user.email)
      if (res.data?.url) {
        window.location.href = res.data.url
      }
    } catch {
      showMessage('error', 'Failed to start checkout')
    }
  }

  const tabs = [
    { id: 'profile' as TabType, label: 'Profile', icon: User },
    { id: 'accounts' as TabType, label: 'Email Accounts', icon: Mail },
    { id: 'vip' as TabType, label: 'VIP List', icon: Star },
    { id: 'ai-control' as TabType, label: 'AI Control', icon: Brain },
    { id: 'subscription' as TabType, label: 'Subscription', icon: CreditCard },
  ]

  // #region agent log
  try {
    fetch('http://127.0.0.1:7242/ingest/4fa7412d-6f79-4871-8728-29c37c9e5772',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({location:'Settings.tsx:243',message:'Settings render starting',data:{loading,activeTab,hasUser:!!user},timestamp:Date.now(),sessionId:'debug-session',runId:'run1',hypothesisId:'A'})}).catch(()=>{});
  } catch(e) {}
  // #endregion
  
  return (
    <div className="min-h-screen bg-slate-50">
      <header className="bg-white border-b border-slate-200 sticky top-0 z-40">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center h-16">
            <Button variant="ghost" onClick={() => navigate('/dashboard')} className="mr-4">
              <ArrowLeft className="w-5 h-5 mr-2" />
              Back
            </Button>
            <div className="flex items-center gap-2">
              <SettingsIcon className="w-5 h-5 text-slate-500" />
              <h1 className="text-lg font-semibold text-slate-900">Settings</h1>
            </div>
          </div>
        </div>
      </header>

      <main className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {message && (
          <div className={`mb-6 p-4 rounded-lg flex items-center gap-2 ${
            message.type === 'success' 
              ? 'bg-green-50 text-green-700 border border-green-200' 
              : 'bg-red-50 text-red-700 border border-red-200'
          }`}>
            {message.type === 'success' ? <Check className="w-5 h-5" /> : <X className="w-5 h-5" />}
            {message.text}
          </div>
        )}

        <div className="flex flex-col lg:flex-row gap-8">
          <nav className="lg:w-64 flex-shrink-0">
            <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
              {tabs.map((tab) => (
                <button
                  key={tab.id}
                  onClick={() => setTab(tab.id)}
                  className={`w-full flex items-center gap-3 px-4 py-3 text-left transition-colors ${
                    activeTab === tab.id
                      ? 'bg-primary-50 text-primary-700 border-l-4 border-primary-500'
                      : 'text-slate-600 hover:bg-slate-50 border-l-4 border-transparent'
                  }`}
                >
                  <tab.icon className="w-5 h-5" />
                  <span className="font-medium">{tab.label}</span>
                </button>
              ))}
            </div>
          </nav>

          <div className="flex-1 min-w-0">
            {loading ? (
              <div className="flex items-center justify-center py-12">
                <Loader2 className="w-8 h-8 animate-spin text-primary-500" />
              </div>
            ) : (
              <>
                {activeTab === 'profile' && (
                  <Card>
                    <CardHeader>
                      <CardTitle>Profile</CardTitle>
                      <CardDescription>Manage your personal information</CardDescription>
                    </CardHeader>
                    <CardContent className="space-y-6">
                      <div className="flex items-center gap-4">
                        <div className="w-20 h-20 rounded-full bg-gradient-to-br from-primary-400 to-primary-600 flex items-center justify-center text-white text-2xl font-bold">
                          {name?.charAt(0)?.toUpperCase() || email?.charAt(0)?.toUpperCase() || 'U'}
                        </div>
                        <div>
                          <h3 className="font-semibold text-slate-900">{name || 'User'}</h3>
                          <p className="text-slate-500">{email}</p>
                        </div>
                      </div>

                      <div className="space-y-4">
                        <div>
                          <Label htmlFor="name">Name</Label>
                          <Input
                            id="name"
                            value={name}
                            onChange={(e) => setName(e.target.value)}
                            placeholder="Your name"
                          />
                        </div>
                        <div>
                          <Label htmlFor="email">Email</Label>
                          <Input id="email" value={email} disabled className="bg-slate-50" />
                          <p className="text-xs text-slate-500 mt-1">Email address cannot be changed</p>
                        </div>
                      </div>

                      <Button onClick={handleSaveProfile} disabled={saving}>
                        {saving ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : null}
                        Save
                      </Button>
                    </CardContent>
                  </Card>
                )}

                {activeTab === 'accounts' && (
                  <div className="space-y-6">
                    <Card>
                      <CardHeader>
                        <CardTitle>Connected Email Accounts</CardTitle>
                        <CardDescription>Connect your email accounts for automatic sorting</CardDescription>
                      </CardHeader>
                      <CardContent className="space-y-4">
                        {accounts.length > 0 ? (
                          accounts.map((account) => (
                            <div key={account.id} className="flex items-center justify-between p-4 bg-slate-50 rounded-lg">
                              <div className="flex items-center gap-4">
                                <div className={`w-12 h-12 rounded-lg flex items-center justify-center ${
                                  account.provider === 'gmail' ? 'bg-red-100' : 'bg-blue-100'
                                }`}>
                                  <Mail className={`w-6 h-6 ${account.provider === 'gmail' ? 'text-red-600' : 'text-blue-600'}`} />
                                </div>
                                <div>
                                  <p className="font-medium text-slate-900">{account.email}</p>
                                  <p className="text-sm text-slate-500 capitalize">{account.provider}</p>
                                </div>
                              </div>
                              <div className="flex items-center gap-3">
                                <Badge variant={account.connected ? 'success' : 'secondary'}>
                                  {account.connected ? 'Connected' : 'Disconnected'}
                                </Badge>
                                <Button variant="ghost" size="icon" onClick={() => handleDisconnectAccount(account.id)}>
                                  <Trash2 className="w-4 h-4 text-red-500" />
                                </Button>
                              </div>
                            </div>
                          ))
                        ) : (
                          <p className="text-center text-slate-500 py-8">No email accounts connected yet</p>
                        )}
                      </CardContent>
                    </Card>

                    <Card>
                      <CardHeader>
                        <CardTitle>Add Account</CardTitle>
                        <CardDescription>Connect a new email account</CardDescription>
                      </CardHeader>
                      <CardContent>
                        <div className="grid sm:grid-cols-2 gap-4">
                          <button
                            onClick={() => handleConnectAccount('gmail')}
                            disabled={connectingProvider === 'gmail'}
                            className="flex items-center gap-4 p-4 border-2 border-slate-200 rounded-xl hover:border-red-300 hover:bg-red-50 transition-all disabled:opacity-50"
                          >
                            {connectingProvider === 'gmail' ? (
                              <Loader2 className="w-8 h-8 animate-spin text-red-500" />
                            ) : (
                              <div className="w-12 h-12 rounded-lg bg-red-100 flex items-center justify-center">
                                <svg className="w-6 h-6" viewBox="0 0 24 24">
                                  <path fill="#EA4335" d="M12 11.3L1.5 3.5h21z"/>
                                  <path fill="#34A853" d="M12 12.7L1.5 20.5V3.5z"/>
                                  <path fill="#FBBC05" d="M1.5 20.5h21v-17z"/>
                                  <path fill="#4285F4" d="M22.5 3.5v17L12 12.7z"/>
                                </svg>
                              </div>
                            )}
                            <div className="text-left">
                              <p className="font-semibold text-slate-900">Gmail</p>
                              <p className="text-sm text-slate-500">Connect Google account</p>
                            </div>
                          </button>

                          <button
                            onClick={() => handleConnectAccount('outlook')}
                            disabled={connectingProvider === 'outlook'}
                            className="flex items-center gap-4 p-4 border-2 border-slate-200 rounded-xl hover:border-blue-300 hover:bg-blue-50 transition-all disabled:opacity-50"
                          >
                            {connectingProvider === 'outlook' ? (
                              <Loader2 className="w-8 h-8 animate-spin text-blue-500" />
                            ) : (
                              <div className="w-12 h-12 rounded-lg bg-blue-100 flex items-center justify-center">
                                <svg className="w-6 h-6" viewBox="0 0 24 24">
                                  <path fill="#0078D4" d="M2 6.5v11c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-11c0-.83-.67-1.5-1.5-1.5h-9C2.67 5 2 5.67 2 6.5z"/>
                                  <path fill="#0078D4" d="M14 6v12l8-6z"/>
                                </svg>
                              </div>
                            )}
                            <div className="text-left">
                              <p className="font-semibold text-slate-900">Outlook</p>
                              <p className="text-sm text-slate-500">Connect Microsoft account</p>
                            </div>
                          </button>
                        </div>
                      </CardContent>
                    </Card>
                  </div>
                )}

                {activeTab === 'vip' && (
                  <Card>
                    <CardHeader>
                      <CardTitle className="flex items-center gap-2">
                        <Shield className="w-5 h-5 text-amber-500" />
                        VIP List
                      </CardTitle>
                      <CardDescription>Emails from these senders will always be marked as important</CardDescription>
                    </CardHeader>
                    <CardContent className="space-y-6">
                      <div className="flex gap-2">
                        <Input
                          placeholder="email@example.com"
                          value={newVipEmail}
                          onChange={(e) => setNewVipEmail(e.target.value)}
                          onKeyDown={(e) => e.key === 'Enter' && handleAddVip()}
                        />
                        <Button onClick={handleAddVip}>
                          <Plus className="w-4 h-4 mr-2" />
                          Add
                        </Button>
                      </div>

                      <div className="space-y-2">
                        {vipSenders.length > 0 ? (
                          vipSenders.map((vip) => (
                            <div key={vip.email} className="flex items-center justify-between p-3 bg-amber-50 border border-amber-100 rounded-lg">
                              <div className="flex items-center gap-3">
                                <Star className="w-5 h-5 text-amber-500" />
                                <span className="text-slate-700">{vip.email}</span>
                              </div>
                              <Button variant="ghost" size="icon" onClick={() => handleRemoveVip(vip.email)}>
                                <X className="w-4 h-4 text-slate-400 hover:text-red-500" />
                              </Button>
                            </div>
                          ))
                        ) : (
                          <p className="text-center text-slate-500 py-8">No VIP senders added yet</p>
                        )}
                      </div>

                      {vipSenders.length > 0 && (
                        <Button onClick={handleSaveVips} disabled={saving}>
                          {saving ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : null}
                          Save changes
                        </Button>
                      )}
                    </CardContent>
                  </Card>
                )}

                {activeTab === 'ai-control' && (
                  <div className="space-y-6">
                    {/* Category Toggles */}
                    <Card>
                      <CardHeader>
                        <div className="flex items-center justify-between">
                          <div>
                            <CardTitle className="flex items-center gap-2">
                              <Brain className="w-5 h-5 text-primary-500" />
                              Category Control
                            </CardTitle>
                            <CardDescription>Enable or disable email categories for AI sorting</CardDescription>
                          </div>
                          <Button
                            onClick={async () => {
                              if (!user?.$id) return
                              setSaving(true)
                              try {
                                await api.saveAIControlSettings(user.$id, {
                                  enabledCategories: aiControlSettings.enabledCategories,
                                  categoryActions: aiControlSettings.categoryActions,
                                  autoDetectCompanies: aiControlSettings.autoDetectCompanies,
                                })
                                showMessage('success', 'AI Control settings saved!')
                              } catch {
                                showMessage('error', 'Failed to save settings')
                              } finally {
                                setSaving(false)
                              }
                            }}
                            disabled={saving}
                            size="sm"
                          >
                            {saving ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Check className="w-4 h-4 mr-2" />}
                            Save
                          </Button>
                        </div>
                      </CardHeader>
                      <CardContent className="space-y-4">
                        {categories.map((category) => (
                          <div key={category.key} className="flex items-center justify-between p-4 rounded-lg border border-slate-200 bg-white">
                            <div className="flex items-center gap-4 flex-1">
                              <button
                                onClick={() => {
                                  const newEnabled = category.enabled
                                    ? aiControlSettings.enabledCategories.filter(c => c !== category.key)
                                    : [...aiControlSettings.enabledCategories, category.key]
                                  setAiControlSettings({ ...aiControlSettings, enabledCategories: newEnabled })
                                  setCategories(categories.map(c => c.key === category.key ? { ...c, enabled: !c.enabled } : c))
                                }}
                                className={`w-10 h-6 rounded-full transition-colors ${category.enabled ? 'bg-primary-500' : 'bg-slate-300'}`}
                              >
                                <div className={`w-4 h-4 bg-white rounded-full transform transition-transform mx-1 ${
                                  category.enabled ? 'translate-x-4' : 'translate-x-0'
                                }`} />
                              </button>
                              <div className="flex-1">
                                <div className="flex items-center gap-2">
                                  <div className="w-4 h-4 rounded" style={{ backgroundColor: category.color }} />
                                  <p className={`font-medium ${category.enabled ? 'text-slate-900' : 'text-slate-500'}`}>
                                    {category.name}
                                  </p>
                                </div>
                                <p className="text-sm text-slate-500">{category.description}</p>
                              </div>
                            </div>
                            {category.enabled && (
                              <select
                                value={aiControlSettings.categoryActions[category.key] || category.defaultAction}
                                onChange={(e) => {
                                  const newActions = { ...aiControlSettings.categoryActions, [category.key]: e.target.value as any }
                                  setAiControlSettings({ ...aiControlSettings, categoryActions: newActions })
                                }}
                                className="px-3 py-1.5 text-sm border border-slate-300 rounded-lg bg-white"
                              >
                                <option value="inbox">Keep in Inbox</option>
                                <option value="archive_read">Archive & Mark Read</option>
                                <option value="star">Star</option>
                              </select>
                            )}
                          </div>
                        ))}
                      </CardContent>
                    </Card>

                    {/* Company Labels */}
                    <Card>
                      <CardHeader>
                        <div className="flex items-center justify-between">
                          <div>
                            <CardTitle className="flex items-center gap-2">
                              <Building2 className="w-5 h-5 text-primary-500" />
                              Company Labels
                            </CardTitle>
                            <CardDescription>Automatically label emails from specific companies</CardDescription>
                          </div>
                          <Button
                            onClick={async () => {
                              if (!user?.$id) return
                              setSaving(true)
                              try {
                                await api.saveAIControlSettings(user.$id, {
                                  autoDetectCompanies: aiControlSettings.autoDetectCompanies,
                                })
                                showMessage('success', 'Settings saved!')
                              } catch {
                                showMessage('error', 'Failed to save')
                              } finally {
                                setSaving(false)
                              }
                            }}
                            disabled={saving}
                            size="sm"
                          >
                            {saving ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Check className="w-4 h-4 mr-2" />}
                            Save
                          </Button>
                        </div>
                      </CardHeader>
                      <CardContent className="space-y-6">
                        {/* Auto-Detection Toggle */}
                        <div className="flex items-center justify-between p-4 rounded-lg border border-slate-200 bg-white">
                          <div>
                            <p className="font-medium text-slate-900">Auto-Detect Known Companies</p>
                            <p className="text-sm text-slate-500">Automatically detect and label emails from Amazon, Google, Microsoft, etc. Labels are created automatically when emails from these companies are detected.</p>
                          </div>
                          <button
                            onClick={() => {
                              const newValue = !aiControlSettings.autoDetectCompanies
                              setAiControlSettings({ ...aiControlSettings, autoDetectCompanies: newValue })
                            }}
                            className={`w-10 h-6 rounded-full transition-colors ${aiControlSettings.autoDetectCompanies ? 'bg-primary-500' : 'bg-slate-300'}`}
                          >
                            <div className={`w-4 h-4 bg-white rounded-full transform transition-transform mx-1 ${
                              aiControlSettings.autoDetectCompanies ? 'translate-x-4' : 'translate-x-0'
                            }`} />
                          </button>
                        </div>

                        {/* Custom Company Labels - Optional */}
                        {companyLabels.length > 0 && (
                          <div className="space-y-4">
                            <h3 className="font-semibold text-slate-900">Custom Company Labels (Optional)</h3>
                          
                          {/* Add New Label Form */}
                          <div className="p-4 rounded-lg border border-slate-200 bg-slate-50 space-y-3">
                            <div>
                              <Label htmlFor="label-name">Company Name</Label>
                              <Input
                                id="label-name"
                                placeholder="e.g., Amazon"
                                value={newCompanyLabel.name}
                                onChange={(e) => setNewCompanyLabel({ ...newCompanyLabel, name: e.target.value })}
                              />
                            </div>
                            <div>
                              <Label htmlFor="label-condition">Condition</Label>
                              <Input
                                id="label-condition"
                                placeholder="e.g., from:amazon.com OR from:amazon.de"
                                value={newCompanyLabel.condition}
                                onChange={(e) => setNewCompanyLabel({ ...newCompanyLabel, condition: e.target.value })}
                              />
                              <p className="text-xs text-slate-500 mt-1">Use "from:domain.com" or "subject:keyword"</p>
                            </div>
                            <div>
                              <Label htmlFor="label-category">Category</Label>
                              <select
                                id="label-category"
                                value={newCompanyLabel.category}
                                onChange={(e) => setNewCompanyLabel({ ...newCompanyLabel, category: e.target.value })}
                                className="w-full px-3 py-2 border border-slate-300 rounded-lg bg-white"
                              >
                                <option value="promotions">Promotions</option>
                                <option value="newsletters">Newsletter</option>
                                <option value="invoices">Invoices</option>
                                <option value="customers">Clients</option>
                              </select>
                            </div>
                            <Button
                              onClick={async () => {
                                if (!user?.$id || !newCompanyLabel.name || !newCompanyLabel.condition) return
                                try {
                                  const saved = await api.saveCompanyLabel(user.$id, {
                                    ...newCompanyLabel,
                                    enabled: true,
                                  })
                                  if (saved.data) {
                                    setCompanyLabels([...companyLabels, saved.data])
                                    setNewCompanyLabel({ name: '', condition: '', category: 'promotions' })
                                    showMessage('success', 'Company label created!')
                                  }
                                } catch {
                                  showMessage('error', 'Failed to create label')
                                }
                              }}
                              className="w-full"
                            >
                              <Plus className="w-4 h-4 mr-2" />
                              Add Company Label
                            </Button>
                          </div>

                          {/* Existing Labels */}
                          <div className="space-y-2">
                            {companyLabels.map((label) => (
                              <div key={label.id} className="flex items-center justify-between p-4 rounded-lg border border-slate-200 bg-white">
                                <div className="flex-1">
                                  <div className="flex items-center gap-2">
                                    <p className="font-medium text-slate-900">{label.name}</p>
                                    <Badge variant={label.enabled ? 'default' : 'secondary'}>
                                      {label.enabled ? 'Enabled' : 'Disabled'}
                                    </Badge>
                                  </div>
                                  <p className="text-sm text-slate-500 font-mono mt-1">{label.condition}</p>
                                  {label.category && (
                                    <p className="text-xs text-slate-400 mt-1">Category: {label.category}</p>
                                  )}
                                </div>
                                <div className="flex items-center gap-2">
                                  <button
                                    onClick={async () => {
                                      if (!user?.$id || !label.id) return
                                      try {
                                        await api.saveCompanyLabel(user.$id, { ...label, enabled: !label.enabled })
                                        setCompanyLabels(companyLabels.map(l => l.id === label.id ? { ...l, enabled: !l.enabled } : l))
                                        showMessage('success', 'Label updated!')
                                      } catch {
                                        showMessage('error', 'Failed to update label')
                                      }
                                    }}
                                    className={`w-10 h-6 rounded-full transition-colors ${label.enabled ? 'bg-primary-500' : 'bg-slate-300'}`}
                                  >
                                    <div className={`w-4 h-4 bg-white rounded-full transform transition-transform mx-1 ${
                                      label.enabled ? 'translate-x-4' : 'translate-x-0'
                                    }`} />
                                  </button>
                                  <Button
                                    variant="ghost"
                                    size="icon"
                                    onClick={async () => {
                                      if (!user?.$id || !label.id) return
                                      try {
                                        await api.deleteCompanyLabel(user.$id, label.id)
                                        setCompanyLabels(companyLabels.filter(l => l.id !== label.id))
                                        showMessage('success', 'Label deleted!')
                                      } catch {
                                        showMessage('error', 'Failed to delete label')
                                      }
                                    }}
                                  >
                                    <Trash2 className="w-4 h-4 text-red-500" />
                                  </Button>
                                </div>
                              </div>
                            ))}
                          </div>
                          </div>
                        )}

                        {/* Add Custom Label - Collapsible */}
                        <details className="group">
                          <summary className="cursor-pointer p-4 rounded-lg border border-slate-200 bg-slate-50 hover:bg-slate-100 transition-colors">
                            <div className="flex items-center justify-between">
                              <span className="font-medium text-slate-900">Add Custom Company Label (Optional)</span>
                              <Plus className="w-5 h-5 text-slate-500 group-open:rotate-45 transition-transform" />
                            </div>
                          </summary>
                          <div className="mt-4 p-4 rounded-lg border border-slate-200 bg-white space-y-3">
                            <div>
                              <Label htmlFor="label-name">Company Name</Label>
                              <Input
                                id="label-name"
                                placeholder="e.g., Amazon"
                                value={newCompanyLabel.name}
                                onChange={(e) => setNewCompanyLabel({ ...newCompanyLabel, name: e.target.value })}
                              />
                            </div>
                            <div>
                              <Label htmlFor="label-condition">Condition</Label>
                              <Input
                                id="label-condition"
                                placeholder="e.g., from:amazon.com OR from:amazon.de"
                                value={newCompanyLabel.condition}
                                onChange={(e) => setNewCompanyLabel({ ...newCompanyLabel, condition: e.target.value })}
                              />
                              <p className="text-xs text-slate-500 mt-1">Use "from:domain.com" or "subject:keyword"</p>
                            </div>
                            <div>
                              <Label htmlFor="label-category">Category</Label>
                              <select
                                id="label-category"
                                value={newCompanyLabel.category}
                                onChange={(e) => setNewCompanyLabel({ ...newCompanyLabel, category: e.target.value })}
                                className="w-full px-3 py-2 border border-slate-300 rounded-lg bg-white"
                              >
                                <option value="promotions">Promotions</option>
                                <option value="newsletters">Newsletter</option>
                                <option value="invoices">Invoices</option>
                                <option value="customers">Clients</option>
                              </select>
                            </div>
                            <Button
                              onClick={async () => {
                                if (!user?.$id || !newCompanyLabel.name || !newCompanyLabel.condition) return
                                try {
                                  const saved = await api.saveCompanyLabel(user.$id, {
                                    ...newCompanyLabel,
                                    enabled: true,
                                  })
                                  if (saved.data) {
                                    setCompanyLabels([...companyLabels, saved.data])
                                    setNewCompanyLabel({ name: '', condition: '', category: 'promotions' })
                                    showMessage('success', 'Company label created!')
                                  }
                                } catch {
                                  showMessage('error', 'Failed to create label')
                                }
                              }}
                              className="w-full"
                            >
                              <Plus className="w-4 h-4 mr-2" />
                              Add Company Label
                            </Button>
                          </div>
                        </details>
                      </CardContent>
                    </Card>
                  </div>
                )}

                {activeTab === 'subscription' && (
                  <div className="space-y-6">
                    <Card>
                      <CardHeader>
                        <CardTitle>Current Subscription</CardTitle>
                        <CardDescription>Manage your EmailSorter subscription</CardDescription>
                      </CardHeader>
                      <CardContent>
                        <div className="flex items-center justify-between p-4 bg-gradient-to-r from-primary-50 to-accent-50 rounded-xl border border-primary-100">
                          <div className="flex items-center gap-4">
                            <div className="w-14 h-14 rounded-xl bg-white shadow-sm flex items-center justify-center">
                              <Crown className="w-7 h-7 text-primary-500" />
                            </div>
                            <div>
                              <div className="flex items-center gap-2">
                                <h3 className="font-bold text-lg text-slate-900">{subscription?.plan || 'Trial'}</h3>
                                <Badge variant={subscription?.status === 'active' ? 'success' : 'warning'}>
                                  {subscription?.status === 'active' ? 'Active' : 'Trial'}
                                </Badge>
                              </div>
                              {subscription?.currentPeriodEnd && (
                                <p className="text-sm text-slate-500">
                                  Next billing: {new Date(subscription.currentPeriodEnd).toLocaleDateString('en-US')}
                                </p>
                              )}
                            </div>
                          </div>
                          <Button onClick={handleManageSubscription}>
                            <ExternalLink className="w-4 h-4 mr-2" />
                            Manage
                          </Button>
                        </div>
                      </CardContent>
                    </Card>

                    <Card>
                      <CardHeader>
                        <CardTitle>Available Plans</CardTitle>
                        <CardDescription>Choose the plan that fits you</CardDescription>
                      </CardHeader>
                      <CardContent>
                        <div className="grid sm:grid-cols-3 gap-4">
                          {[
                            { id: 'basic', name: 'Basic', price: '9', features: ['1 email account', '500 emails/day', 'Standard support'] },
                            { id: 'pro', name: 'Pro', price: '19', features: ['3 email accounts', 'Unlimited emails', 'Historical sorting', 'Priority support'], popular: true },
                            { id: 'business', name: 'Business', price: '49', features: ['10 email accounts', 'Unlimited emails', 'Team features', 'API access', '24/7 support'] },
                          ].map((plan) => (
                            <div key={plan.id} className={`relative p-6 rounded-xl border-2 ${
                              plan.popular ? 'border-primary-500 bg-primary-50' : 'border-slate-200 bg-white'
                            }`}>
                              {plan.popular && (
                                <div className="absolute -top-3 left-1/2 -translate-x-1/2">
                                  <Badge className="bg-primary-500 text-white">Popular</Badge>
                                </div>
                              )}
                              <h3 className="font-bold text-lg text-slate-900">{plan.name}</h3>
                              <div className="mt-2 mb-4">
                                <span className="text-3xl font-bold text-slate-900">${plan.price}</span>
                                <span className="text-slate-500">/month</span>
                              </div>
                              <ul className="space-y-2 mb-6">
                                {plan.features.map((feature) => (
                                  <li key={feature} className="flex items-center gap-2 text-sm text-slate-600">
                                    <Check className="w-4 h-4 text-green-500" />
                                    {feature}
                                  </li>
                                ))}
                              </ul>
                              <Button 
                                className="w-full" 
                                variant={plan.popular ? 'default' : 'outline'}
                                onClick={() => handleUpgrade(plan.id)}
                                disabled={subscription?.plan === plan.id}
                              >
                                {subscription?.plan === plan.id ? 'Current plan' : 'Select'}
                              </Button>
                            </div>
                          ))}
                        </div>
                      </CardContent>
                    </Card>
                  </div>
                )}
              </>
            )}
          </div>
        </div>
      </main>
    </div>
  )
}