import { useEffect, useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import {
  LayoutDashboard, Users, FileText, Briefcase, Mail, Settings, LogOut, Menu, X,
  TrendingUp, Eye, DollarSign, Inbox, Plus, Trash2, Download, Search, Star,
  Bell, Moon, Sun, Edit3, Save, ExternalLink, type LucideIcon,
} from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';
import { supabase, type Lead, type LeadStatus, type LeadPriority } from '@/lib/supabase';
import { useTheme } from '@/context/ThemeContext';
import { services } from '@/data/content';

type Tab = 'dashboard' | 'leads' | 'blog' | 'portfolio' | 'testimonials' | 'careers' | 'settings';

const tabs: { id: Tab; label: string; icon: LucideIcon }[] = [
  { id: 'dashboard', label: 'Dashboard', icon: LayoutDashboard },
  { id: 'leads', label: 'Lead CRM', icon: Users },
  { id: 'blog', label: 'Blog CMS', icon: FileText },
  { id: 'portfolio', label: 'Portfolio', icon: Briefcase },
  { id: 'testimonials', label: 'Testimonials', icon: Star },
  { id: 'careers', label: 'Applications', icon: Mail },
  { id: 'settings', label: 'Settings', icon: Settings },
];

const leadStatuses: LeadStatus[] = ['new', 'contacted', 'qualified', 'proposal_sent', 'won', 'lost', 'follow_up'];
const leadPriorities: LeadPriority[] = ['low', 'medium', 'high', 'urgent'];
const statusColors: Record<LeadStatus, string> = {
  new: 'bg-blue-500/15 text-blue-600 dark:text-blue-400',
  contacted: 'bg-cyan-500/15 text-cyan-600 dark:text-cyan-400',
  qualified: 'bg-violet-500/15 text-violet-600 dark:text-violet-400',
  proposal_sent: 'bg-amber-500/15 text-amber-600 dark:text-amber-400',
  won: 'bg-green-500/15 text-green-600 dark:text-green-400',
  lost: 'bg-red-500/15 text-red-600 dark:text-red-400',
  follow_up: 'bg-orange-500/15 text-orange-600 dark:text-orange-400',
};

export default function Admin() {
  const { theme, toggleTheme } = useTheme();
  const navigate = useNavigate();
  const [session, setSession] = useState<boolean | null>(null);
  const [authMode, setAuthMode] = useState<'signin' | 'signup'>('signin');
  const [authForm, setAuthForm] = useState({ email: '', password: '' });
  const [authError, setAuthError] = useState('');
  const [authLoading, setAuthLoading] = useState(false);

  const [activeTab, setActiveTab] = useState<Tab>('dashboard');
  const [sidebarOpen, setSidebarOpen] = useState(false);

  useEffect(() => {
    supabase.auth.getSession().then(({ data }) => {
      setSession(!!data.session);
    });
    const { data: sub } = supabase.auth.onAuthStateChange((_e, s) => {
      setSession(!!s);
    });
    return () => sub.subscription.unsubscribe();
  }, []);

  const handleAuth = async (e: React.FormEvent) => {
    e.preventDefault();
    setAuthLoading(true);
    setAuthError('');
    try {
      if (authMode === 'signin') {
        const { error } = await supabase.auth.signInWithPassword({
          email: authForm.email, password: authForm.password,
        });
        if (error) throw error;
      } else {
        const { error } = await supabase.auth.signUp({
          email: authForm.email, password: authForm.password,
        });
        if (error) throw error;
        // Auto sign-in after signup (email confirmation is off)
        await supabase.auth.signInWithPassword({
          email: authForm.email, password: authForm.password,
        });
      }
    } catch (err) {
      setAuthError(err instanceof Error ? err.message : 'Authentication failed.');
    } finally {
      setAuthLoading(false);
    }
  };

  const handleSignOut = async () => {
    await supabase.auth.signOut();
    navigate('/');
  };

  if (session === null) {
    return (
      <div className="flex min-h-[70vh] items-center justify-center">
        <div className="text-primary-400 dark:text-gray-500">Loading…</div>
      </div>
    );
  }

  if (!session) {
    return (
      <div className="flex min-h-[70vh] items-center justify-center px-5 py-16">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className="w-full max-w-md glass-strong rounded-3xl p-8 shadow-soft-lg dark:shadow-soft-dark-lg"
        >
          <Link to="/" className="flex items-center gap-2.5">
            <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-secondary-500 to-accent-500 text-white">
              <span className="text-lg font-black">Q</span>
            </div>
            <div>
              <span className="font-bold">Queneva</span>
              <p className="text-xs text-primary-400 dark:text-gray-500">Admin Dashboard</p>
            </div>
          </Link>
          <h1 className="mt-6 text-2xl font-bold">
            {authMode === 'signin' ? 'Welcome back' : 'Create your account'}
          </h1>
          <p className="mt-2 text-sm text-primary-400 dark:text-gray-400">
            {authMode === 'signin'
              ? 'Sign in to manage leads, content, and analytics.'
              : 'Sign up to access the Queneva admin dashboard.'}
          </p>
          <form onSubmit={handleAuth} className="mt-6 space-y-4">
            <div>
              <label className="mb-1.5 block text-sm font-medium text-primary-600 dark:text-gray-300">Email</label>
              <input
                type="email"
                required
                value={authForm.email}
                onChange={(e) => setAuthForm((f) => ({ ...f, email: e.target.value }))}
                className="w-full rounded-xl glass px-4 py-3 text-sm outline-none focus:ring-2 focus:ring-secondary-500"
                placeholder="admin@queneva.com"
              />
            </div>
            <div>
              <label className="mb-1.5 block text-sm font-medium text-primary-600 dark:text-gray-300">Password</label>
              <input
                type="password"
                required
                minLength={6}
                value={authForm.password}
                onChange={(e) => setAuthForm((f) => ({ ...f, password: e.target.value }))}
                className="w-full rounded-xl glass px-4 py-3 text-sm outline-none focus:ring-2 focus:ring-secondary-500"
                placeholder="••••••••"
              />
            </div>
            {authError && <p className="text-sm text-red-500">{authError}</p>}
            <button type="submit" disabled={authLoading} className="btn-primary w-full disabled:opacity-60">
              {authLoading ? 'Please wait…' : authMode === 'signin' ? 'Sign in' : 'Create account'}
            </button>
          </form>
          <p className="mt-5 text-center text-sm text-primary-400 dark:text-gray-400">
            {authMode === 'signin' ? "Don't have an account? " : 'Already have an account? '}
            <button
              onClick={() => { setAuthMode(authMode === 'signin' ? 'signup' : 'signin'); setAuthError(''); }}
              className="font-semibold text-secondary-500 hover:underline dark:text-accent-400"
            >
              {authMode === 'signin' ? 'Sign up' : 'Sign in'}
            </button>
          </p>
        </motion.div>
      </div>
    );
  }

  return (
    <div className="flex min-h-[calc(100vh-4.5rem)]">
      {/* Sidebar */}
      <aside className={`fixed inset-y-0 left-0 z-40 w-64 transform border-r border-primary-100 bg-white/80 pt-18 backdrop-blur-xl transition-transform dark:border-white/10 dark:bg-surface-dark/80 lg:static lg:translate-x-0 ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'}`}>
        <div className="flex h-full flex-col p-4">
          <div className="mb-6 flex items-center justify-between px-2 pt-2">
            <span className="text-sm font-bold uppercase tracking-wider text-primary-400 dark:text-gray-500">Menu</span>
            <button onClick={() => setSidebarOpen(false)} className="lg:hidden"><X size={18} /></button>
          </div>
          <nav className="flex-1 space-y-1">
            {tabs.map((t) => (
              <button
                key={t.id}
                onClick={() => { setActiveTab(t.id); setSidebarOpen(false); }}
                className={`flex w-full items-center gap-3 rounded-xl px-4 py-3 text-sm font-medium transition-all ${
                  activeTab === t.id
                    ? 'bg-secondary-500 text-white shadow-glow'
                    : 'text-primary-500 hover:bg-primary-50 dark:text-gray-300 dark:hover:bg-white/5'
                }`}
              >
                <t.icon size={18} /> {t.label}
              </button>
            ))}
          </nav>
          <button
            onClick={handleSignOut}
            className="flex items-center gap-3 rounded-xl px-4 py-3 text-sm font-medium text-red-500 transition-all hover:bg-red-500/10"
          >
            <LogOut size={18} /> Sign out
          </button>
        </div>
      </aside>

      {sidebarOpen && <div className="fixed inset-0 z-30 bg-black/30 lg:hidden" onClick={() => setSidebarOpen(false)} />}

      {/* Main */}
      <div className="flex-1 min-w-0">
        <header className="sticky top-18 z-20 flex items-center justify-between border-b border-primary-100 bg-white/70 px-5 py-4 backdrop-blur-xl dark:border-white/10 dark:bg-surface-dark/70">
          <div className="flex items-center gap-3">
            <button onClick={() => setSidebarOpen(true)} className="lg:hidden"><Menu size={20} /></button>
            <h1 className="text-lg font-bold capitalize">{tabs.find((t) => t.id === activeTab)?.label}</h1>
          </div>
          <div className="flex items-center gap-2">
            <button onClick={toggleTheme} className="flex h-9 w-9 items-center justify-center rounded-full hover:bg-primary-50 dark:hover:bg-white/5">
              {theme === 'dark' ? <Sun size={17} /> : <Moon size={17} />}
            </button>
            <button className="relative flex h-9 w-9 items-center justify-center rounded-full hover:bg-primary-50 dark:hover:bg-white/5">
              <Bell size={17} />
              <span className="absolute right-2 top-2 h-2 w-2 rounded-full bg-accent-500" />
            </button>
          </div>
        </header>

        <div className="p-5 lg:p-8">
          {activeTab === 'dashboard' && <DashboardTab />}
          {activeTab === 'leads' && <LeadsTab />}
          {activeTab === 'blog' && <BlogTab />}
          {activeTab === 'portfolio' && <PortfolioTab />}
          {activeTab === 'testimonials' && <TestimonialsTab />}
          {activeTab === 'careers' && <CareersTab />}
          {activeTab === 'settings' && <SettingsTab />}
        </div>
      </div>
    </div>
  );
}

// ============ DASHBOARD ============
function DashboardTab() {
  const [stats, setStats] = useState({ leads: 0, visitors: 0, published: 0, projects: 0 });
  const [recentLeads, setRecentLeads] = useState<Lead[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    (async () => {
      try {
        const [l, v, b, p] = await Promise.all([
          supabase.from('leads').select('*', { count: 'exact', head: true }),
          supabase.from('site_visitors').select('count').maybeSingle(),
          supabase.from('blog_posts').select('*', { count: 'exact', head: true }).eq('status', 'published'),
          supabase.from('portfolios').select('*', { count: 'exact', head: true }),
        ]);
        setStats({
          leads: l.count || 0,
          visitors: v.data?.count || 0,
          published: b.count || 0,
          projects: p.count || 0,
        });
        const { data: recent } = await supabase
          .from('leads').select('*').order('created_at', { ascending: false }).limit(5);
        setRecentLeads(recent || []);
      } finally {
        setLoading(false);
      }
    })();
  }, []);

  if (loading) return <LoadingState />;

  const cards = [
    { label: 'Total Leads', value: stats.leads, icon: Inbox, color: 'from-secondary-500 to-accent-500' },
    { label: 'Website Visitors', value: stats.visitors, icon: Eye, color: 'from-primary-500 to-secondary-500' },
    { label: 'Published Posts', value: stats.published, icon: FileText, color: 'from-accent-500 to-secondary-500' },
    { label: 'Portfolio Items', value: stats.projects, icon: Briefcase, color: 'from-secondary-500 to-primary-500' },
  ];

  return (
    <div className="space-y-6">
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        {cards.map((c) => (
          <motion.div
            key={c.label}
            initial={{ opacity: 0, y: 12 }}
            animate={{ opacity: 1, y: 0 }}
            className="glass rounded-2xl p-6"
          >
            <div className={`flex h-11 w-11 items-center justify-center rounded-xl bg-gradient-to-br ${c.color} text-white`}>
              <c.icon size={20} />
            </div>
            <p className="mt-4 text-3xl font-extrabold">{c.value.toLocaleString()}</p>
            <p className="text-sm text-primary-400 dark:text-gray-500">{c.label}</p>
          </motion.div>
        ))}
      </div>

      <div className="grid gap-6 lg:grid-cols-3">
        <div className="glass rounded-2xl p-6 lg:col-span-2">
          <div className="flex items-center justify-between">
            <h3 className="font-bold">Latest leads</h3>
            <TrendingUp size={18} className="text-accent-500" />
          </div>
          <div className="mt-4 space-y-3">
            {recentLeads.length === 0 ? (
              <p className="py-8 text-center text-sm text-primary-400 dark:text-gray-500">No leads yet.</p>
            ) : (
              recentLeads.map((lead) => (
                <div key={lead.id} className="flex items-center justify-between rounded-xl bg-primary-50/50 p-3 dark:bg-white/5">
                  <div className="min-w-0">
                    <p className="truncate text-sm font-semibold">{lead.full_name}</p>
                    <p className="truncate text-xs text-primary-400 dark:text-gray-500">{lead.email}</p>
                  </div>
                  <span className={`shrink-0 rounded-full px-2.5 py-1 text-xs font-medium ${statusColors[lead.status]}`}>
                    {lead.status.replace('_', ' ')}
                  </span>
                </div>
              ))
            )}
          </div>
        </div>

        <div className="glass rounded-2xl p-6">
          <h3 className="font-bold">Quick actions</h3>
          <div className="mt-4 space-y-2">
            {[
              { label: 'View all leads', icon: Users, tab: 'leads' as Tab },
              { label: 'Write a blog post', icon: FileText, tab: 'blog' as Tab },
              { label: 'Add portfolio item', icon: Briefcase, tab: 'portfolio' as Tab },
            ].map((a) => (
              <button
                key={a.label}
                onClick={() => document.querySelector(`[data-tab="${a.tab}"]`)?.dispatchEvent(new MouseEvent('click'))}
                className="flex w-full items-center gap-3 rounded-xl p-3 text-sm font-medium text-primary-500 transition-colors hover:bg-primary-50 dark:hover:bg-white/5"
              >
                <a.icon size={16} /> {a.label}
              </button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// ============ LEADS CRM ============
function LeadsTab() {
  const [leads, setLeads] = useState<Lead[]>([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState('');
  const [filterStatus, setFilterStatus] = useState<string>('all');
  const [selected, setSelected] = useState<Lead | null>(null);

  const loadLeads = async () => {
    setLoading(true);
    let q = supabase.from('leads').select('*').order('created_at', { ascending: false });
    if (filterStatus !== 'all') q = q.eq('status', filterStatus);
    const { data, error } = await q;
    if (!error && data) setLeads(data as Lead[]);
    setLoading(false);
  };

  useEffect(() => { loadLeads(); }, [filterStatus]);

  const filtered = leads.filter((l) => {
    const s = search.toLowerCase();
    return l.full_name.toLowerCase().includes(s) || l.email.toLowerCase().includes(s) || l.lead_id.toLowerCase().includes(s);
  });

  const updateLead = async (id: string, patch: Partial<Lead>) => {
    const { error } = await supabase.from('leads').update(patch).eq('id', id);
    if (!error) {
      setLeads((prev) => prev.map((l) => (l.id === id ? { ...l, ...patch } : l)));
      setSelected((s) => (s && s.id === id ? { ...s, ...patch } : s));
    }
  };

  const deleteLead = async (id: string) => {
    if (!confirm('Delete this lead? This cannot be undone.')) return;
    const { error } = await supabase.from('leads').delete().eq('id', id);
    if (!error) {
      setLeads((prev) => prev.filter((l) => l.id !== id));
      setSelected(null);
    }
  };

  const exportCSV = () => {
    const headers = ['Lead ID', 'Name', 'Company', 'Email', 'Phone', 'Service', 'Budget', 'Status', 'Priority', 'Date'];
    const rows = filtered.map((l) => [
      l.lead_id, l.full_name, l.company_name || '', l.email, l.phone || '',
      l.service_required || '', l.budget || '', l.status, l.priority,
      new Date(l.created_at).toLocaleString(),
    ]);
    const csv = [headers, ...rows].map((r) => r.map((c) => `"${String(c).replace(/"/g, '""')}"`).join(',')).join('\n');
    const blob = new Blob([csv], { type: 'text/csv' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url; a.download = `queneva-leads-${Date.now()}.csv`; a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div className="space-y-5">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <div className="flex flex-wrap gap-2">
          <div className="relative">
            <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-primary-300 dark:text-gray-500" />
            <input
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              placeholder="Search leads…"
              className="w-56 rounded-full glass py-2.5 pl-9 pr-4 text-sm outline-none focus:ring-2 focus:ring-secondary-500"
            />
          </div>
          <select
            value={filterStatus}
            onChange={(e) => setFilterStatus(e.target.value)}
            className="rounded-full glass px-4 py-2.5 text-sm outline-none focus:ring-2 focus:ring-secondary-500"
          >
            <option value="all">All statuses</option>
            {leadStatuses.map((s) => <option key={s} value={s}>{s.replace('_', ' ')}</option>)}
          </select>
        </div>
        <button onClick={exportCSV} className="btn-secondary !px-4 !py-2.5 text-xs">
          <Download size={14} /> Export CSV
        </button>
      </div>

      <div className="grid gap-5 lg:grid-cols-3">
        {/* List */}
        <div className="lg:col-span-2">
          {loading ? (
            <LoadingState />
          ) : filtered.length === 0 ? (
            <div className="glass rounded-2xl p-12 text-center text-sm text-primary-400 dark:text-gray-500">
              No leads found. New contact-form submissions will appear here.
            </div>
          ) : (
            <div className="space-y-2">
              {filtered.map((lead) => (
                <button
                  key={lead.id}
                  onClick={() => setSelected(lead)}
                  className={`flex w-full items-center justify-between gap-3 rounded-2xl p-4 text-left transition-all ${
                    selected?.id === lead.id ? 'glass-strong ring-2 ring-secondary-500' : 'glass hover:bg-white/80 dark:hover:bg-white/10'
                  }`}
                >
                  <div className="min-w-0 flex-1">
                    <div className="flex items-center gap-2">
                      <p className="truncate text-sm font-bold">{lead.full_name}</p>
                      <span className={`shrink-0 rounded-full px-2 py-0.5 text-[10px] font-semibold ${statusColors[lead.status]}`}>
                        {lead.status.replace('_', ' ')}
                      </span>
                    </div>
                    <p className="truncate text-xs text-primary-400 dark:text-gray-500">{lead.email} · {lead.lead_id}</p>
                  </div>
                  <span className="shrink-0 text-xs text-primary-400 dark:text-gray-500">
                    {new Date(lead.created_at).toLocaleDateString()}
                  </span>
                </button>
              ))}
            </div>
          )}
        </div>

        {/* Detail */}
        <div className="lg:col-span-1">
          {selected ? (
            <div className="glass sticky top-32 rounded-2xl p-5">
              <div className="flex items-start justify-between">
                <div>
                  <h3 className="font-bold">{selected.full_name}</h3>
                  <p className="text-xs text-primary-400 dark:text-gray-500">{selected.lead_id}</p>
                </div>
                <button onClick={() => deleteLead(selected.id)} className="text-red-400 hover:text-red-500"><Trash2 size={16} /></button>
              </div>
              <div className="mt-4 space-y-3 text-sm">
                <DetailRow label="Email" value={selected.email} />
                <DetailRow label="Phone" value={selected.phone} />
                <DetailRow label="Company" value={selected.company_name} />
                <DetailRow label="City" value={selected.city} />
                <DetailRow label="Country" value={selected.country} />
                <DetailRow label="Service" value={selected.service_required} />
                <DetailRow label="Budget" value={selected.budget} />
                <DetailRow label="Contact time" value={selected.preferred_contact_time} />
                <DetailRow label="Submitted" value={new Date(selected.created_at).toLocaleString()} />
                <DetailRow label="IP" value={selected.ip_address} />
              </div>
              {selected.message && (
                <div className="mt-3 rounded-xl bg-primary-50/60 p-3 text-sm dark:bg-white/5">
                  <p className="text-xs font-semibold text-primary-400 dark:text-gray-500">Message</p>
                  <p className="mt-1 text-primary-600 dark:text-gray-300">{selected.message}</p>
                </div>
              )}
              <div className="mt-4 space-y-3">
                <div>
                  <label className="mb-1 block text-xs font-semibold text-primary-400 dark:text-gray-500">Status</label>
                  <select
                    value={selected.status}
                    onChange={(e) => updateLead(selected.id, { status: e.target.value as LeadStatus })}
                    className="w-full rounded-lg glass px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-secondary-500"
                  >
                    {leadStatuses.map((s) => <option key={s} value={s}>{s.replace('_', ' ')}</option>)}
                  </select>
                </div>
                <div>
                  <label className="mb-1 block text-xs font-semibold text-primary-400 dark:text-gray-500">Priority</label>
                  <select
                    value={selected.priority}
                    onChange={(e) => updateLead(selected.id, { priority: e.target.value as LeadPriority })}
                    className="w-full rounded-lg glass px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-secondary-500"
                  >
                    {leadPriorities.map((p) => <option key={p} value={p}>{p}</option>)}
                  </select>
                </div>
                <div>
                  <label className="mb-1 block text-xs font-semibold text-primary-400 dark:text-gray-500">Assigned to</label>
                  <input
                    value={selected.assigned_to || ''}
                    onChange={(e) => updateLead(selected.id, { assigned_to: e.target.value })}
                    placeholder="Team member"
                    className="w-full rounded-lg glass px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-secondary-500"
                  />
                </div>
                <div>
                  <label className="mb-1 block text-xs font-semibold text-primary-400 dark:text-gray-500">Notes</label>
                  <textarea
                    value={selected.notes || ''}
                    onChange={(e) => updateLead(selected.id, { notes: e.target.value })}
                    rows={3}
                    placeholder="Add notes…"
                    className="w-full rounded-lg glass px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-secondary-500"
                  />
                </div>
              </div>
            </div>
          ) : (
            <div className="glass rounded-2xl p-10 text-center text-sm text-primary-400 dark:text-gray-500">
              Select a lead to view details and manage its status.
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

function DetailRow({ label, value }: { label: string; value: string | null }) {
  if (!value) return null;
  return (
    <div className="flex justify-between gap-3">
      <span className="text-primary-400 dark:text-gray-500">{label}</span>
      <span className="text-right font-medium text-primary-600 dark:text-gray-200">{value}</span>
    </div>
  );
}

// ============ BLOG CMS ============
function BlogTab() {
  const [posts, setPosts] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [editing, setEditing] = useState<any | null>(null);
  const [showForm, setShowForm] = useState(false);

  const load = async () => {
    setLoading(true);
    const { data } = await supabase.from('blog_posts').select('*').order('created_at', { ascending: false });
    setPosts(data || []);
    setLoading(false);
  };
  useEffect(() => { load(); }, []);

  const blank = {
    title: '', slug: '', excerpt: '', content: '', cover_image: '', category: '',
    tags: '', author: 'Queneva Team', status: 'draft' as 'draft' | 'published' | 'scheduled', seo_title: '', seo_description: '',
  };
  const [form, setForm] = useState(blank);

  const startEdit = (post: any) => {
    setEditing(post);
    setForm({ ...post, tags: post.tags?.join(', ') || '' });
    setShowForm(true);
  };
  const startNew = () => {
    setEditing(null);
    setForm(blank);
    setShowForm(true);
  };

  const slugify = (s: string) => s.toLowerCase().trim().replace(/[^\w\s-]/g, '').replace(/\s+/g, '-');

  const save = async (e: React.FormEvent) => {
    e.preventDefault();
    const payload = {
      title: form.title,
      slug: form.slug || slugify(form.title),
      excerpt: form.excerpt || null,
      content: form.content,
      cover_image: form.cover_image || null,
      category: form.category || null,
      tags: form.tags ? form.tags.split(',').map((t) => t.trim()).filter(Boolean) : [],
      author: form.author,
      status: form.status,
      seo_title: form.seo_title || null,
      seo_description: form.seo_description || null,
      published_at: form.status === 'published' ? new Date().toISOString() : null,
    };
    if (editing) {
      await supabase.from('blog_posts').update(payload).eq('id', editing.id);
    } else {
      await supabase.from('blog_posts').insert(payload);
    }
    setShowForm(false);
    load();
  };

  const remove = async (id: string) => {
    if (!confirm('Delete this post?')) return;
    await supabase.from('blog_posts').delete().eq('id', id);
    load();
  };

  if (showForm) {
    return (
      <form onSubmit={save} className="glass space-y-4 rounded-2xl p-6">
        <div className="flex items-center justify-between">
          <h3 className="font-bold">{editing ? 'Edit post' : 'New blog post'}</h3>
          <button type="button" onClick={() => setShowForm(false)} className="text-sm text-primary-400 hover:text-primary-600">Cancel</button>
        </div>
        <div className="grid gap-4 sm:grid-cols-2">
          <Input label="Title" value={form.title} onChange={(v) => setForm((f) => ({ ...f, title: v }))} required />
          <Input label="Slug" value={form.slug} onChange={(v) => setForm((f) => ({ ...f, slug: v }))} placeholder="auto-generated" />
          <Input label="Category" value={form.category} onChange={(v) => setForm((f) => ({ ...f, category: v }))} />
          <Input label="Author" value={form.author} onChange={(v) => setForm((f) => ({ ...f, author: v }))} />
          <Input label="Cover image URL" value={form.cover_image} onChange={(v) => setForm((f) => ({ ...f, cover_image: v }))} />
          <Input label="Tags (comma separated)" value={form.tags} onChange={(v) => setForm((f) => ({ ...f, tags: v }))} />
        </div>
        <Input label="Excerpt" value={form.excerpt} onChange={(v) => setForm((f) => ({ ...f, excerpt: v }))} />
        <div>
          <label className="mb-1.5 block text-sm font-medium text-primary-600 dark:text-gray-300">Content (Markdown supported)</label>
          <textarea
            value={form.content}
            onChange={(e) => setForm((f) => ({ ...f, content: e.target.value }))}
            rows={10}
            className="w-full rounded-xl glass px-4 py-3 text-sm font-mono outline-none focus:ring-2 focus:ring-secondary-500"
          />
        </div>
        <div className="grid gap-4 sm:grid-cols-2">
          <Input label="SEO title" value={form.seo_title} onChange={(v) => setForm((f) => ({ ...f, seo_title: v }))} />
          <Input label="SEO description" value={form.seo_description} onChange={(v) => setForm((f) => ({ ...f, seo_description: v }))} />
        </div>
        <div>
          <label className="mb-1.5 block text-sm font-medium text-primary-600 dark:text-gray-300">Status</label>
          <select
            value={form.status}
            onChange={(e) => setForm((f) => ({ ...f, status: e.target.value as any }))}
            className="rounded-xl glass px-4 py-3 text-sm outline-none focus:ring-2 focus:ring-secondary-500"
          >
            <option value="draft">Draft</option>
            <option value="published">Published</option>
            <option value="scheduled">Scheduled</option>
          </select>
        </div>
        <button type="submit" className="btn-primary"><Save size={16} /> Save post</button>
      </form>
    );
  }

  return (
    <div className="space-y-4">
      <div className="flex justify-end">
        <button onClick={startNew} className="btn-primary !py-2.5 text-xs"><Plus size={15} /> New post</button>
      </div>
      {loading ? <LoadingState /> : posts.length === 0 ? (
        <div className="glass rounded-2xl p-12 text-center text-sm text-primary-400 dark:text-gray-500">
          No posts yet. Create your first blog post.
        </div>
      ) : (
        <div className="space-y-2">
          {posts.map((p) => (
            <div key={p.id} className="glass flex items-center justify-between gap-4 rounded-2xl p-4">
              <div className="min-w-0 flex-1">
                <p className="truncate font-semibold">{p.title}</p>
                <p className="text-xs text-primary-400 dark:text-gray-500">/{p.slug} · {p.category} · {p.status}</p>
              </div>
              <div className="flex gap-2">
                <Link to={`/blog/${p.slug}`} target="_blank" className="rounded-lg p-2 hover:bg-primary-50 dark:hover:bg-white/5"><ExternalLink size={15} /></Link>
                <button onClick={() => startEdit(p)} className="rounded-lg p-2 hover:bg-primary-50 dark:hover:bg-white/5"><Edit3 size={15} /></button>
                <button onClick={() => remove(p.id)} className="rounded-lg p-2 text-red-400 hover:bg-red-500/10"><Trash2 size={15} /></button>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

// ============ PORTFOLIO CMS ============
function PortfolioTab() {
  const [items, setItems] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [showForm, setShowForm] = useState(false);
  const [editing, setEditing] = useState<any | null>(null);
  const blank = { title: '', slug: '', client: '', category: '', description: '', image_url: '', technologies: '', url: '', featured: false };
  const [form, setForm] = useState(blank);

  const load = async () => {
    setLoading(true);
    const { data } = await supabase.from('portfolios').select('*').order('created_at', { ascending: false });
    setItems(data || []);
    setLoading(false);
  };
  useEffect(() => { load(); }, []);

  const slugify = (s: string) => s.toLowerCase().trim().replace(/[^\w\s-]/g, '').replace(/\s+/g, '-');

  const save = async (e: React.FormEvent) => {
    e.preventDefault();
    const payload = {
      title: form.title,
      slug: form.slug || slugify(form.title),
      client: form.client || null,
      category: form.category || null,
      description: form.description || null,
      image_url: form.image_url || null,
      technologies: form.technologies ? form.technologies.split(',').map((t) => t.trim()).filter(Boolean) : [],
      url: form.url || null,
      featured: form.featured,
    };
    if (editing) {
      await supabase.from('portfolios').update(payload).eq('id', editing.id);
    } else {
      await supabase.from('portfolios').insert(payload);
    }
    setShowForm(false);
    setForm(blank);
    load();
  };

  const remove = async (id: string) => {
    if (!confirm('Delete this portfolio item?')) return;
    await supabase.from('portfolios').delete().eq('id', id);
    load();
  };

  if (showForm) {
    return (
      <form onSubmit={save} className="glass space-y-4 rounded-2xl p-6">
        <div className="flex items-center justify-between">
          <h3 className="font-bold">{editing ? 'Edit item' : 'New portfolio item'}</h3>
          <button type="button" onClick={() => setShowForm(false)} className="text-sm text-primary-400 hover:text-primary-600">Cancel</button>
        </div>
        <div className="grid gap-4 sm:grid-cols-2">
          <Input label="Title" value={form.title} onChange={(v) => setForm((f) => ({ ...f, title: v }))} required />
          <Input label="Client" value={form.client} onChange={(v) => setForm((f) => ({ ...f, client: v }))} />
          <Input label="Category" value={form.category} onChange={(v) => setForm((f) => ({ ...f, category: v }))} />
          <Input label="Image URL" value={form.image_url} onChange={(v) => setForm((f) => ({ ...f, image_url: v }))} />
          <Input label="Technologies (comma separated)" value={form.technologies} onChange={(v) => setForm((f) => ({ ...f, technologies: v }))} />
          <Input label="Project URL" value={form.url} onChange={(v) => setForm((f) => ({ ...f, url: v }))} />
        </div>
        <Input label="Description" value={form.description} onChange={(v) => setForm((f) => ({ ...f, description: v }))} />
        <label className="flex items-center gap-2 text-sm">
          <input type="checkbox" checked={form.featured} onChange={(e) => setForm((f) => ({ ...f, featured: e.target.checked }))} />
          Featured
        </label>
        <button type="submit" className="btn-primary"><Save size={16} /> Save</button>
      </form>
    );
  }

  return (
    <div className="space-y-4">
      <div className="flex justify-end">
        <button onClick={() => { setEditing(null); setForm(blank); setShowForm(true); }} className="btn-primary !py-2.5 text-xs"><Plus size={15} /> New item</button>
      </div>
      {loading ? <LoadingState /> : items.length === 0 ? (
        <div className="glass rounded-2xl p-12 text-center text-sm text-primary-400 dark:text-gray-500">No portfolio items yet.</div>
      ) : (
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {items.map((p) => (
            <div key={p.id} className="glass overflow-hidden rounded-2xl">
              {p.image_url && <img src={p.image_url} alt={p.title} className="aspect-video w-full object-cover" />}
              <div className="p-4">
                <p className="font-semibold">{p.title}</p>
                <p className="text-xs text-primary-400 dark:text-gray-500">{p.category} · {p.client}</p>
                <div className="mt-3 flex gap-2">
                  <button onClick={() => { setEditing(p); setForm({ ...p, technologies: p.technologies?.join(', ') || '' }); setShowForm(true); }} className="rounded-lg p-2 hover:bg-primary-50 dark:hover:bg-white/5"><Edit3 size={15} /></button>
                  <button onClick={() => remove(p.id)} className="rounded-lg p-2 text-red-400 hover:bg-red-500/10"><Trash2 size={15} /></button>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

// ============ TESTIMONIALS ============
function TestimonialsTab() {
  const [items, setItems] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [showForm, setShowForm] = useState(false);
  const blank = { client_name: '', company: '', role: '', content: '', rating: 5, avatar_url: '', featured: false };
  const [form, setForm] = useState(blank);

  const load = async () => {
    setLoading(true);
    const { data } = await supabase.from('testimonials').select('*').order('created_at', { ascending: false });
    setItems(data || []);
    setLoading(false);
  };
  useEffect(() => { load(); }, []);

  const save = async (e: React.FormEvent) => {
    e.preventDefault();
    await supabase.from('testimonials').insert({
      client_name: form.client_name, company: form.company || null, role: form.role || null,
      content: form.content, rating: form.rating, avatar_url: form.avatar_url || null, featured: form.featured,
    });
    setShowForm(false);
    setForm(blank);
    load();
  };
  const remove = async (id: string) => {
    if (!confirm('Delete this testimonial?')) return;
    await supabase.from('testimonials').delete().eq('id', id);
    load();
  };

  if (showForm) {
    return (
      <form onSubmit={save} className="glass space-y-4 rounded-2xl p-6">
        <div className="flex items-center justify-between">
          <h3 className="font-bold">New testimonial</h3>
          <button type="button" onClick={() => setShowForm(false)} className="text-sm text-primary-400 hover:text-primary-600">Cancel</button>
        </div>
        <div className="grid gap-4 sm:grid-cols-2">
          <Input label="Client name" value={form.client_name} onChange={(v) => setForm((f) => ({ ...f, client_name: v }))} required />
          <Input label="Company" value={form.company} onChange={(v) => setForm((f) => ({ ...f, company: v }))} />
          <Input label="Role" value={form.role} onChange={(v) => setForm((f) => ({ ...f, role: v }))} />
          <Input label="Avatar URL" value={form.avatar_url} onChange={(v) => setForm((f) => ({ ...f, avatar_url: v }))} />
        </div>
        <div>
          <label className="mb-1.5 block text-sm font-medium text-primary-600 dark:text-gray-300">Content</label>
          <textarea value={form.content} onChange={(e) => setForm((f) => ({ ...f, content: e.target.value }))} required rows={4} className="w-full rounded-xl glass px-4 py-3 text-sm outline-none focus:ring-2 focus:ring-secondary-500" />
        </div>
        <div className="flex items-center gap-4">
          <label className="flex items-center gap-2 text-sm">
            Rating
            <select value={form.rating} onChange={(e) => setForm((f) => ({ ...f, rating: Number(e.target.value) }))} className="rounded-lg glass px-3 py-2 text-sm">
              {[5,4,3,2,1].map((r) => <option key={r} value={r}>{r} stars</option>)}
            </select>
          </label>
          <label className="flex items-center gap-2 text-sm">
            <input type="checkbox" checked={form.featured} onChange={(e) => setForm((f) => ({ ...f, featured: e.target.checked }))} /> Featured
          </label>
        </div>
        <button type="submit" className="btn-primary"><Save size={16} /> Save</button>
      </form>
    );
  }

  return (
    <div className="space-y-4">
      <div className="flex justify-end">
        <button onClick={() => setShowForm(true)} className="btn-primary !py-2.5 text-xs"><Plus size={15} /> New testimonial</button>
      </div>
      {loading ? <LoadingState /> : items.length === 0 ? (
        <div className="glass rounded-2xl p-12 text-center text-sm text-primary-400 dark:text-gray-500">No testimonials yet.</div>
      ) : (
        <div className="grid gap-4 sm:grid-cols-2">
          {items.map((t) => (
            <div key={t.id} className="glass rounded-2xl p-5">
              <div className="flex items-start justify-between">
                <div>
                  <p className="font-semibold">{t.client_name}</p>
                  <p className="text-xs text-primary-400 dark:text-gray-500">{t.role} · {t.company}</p>
                </div>
                <button onClick={() => remove(t.id)} className="text-red-400 hover:text-red-500"><Trash2 size={15} /></button>
              </div>
              <p className="mt-3 text-sm text-primary-600 dark:text-gray-300">“{t.content}”</p>
              <div className="mt-2 flex">{Array.from({ length: t.rating }).map((_, i) => <Star key={i} size={12} className="fill-yellow-400 text-yellow-400" />)}</div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

// ============ CAREERS APPLICATIONS ============
function CareersTab() {
  const [apps, setApps] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const load = async () => {
    setLoading(true);
    const { data } = await supabase.from('career_applications').select('*').order('created_at', { ascending: false });
    setApps(data || []);
    setLoading(false);
  };
  useEffect(() => { load(); }, []);

  const updateStatus = async (id: string, status: string) => {
    await supabase.from('career_applications').update({ status }).eq('id', id);
    setApps((prev) => prev.map((a) => (a.id === id ? { ...a, status } : a)));
  };
  const remove = async (id: string) => {
    if (!confirm('Delete this application?')) return;
    await supabase.from('career_applications').delete().eq('id', id);
    load();
  };

  const appStatusColors: Record<string, string> = {
    new: 'bg-blue-500/15 text-blue-600', reviewing: 'bg-amber-500/15 text-amber-600',
    interviewed: 'bg-violet-500/15 text-violet-600', offered: 'bg-green-500/15 text-green-600', rejected: 'bg-red-500/15 text-red-600',
  };

  if (loading) return <LoadingState />;

  return (
    <div className="space-y-2">
      {apps.length === 0 ? (
        <div className="glass rounded-2xl p-12 text-center text-sm text-primary-400 dark:text-gray-500">No applications yet.</div>
      ) : (
        apps.map((a) => (
          <div key={a.id} className="glass rounded-2xl p-4">
            <div className="flex items-start justify-between gap-4">
              <div className="min-w-0 flex-1">
                <p className="font-bold">{a.full_name} <span className="font-normal text-primary-400 dark:text-gray-500">· {a.position}</span></p>
                <p className="text-xs text-primary-400 dark:text-gray-500">{a.email} · {a.phone}</p>
                {a.experience && <p className="mt-1 text-xs text-primary-400 dark:text-gray-500">Experience: {a.experience}</p>}
                {a.cover_letter && <p className="mt-2 rounded-lg bg-primary-50/60 p-2 text-xs dark:bg-white/5">{a.cover_letter}</p>}
              </div>
              <div className="flex shrink-0 flex-col items-end gap-2">
                <select
                  value={a.status}
                  onChange={(e) => updateStatus(a.id, e.target.value)}
                  className={`rounded-full px-3 py-1 text-xs font-medium ${appStatusColors[a.status] || 'bg-primary-100'}`}
                >
                  <option value="new">new</option>
                  <option value="reviewing">reviewing</option>
                  <option value="interviewed">interviewed</option>
                  <option value="offered">offered</option>
                  <option value="rejected">rejected</option>
                </select>
                <button onClick={() => remove(a.id)} className="text-red-400 hover:text-red-500"><Trash2 size={15} /></button>
              </div>
            </div>
          </div>
        ))
      )}
    </div>
  );
}

// ============ SETTINGS ============
function SettingsTab() {
  return (
    <div className="space-y-6">
      <div className="glass rounded-2xl p-6">
        <h3 className="font-bold">Website settings</h3>
        <p className="mt-2 text-sm text-primary-400 dark:text-gray-400">
          Manage global site configuration. Changes here affect the public website.
        </p>
        <div className="mt-5 grid gap-4 sm:grid-cols-2">
          <Input label="Company name" value="Queneva IT Services Pvt. Ltd." onChange={() => {}} />
          <Input label="Tagline" value="We Make Tech Easy" onChange={() => {}} />
          <Input label="Support email" value="hello@queneva.com" onChange={() => {}} />
          <Input label="Phone" value="+91 90000 00000" onChange={() => {}} />
        </div>
      </div>
      <div className="glass rounded-2xl p-6">
        <h3 className="font-bold">SEO defaults</h3>
        <div className="mt-5 grid gap-4 sm:grid-cols-2">
          <Input label="Default meta title" value="Queneva — We Make Tech Easy" onChange={() => {}} />
          <Input label="Default meta description" value="Queneva builds websites, software, CRM, ERP, and AI systems." onChange={() => {}} />
        </div>
      </div>
      <div className="glass rounded-2xl p-6">
        <h3 className="font-bold">Analytics</h3>
        <p className="mt-2 text-sm text-primary-400 dark:text-gray-400">Connect your analytics providers.</p>
        <div className="mt-4 space-y-3">
          {['Google Analytics ID', 'Meta Pixel ID', 'LinkedIn Pixel ID'].map((label) => (
            <Input key={label} label={label} value="" onChange={() => {}} placeholder="Enter ID…" />
          ))}
        </div>
      </div>
      <div className="glass rounded-2xl p-6">
        <h3 className="font-bold">Integrations</h3>
        <div className="mt-4 grid gap-3 sm:grid-cols-2">
          {['WhatsApp API', 'Calendly', 'Mailchimp', 'Google Sheets'].map((int) => (
            <div key={int} className="flex items-center justify-between rounded-xl bg-primary-50/60 p-3 dark:bg-white/5">
              <span className="text-sm font-medium">{int}</span>
              <span className="rounded-full bg-amber-500/15 px-2.5 py-1 text-xs font-medium text-amber-600">Not connected</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ============ Shared ============
function Input({ label, value, onChange, placeholder, required }: {
  label: string; value: string; onChange: (v: string) => void; placeholder?: string; required?: boolean;
}) {
  return (
    <div>
      <label className="mb-1.5 block text-sm font-medium text-primary-600 dark:text-gray-300">{label}{required && ' *'}</label>
      <input
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        required={required}
        className="w-full rounded-xl glass px-4 py-3 text-sm outline-none focus:ring-2 focus:ring-secondary-500"
      />
    </div>
  );
}

function LoadingState() {
  return (
    <div className="flex items-center justify-center py-20">
      <div className="h-8 w-8 animate-spin rounded-full border-2 border-secondary-500 border-t-transparent" />
    </div>
  );
}