'use client';

import { useEffect, useState, useMemo } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import {
  Users, UserPlus, Search, Edit2, Trash2, X, ChevronRight,
  CheckCircle2, Clock, AlertCircle, Cpu, FolderKanban,
  Crown, Shield, Star, Mail, Calendar, Filter,
  Building2, Plus, ArrowLeft, UserCog, Coins,
} from 'lucide-react';

interface EnrichedUser {
  id: string;
  email: string;
  name: string | null;
  role: string;
  tier: string;
  emailVerified: boolean;
  createdAt: string;
  updatedAt: string;
  projectCount: number;
  activeProjects: number;
  completedProjects: number;
  totalTokens: number;
  companyId: string | null;
  isOwner: boolean;
}

interface Company {
  id: string;
  name: string;
  package: string;
  maxUsers: number;
  maxConversions: number;
  ownedTokens: number;
  freeTokensConsumed: number;
  ownerId: string | null;
  userCount: number;
  conversionCount: number;
  createdAt: string;
  updatedAt: string;
  owner: { id: string; email: string; name: string | null } | null;
}

type FilterTier = 'all' | 'starter' | 'professional' | 'enterprise';
type FilterRole = 'all' | 'client' | 'admin';
type TabView = 'users' | 'companies';

const TIER_CONFIG = {
  starter:      { label: 'Starter',      color: 'text-sky-400',    bg: 'bg-sky-500/10',    border: 'border-sky-500/20',    icon: Star },
  professional: { label: 'Professional', color: 'text-purple-400', bg: 'bg-purple-500/10', border: 'border-purple-500/20', icon: Crown },
  enterprise:   { label: 'Enterprise',   color: 'text-amber-400',  bg: 'bg-amber-500/10',  border: 'border-amber-500/20',  icon: Shield },
};

function TierBadge({ tier }: { tier: string }) {
  const cfg = TIER_CONFIG[tier as keyof typeof TIER_CONFIG] ?? TIER_CONFIG.starter;
  const Icon = cfg.icon;
  return (
    <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-semibold ${cfg.color} ${cfg.bg} border ${cfg.border}`}>
      <Icon className="w-2.5 h-2.5" />{cfg.label}
    </span>
  );
}

interface FormState {
  email: string; name: string; role: string; password: string; confirmPassword: string; emailVerified: boolean; companyId: string;
}

const EMPTY_FORM: FormState = { email: '', name: '', role: 'client', password: '', confirmPassword: '', emailVerified: false, companyId: '' };

interface CompanyFormState {
  name: string; package: string;
}

const EMPTY_COMPANY_FORM: CompanyFormState = { name: '', package: 'starter' };

export default function CrmDashboard() {
  const [users, setUsers] = useState<EnrichedUser[]>([]);
  const [companies, setCompanies] = useState<Company[]>([]);
  const [byTier, setByTier] = useState<Record<string, number>>({});
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  // Tab view
  const [activeTab, setActiveTab] = useState<TabView>('users');

  // Filters
  const [search, setSearch] = useState('');
  const [companySearch, setCompanySearch] = useState('');
  const [filterTier, setFilterTier] = useState<FilterTier>('all');
  const [filterRole, setFilterRole] = useState<FilterRole>('all');
  const [filterCompany, setFilterCompany] = useState<string>('all');

  // Modals
  const [modal, setModal] = useState<'none' | 'create' | 'edit' | 'createCompany' | 'createOwner' | 'assignTokens' | 'viewCompany' | 'editCompany'>('none');
  const [selected, setSelected] = useState<EnrichedUser | null>(null);
  const [selectedCompany, setSelectedCompany] = useState<Company | null>(null);
  const [isCompanyCreationFlow, setIsCompanyCreationFlow] = useState(false);
  const [form, setForm] = useState<FormState>(EMPTY_FORM);
  const [companyForm, setCompanyForm] = useState<CompanyFormState>(EMPTY_COMPANY_FORM);
  const [ownerForm, setOwnerForm] = useState({ email: '', name: '', password: '', confirmPassword: '' });
  const [tokensForm, setTokensForm] = useState({ tokens: 0 });
  const [saving, setSaving] = useState(false);
  const [formError, setFormError] = useState<string | null>(null);

  // Detail panel
  const [detailUser, setDetailUser] = useState<EnrichedUser | null>(null);
  const [detailCompany, setDetailCompany] = useState<Company | null>(null);

  useEffect(() => { void load(); }, []);

  const load = async () => {
    setLoading(true);
    try {
      const [statsRes, companiesRes] = await Promise.all([
        fetch('/api/admin/stats', { credentials: 'include' }),
        fetch('/api/admin/companies', { credentials: 'include' }),
      ]);
      if (!statsRes.ok || !companiesRes.ok) { setError('Admin access required.'); return; }
      const statsData = await statsRes.json();
      const companiesData = await companiesRes.json();
      setUsers(statsData.users);
      setByTier(statsData.byTier);
      setCompanies(companiesData.companies);
    } catch { setError('Failed to load.'); }
    finally { setLoading(false) }
  };

  const filtered = useMemo(() => {
    return users.filter(u => {
      if (filterTier !== 'all' && u.tier !== filterTier) return false;
      if (filterRole !== 'all' && u.role !== filterRole) return false;
      if (filterCompany !== 'all' && u.companyId !== filterCompany) return false;
      if (search) {
        const q = search.toLowerCase();
        return u.email.toLowerCase().includes(q) || (u.name ?? '').toLowerCase().includes(q);
      }
      return true;
    });
  }, [users, filterTier, filterRole, filterCompany, search]);

  const filteredCompanies = useMemo(() => {
    return companies.filter(c => {
      if (companySearch) {
        const q = companySearch.toLowerCase();
        return c.name.toLowerCase().includes(q) || (c.owner?.email ?? '').toLowerCase().includes(q);
      }
      return true;
    });
  }, [companies, companySearch]);

  const openCreate = () => { setForm(EMPTY_FORM); setFormError(null); setModal('create'); };
  const openCreateCompany = () => { setCompanyForm(EMPTY_COMPANY_FORM); setFormError(null); setIsCompanyCreationFlow(false); setModal('createCompany'); };
  const openCreateOwner = (company: Company) => {
    setSelectedCompany(company);
    setOwnerForm({ email: '', name: '', password: '', confirmPassword: '' });
    setFormError(null);
    setIsCompanyCreationFlow(false);
    setModal('createOwner');
  };

  const openAssignTokens = (company: Company) => {
    setSelectedCompany(company);
    setTokensForm({ tokens: 0 });
    setFormError(null);
    setModal('assignTokens');
  };
  const openViewCompany = (company: Company) => {
    setSelectedCompany(company);
    setFormError(null);
    setModal('viewCompany');
  };
  const openEditCompany = (company: Company) => {
    setSelectedCompany(company);
    setCompanyForm({ name: company.name, package: company.package });
    setFormError(null);
    setModal('editCompany');
  };
  const openEdit = (u: EnrichedUser) => {
    setSelected(u);
    setForm({ email: u.email, name: u.name ?? '', role: u.role, password: '', confirmPassword: '', emailVerified: u.emailVerified, companyId: u.companyId || '' });
    setFormError(null);
    setModal('edit');
  };

  const handleCreate = async (e: React.FormEvent) => {
    e.preventDefault();
    setSaving(true); setFormError(null);
    try {
      if (form.password !== form.confirmPassword) {
        throw new Error('Password and confirm password do not match');
      }
      // For non-admin users, company is required
      const payload = { ...form };
      if (form.role !== 'admin' && !form.companyId) {
        throw new Error('Company is required for non-admin users');
      }
      const res = await fetch('/api/admin/users', {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          email: payload.email,
          name: payload.name,
          role: payload.role,
          password: payload.password,
          emailVerified: payload.emailVerified,
          companyId: payload.companyId,
        }), credentials: 'include',
      });
      if (!res.ok) { const d = await res.json(); throw new Error(d.error || 'Failed'); }
      setModal('none'); await load();
    } catch (err) { setFormError(err instanceof Error ? err.message : 'Failed'); }
    finally { setSaving(false) }
  };

  const handleCreateCompany = async (e: React.FormEvent) => {
    e.preventDefault();
    setSaving(true); setFormError(null);
    try {
      const res = await fetch('/api/admin/companies', {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(companyForm), credentials: 'include',
      });
      const d = await res.json();
      if (!res.ok) throw new Error(d.error || 'Failed');
      // Transition directly to Step 2: create the owner (required)
      setSelectedCompany(d.company as Company);
      setOwnerForm({ email: '', name: '', password: '', confirmPassword: '' });
      setFormError(null);
      setIsCompanyCreationFlow(true);
      setModal('createOwner');
      setActiveTab('companies');
      await load();
    } catch (err) { setFormError(err instanceof Error ? err.message : 'Failed'); }
    finally { setSaving(false) }
  };

  const handleCreateOwner = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!selectedCompany) return;
    setSaving(true); setFormError(null);
    try {
      if (ownerForm.password !== ownerForm.confirmPassword) {
        throw new Error('Password and confirm password do not match');
      }
      const payload = { email: ownerForm.email, name: ownerForm.name, password: ownerForm.password };
      const res = await fetch(`/api/admin/companies/${selectedCompany.id}/owner`, {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload), credentials: 'include',
      });
      if (!res.ok) { const d = await res.json(); throw new Error(d.error || 'Failed'); }
      setModal('none');
      await load();
    } catch (err) { setFormError(err instanceof Error ? err.message : 'Failed'); }
    finally { setSaving(false) }
  };

  const handleAssignTokens = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!selectedCompany) return;
    setSaving(true); setFormError(null);
    try {
      const res = await fetch(`/api/admin/companies/${selectedCompany.id}/tokens`, {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ tokens: tokensForm.tokens }), credentials: 'include',
      });
      if (!res.ok) { const d = await res.json(); throw new Error(d.error || 'Failed'); }
      setModal('none');
      await load();
    } catch (err) { setFormError(err instanceof Error ? err.message : 'Failed'); }
    finally { setSaving(false) }
  };

  const handleEditCompany = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!selectedCompany) return;
    setSaving(true); setFormError(null);
    try {
      const res = await fetch(`/api/admin/companies/${selectedCompany.id}`, {
        method: 'PUT', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(companyForm), credentials: 'include',
      });
      if (!res.ok) { const d = await res.json(); throw new Error(d.error || 'Failed'); }
      setModal('none');
      if (detailCompany?.id === selectedCompany.id) setDetailCompany(null);
      await load();
    } catch (err) { setFormError(err instanceof Error ? err.message : 'Failed'); }
    finally { setSaving(false); }
  };

  const handleDeleteCompany = async (company: Company) => {
    if (!confirm(`Delete "${company.name}"? This will delete all associated users and projects. This cannot be undone.`)) return;
    try {
      const res = await fetch(`/api/admin/companies/${company.id}`, { method: 'DELETE', credentials: 'include' });
      if (!res.ok) throw new Error('Failed');
      if (detailCompany?.id === company.id) setDetailCompany(null);
      await load();
    } catch { setError('Failed to delete company.'); }
  };

const handleEdit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!selected) return;
    setSaving(true); setFormError(null);
    try {
      const res = await fetch(`/api/admin/users/${selected.id}`, {
        method: 'PUT', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form), credentials: 'include',
      });
      if (!res.ok) { const d = await res.json(); throw new Error(d.error || 'Failed'); }
      setModal('none');
      if (detailUser?.id === selected.id) setDetailUser(null);
      await load();
    } catch (err) { setFormError(err instanceof Error ? err.message : 'Failed'); }
    finally { setSaving(false); }
  };

  const handleDelete = async (u: EnrichedUser) => {
    if (!confirm(`Delete ${u.email}? This cannot be undone.`)) return;
    try {
      const res = await fetch(`/api/admin/users/${u.id}`, { method: 'DELETE', credentials: 'include' });
      if (!res.ok) throw new Error('Failed');
      if (detailUser?.id === u.id) setDetailUser(null);
      await load();
    } catch { setError('Failed to delete user.'); }
  };

  if (loading) return (
    <div className="flex items-center justify-center h-64">
      <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-accent" />
    </div>
  );

  const totalClients = users.filter(u => u.role === 'client').length;
  const totalAdmins = users.filter(u => u.role === 'admin').length;
  const totalTokens = users.reduce((s, u) => s + u.totalTokens, 0);
  const totalProjects = users.reduce((s, u) => s + u.projectCount, 0);
  const totalCompanies = companies.length;
  const companiesWithOwners = companies.filter(c => c.ownerId && c.ownerId !== 'pending').length;
  return (
    <div className="space-y-5">

      {/* Header with Tabs */}
      <motion.div initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }}
        className="flex items-center justify-between">
        <div>
          <h2 className="text-2xl font-bold text-foreground flex items-center gap-2">
            <Users className="w-6 h-6 text-accent-light" /> CRM
          </h2>
          <p className="text-sm text-muted mt-1">Client accounts, tiers, companies and user management</p>
        </div>
        <div className="flex items-center gap-3">
          {/* Tab Switcher */}
          <div className="flex items-center gap-1 bg-surface rounded-lg p-1">
            <button
              onClick={() => setActiveTab('users')}
              className={`px-3 py-1.5 rounded-md text-sm font-medium transition-all cursor-pointer ${
                activeTab === 'users' ? 'bg-accent/20 text-accent-light' : 'text-muted hover:text-foreground'
              }`}
            >
              <Users className="w-4 h-4 inline mr-1" /> Users
            </button>
            <button
              onClick={() => setActiveTab('companies')}
              className={`px-3 py-1.5 rounded-md text-sm font-medium transition-all cursor-pointer ${
                activeTab === 'companies' ? 'bg-accent/20 text-accent-light' : 'text-muted hover:text-foreground'
              }`}
            >
              <Building2 className="w-4 h-4 inline mr-1" /> Companies
            </button>
          </div>
          {/* Action Button */}
          {activeTab === 'users' ? (
            <button onClick={openCreate}
              className="flex items-center gap-2 px-4 py-2.5 rounded-lg gradient-accent text-white text-sm font-semibold hover:opacity-90 transition cursor-pointer glow-accent">
              <UserPlus className="w-4 h-4" /> New User
            </button>
          ) : (
            <button onClick={openCreateCompany}
              className="flex items-center gap-2 px-4 py-2.5 rounded-lg gradient-accent text-white text-sm font-semibold hover:opacity-90 transition cursor-pointer glow-accent">
              <Plus className="w-4 h-4" /> Add Company
            </button>
          )}
        </div>
      </motion.div>

      {error && (
        <div className="flex items-center gap-2 p-3 rounded-lg bg-red-500/10 border border-red-500/20 text-sm text-red-400">
          <AlertCircle className="w-4 h-4 shrink-0" />{error}
          <button onClick={() => setError(null)} className="ml-auto cursor-pointer"><X className="w-3.5 h-3.5" /></button>
        </div>
      )}

      {/* Stats cards */}
      <div className="grid grid-cols-4 gap-3">
        {activeTab === 'users' ? (
          // User stats
          <>
            {[
              { label: 'Total Clients',      value: totalClients,              icon: Users,        color: 'text-accent-light' },
              { label: 'Total Conversions',  value: totalProjects,             icon: FolderKanban, color: 'text-purple-400' },
              { label: 'Total Tokens Used',  value: totalTokens.toLocaleString(), icon: Cpu,       color: 'text-sky-400', raw: true },
              { label: 'Admins',             value: totalAdmins,               icon: Shield,       color: 'text-amber-400' },
            ].map((c, i) => {
              const Icon = c.icon;
              return (
                <motion.div key={c.label} initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: i * 0.04 }}
                  className="glass rounded-xl p-4">
                  <div className="flex items-center gap-2 mb-2">
                    <Icon className={`w-4 h-4 ${c.color}`} />
                    <p className="text-[10px] text-muted uppercase tracking-wider font-medium">{c.label}</p>
                  </div>
                  <p className="text-2xl font-bold text-foreground">{c.raw ? c.value : c.value}</p>
                </motion.div>
              );
            })}
          </>
        ) : (
          // Company stats
          <>
            {[
              { label: 'Total Companies',       value: totalCompanies,      icon: Building2,    color: 'text-accent-light' },
              { label: 'With Owners',           value: companiesWithOwners, icon: Crown,        color: 'text-purple-400' },
              { label: 'Need Owners',           value: totalCompanies - companiesWithOwners, icon: UserCog, color: 'text-amber-400' },
              { label: 'Total Users',           value: totalClients,        icon: Users,        color: 'text-sky-400' },
            ].map((c, i) => {
              const Icon = c.icon;
              return (
                <motion.div key={c.label} initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: i * 0.04 }}
                  className="glass rounded-xl p-4">
                  <div className="flex items-center gap-2 mb-2">
                    <Icon className={`w-4 h-4 ${c.color}`} />
                    <p className="text-[10px] text-muted uppercase tracking-wider font-medium">{c.label}</p>
                  </div>
                  <p className="text-2xl font-bold text-foreground">{c.value}</p>
                </motion.div>
              );
            })}
          </>
        )}
      </div>

      {/* Tier breakdown - only for users tab */}
      {activeTab === 'users' && (
        <motion.div initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.16 }}
          className="glass rounded-xl p-5">
          <h3 className="text-sm font-semibold text-foreground mb-4">Clients by Tier</h3>
          <div className="grid grid-cols-3 gap-4">
            {(['starter', 'professional', 'enterprise'] as const).map(tier => {
              const cfg = TIER_CONFIG[tier];
              const Icon = cfg.icon;
              const count = byTier[tier] ?? 0;
              const pct = totalClients > 0 ? Math.round((count / totalClients) * 100) : 0;
              return (
                <button key={tier} onClick={() => setFilterTier(filterTier === tier ? 'all' : tier)}
                  className={`rounded-xl p-4 border text-left transition-all cursor-pointer ${
                    filterTier === tier ? `${cfg.bg} ${cfg.border}` : 'glass-light border-transparent hover:border-border'
                  }`}>
                  <div className="flex items-center justify-between mb-2">
                    <span className={`flex items-center gap-1.5 text-xs font-semibold ${cfg.color}`}>
                      <Icon className="w-3.5 h-3.5" />{cfg.label}
                    </span>
                    <span className="text-xl font-bold text-foreground">{count}</span>
                  </div>
                  <div className="h-1.5 rounded-full bg-surface overflow-hidden">
                    <div className={`h-full rounded-full transition-all ${cfg.bg} ${cfg.color} border-0`}
                      style={{ width: `${pct}%`, background: 'currentColor' }} />
                  </div>
                  <p className="text-[10px] text-muted mt-1">{pct}% of clients</p>
                </button>
              );
            })}
          </div>
        </motion.div>
      )}

      {/* Main content - Users Tab */}
      {activeTab === 'users' && (
        <motion.div initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.2 }}
          className={`grid gap-4 ${detailUser ? 'grid-cols-[1fr_320px]' : 'grid-cols-1'}`}>

          {/* Table */}
          <div className="glass rounded-xl overflow-hidden">
            {/* Filters */}
            <div className="flex items-center gap-3 p-4 border-b border-border">
              <div className="flex items-center gap-2 flex-1 bg-surface rounded-lg px-3 py-2">
                <Search className="w-3.5 h-3.5 text-muted" />
                <input value={search} onChange={e => setSearch(e.target.value)} placeholder="Search users..."
                  className="bg-transparent text-xs text-foreground outline-none placeholder-muted flex-1" />
                {search && <button onClick={() => setSearch('')} className="cursor-pointer"><X className="w-3 h-3 text-muted" /></button>}
              </div>
              <div className="flex items-center gap-1">
                {(['all', 'client', 'admin'] as FilterRole[]).map(r => (
                  <button key={r} onClick={() => setFilterRole(r)}
                    className={`px-2.5 py-1.5 rounded-lg text-[11px] font-medium capitalize cursor-pointer transition-all ${
                      filterRole === r ? 'bg-accent/20 text-accent-light' : 'text-muted hover:text-foreground'
                    }`}>{r}</button>
                ))}
              </div>
              {/* Company Filter */}
              <select 
                value={filterCompany} 
                onChange={e => setFilterCompany(e.target.value)}
                className="bg-surface border border-border rounded-lg px-2 py-1.5 text-xs text-foreground outline-none cursor-pointer"
              >
                <option value="all">All Companies</option>
                {companies.map(c => (
                  <option key={c.id} value={c.id}>{c.name}</option>
                ))}
              </select>
            </div>

          {/* Column headers */}
          <div className="grid grid-cols-[1fr_100px_120px_80px_80px_100px_80px] gap-3 px-4 py-2.5 bg-surface text-[10px] text-muted uppercase tracking-wider font-semibold border-b border-border">
            <span>User</span>
            <span>Role</span>
            <span>Tier</span>
            <span>Conversions</span>
            <span>Tokens</span>
            <span>Joined</span>
            <span className="text-right">Actions</span>
          </div>

          {filtered.length === 0 ? (
            <div className="py-12 text-center text-sm text-muted">No users found.</div>
          ) : (
            <div>
              {filtered.map((u, i) => (
                <div key={u.id}
                  onClick={() => setDetailUser(detailUser?.id === u.id ? null : u)}
                  className={`grid grid-cols-[1fr_100px_120px_80px_80px_100px_80px] gap-3 px-4 py-3 items-center text-xs cursor-pointer transition-colors border-t border-border/50 ${
                    detailUser?.id === u.id ? 'bg-accent/5 border-l-2 border-l-accent' : i % 2 !== 0 ? 'bg-surface/30 hover:bg-surface/60' : 'hover:bg-surface/40'
                  }`}>
                  <div className="min-w-0">
                    <p className="font-medium text-foreground truncate">{u.name || '—'}</p>
                    <p className="text-[10px] text-muted truncate">{u.email}</p>
                  </div>
                  <span>
                    <span className={`px-2 py-0.5 rounded-full text-[10px] font-semibold ${
                      u.role === 'admin' ? 'bg-purple-500/10 text-purple-400' : 'bg-surface-light text-muted'
                    }`}>{u.role}</span>
                  </span>
                  <span><TierBadge tier={u.tier} /></span>
                  <span className="text-muted tabular-nums">{u.projectCount}</span>
                  <span className="text-muted tabular-nums text-[10px]">
                    {u.totalTokens >= 1_000_000 ? `${(u.totalTokens / 1_000_000).toFixed(1)}M` : u.totalTokens >= 1000 ? `${(u.totalTokens / 1000).toFixed(0)}k` : String(u.totalTokens)}
                  </span>
                  <span className="text-muted text-[10px]">{new Date(u.createdAt).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: '2-digit' })}</span>
                  <div className="flex items-center justify-end gap-2" onClick={e => e.stopPropagation()}>
                    <button onClick={() => openEdit(u)} title="Edit"
                      className="p-1.5 rounded hover:bg-surface-light cursor-pointer text-muted hover:text-accent-light transition-colors">
                      <Edit2 className="w-3.5 h-3.5" />
                    </button>
                    <button onClick={() => void handleDelete(u)} title="Delete"
                      className="p-1.5 rounded hover:bg-red-500/10 cursor-pointer text-muted hover:text-red-400 transition-colors">
                      <Trash2 className="w-3.5 h-3.5" />
                    </button>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>

        {/* Detail panel */}
        <AnimatePresence>
          {detailUser && (
            <motion.div initial={{ opacity: 0, x: 16 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 16 }}
              className="glass rounded-xl p-5 space-y-4 self-start">
              <div className="flex items-start justify-between">
                <div className="w-12 h-12 rounded-full gradient-accent flex items-center justify-center text-white text-sm font-bold">
                  {(detailUser.name?.[0] ?? detailUser.email[0]).toUpperCase()}
                </div>
                <button onClick={() => setDetailUser(null)} className="p-1 rounded hover:bg-surface-light cursor-pointer">
                  <X className="w-4 h-4 text-muted" />
                </button>
              </div>
              <div>
                <h3 className="font-semibold text-foreground">{detailUser.name || '—'}</h3>
                <p className="text-xs text-muted mt-0.5">{detailUser.email}</p>
                <div className="flex items-center gap-2 mt-2">
                  <TierBadge tier={detailUser.tier} />
                  <span className={`px-2 py-0.5 rounded-full text-[10px] font-semibold ${
                    detailUser.role === 'admin' ? 'bg-purple-500/10 text-purple-400' : 'bg-surface-light text-muted'
                  }`}>{detailUser.role}</span>
                  {detailUser.emailVerified
                    ? <span className="flex items-center gap-1 text-[10px] text-green-400"><CheckCircle2 className="w-3 h-3" />Verified</span>
                    : <span className="flex items-center gap-1 text-[10px] text-amber-400"><Clock className="w-3 h-3" />Pending</span>
                  }
                </div>
              </div>
              <div className="grid grid-cols-2 gap-2 text-[11px]">
                {[
                  { label: 'Conversions', value: detailUser.projectCount,    icon: FolderKanban },
                  { label: 'Active',     value: detailUser.activeProjects,   icon: Clock },
                  { label: 'Completed',  value: detailUser.completedProjects, icon: CheckCircle2 },
                  { label: 'Tokens',     value: detailUser.totalTokens >= 1000 ? `${(detailUser.totalTokens / 1000).toFixed(0)}k` : String(detailUser.totalTokens), icon: Cpu },
                ].map(c => {
                  const Icon = c.icon;
                  return (
                    <div key={c.label} className="glass-light rounded-lg p-3">
                      <div className="flex items-center gap-1.5 text-muted mb-1"><Icon className="w-3 h-3" />{c.label}</div>
                      <p className="font-bold text-foreground">{c.value}</p>
                    </div>
                  );
                })}
              </div>
              <div className="text-[11px] text-muted space-y-1 border-t border-border pt-3">
                <div className="flex items-center gap-2"><Mail className="w-3 h-3" />{detailUser.email}</div>
                <div className="flex items-center gap-2"><Calendar className="w-3 h-3" />Joined {new Date(detailUser.createdAt).toLocaleDateString('en-GB', { day: '2-digit', month: 'long', year: 'numeric' })}</div>
              </div>
              <div className="flex gap-2 pt-1">
                <button onClick={() => openEdit(detailUser)}
                  className="flex-1 flex items-center justify-center gap-1.5 py-2 rounded-lg gradient-accent text-white text-xs font-semibold cursor-pointer hover:opacity-90">
                  <Edit2 className="w-3.5 h-3.5" /> Edit
                </button>
                <button onClick={() => void handleDelete(detailUser)}
                  className="px-3 py-2 rounded-lg bg-red-500/10 text-red-400 text-xs font-semibold border border-red-500/20 cursor-pointer hover:bg-red-500/20 transition">
                  <Trash2 className="w-3.5 h-3.5" />
                </button>
              </div>
            </motion.div>
          )}
        </AnimatePresence>
      </motion.div>
      )}

      {/* Companies Tab */}
      {activeTab === 'companies' && (
        <motion.div initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.2 }}
          className={`grid gap-4 ${detailCompany ? 'grid-cols-[1fr_320px]' : 'grid-cols-1'}`}>
          
          {/* Companies Table */}
          <div className="glass rounded-xl overflow-hidden">
            {/* Filters */}
            <div className="flex items-center gap-3 p-4 border-b border-border">
              <div className="flex items-center gap-2 flex-1 bg-surface rounded-lg px-3 py-2">
                <Search className="w-3.5 h-3.5 text-muted" />
                <input value={companySearch} onChange={e => setCompanySearch(e.target.value)} placeholder="Search companies..."
                  className="bg-transparent text-xs text-foreground outline-none placeholder-muted flex-1" />
                {companySearch && <button onClick={() => setCompanySearch('')} className="cursor-pointer"><X className="w-3 h-3 text-muted" /></button>}
              </div>
            </div>

            {/* Column headers */}
            <div className="grid grid-cols-[1fr_100px_100px_100px_120px_120px_140px_120px_80px] gap-3 px-4 py-2.5 bg-surface text-[10px] text-muted uppercase tracking-wider font-semibold border-b border-border">
              <span>Company</span>
              <span>Package</span>
              <span>Users</span>
              <span>Conversions</span>
              <span>Credits</span>
              <span>Tokens Used</span>
              <span>Owner</span>
              <span>Created</span>
              <span className="text-right">Actions</span>
            </div>

            {filteredCompanies.length === 0 ? (
              <div className="py-12 text-center text-sm text-muted">
                No companies found. <button onClick={openCreateCompany} className="text-accent-light hover:underline cursor-pointer">Create one?</button>
              </div>
            ) : (
              <div>
                {filteredCompanies.map((c, i) => (
                  <div key={c.id}
                    onClick={() => setDetailCompany(detailCompany?.id === c.id ? null : c)}
                    className={`grid grid-cols-[1fr_100px_100px_100px_120px_120px_140px_120px_80px] gap-3 px-4 py-3 items-center text-xs cursor-pointer transition-colors border-t border-border/50 ${
                      detailCompany?.id === c.id ? 'bg-accent/5 border-l-2 border-l-accent' : i % 2 !== 0 ? 'bg-surface/30 hover:bg-surface/60' : 'hover:bg-surface/40'
                    }`}>
                    <div className="min-w-0">
                      <p className="font-medium text-foreground truncate">{c.name}</p>
                      <p className="text-[10px] text-muted truncate">{c.id.slice(0, 8)}...</p>
                    </div>
                    <span><TierBadge tier={c.package} /></span>
                    <span className="text-muted tabular-nums">{c.userCount}/{c.maxUsers}</span>
                    <span className="text-muted tabular-nums">{c.conversionCount}/{c.maxConversions}</span>
                    <span className="text-muted tabular-nums" title="Credits allocated (admin pool)">
                      {(c.ownedTokens ?? 0).toLocaleString()}
                    </span>
                    <span className="text-muted tabular-nums">
                      {(c.freeTokensConsumed ?? 0).toLocaleString()}
                    </span>
                    <span className="text-muted truncate">
                      {c.owner ? (c.owner.name || c.owner.email) : <span className="text-amber-400">No owner</span>}
                    </span>
                    <span className="text-muted text-[10px]">{new Date(c.createdAt).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: '2-digit' })}</span>
                    <div className="flex items-center justify-end gap-2" onClick={e => e.stopPropagation()}>
                      <button onClick={() => openViewCompany(c)} title="View Users"
                        className="p-1.5 rounded hover:bg-accent/20 cursor-pointer text-accent-light transition-colors">
                        <Users className="w-3.5 h-3.5" />
                      </button>
                      <button onClick={() => openEditCompany(c)} title="Edit Company"
                        className="p-1.5 rounded hover:bg-blue-500/10 cursor-pointer text-blue-400 transition-colors">
                        <Edit2 className="w-3.5 h-3.5" />
                      </button>
                      <button onClick={() => openAssignTokens(c)} title="Assign Credits"
                        className="p-1.5 rounded hover:bg-green-500/10 cursor-pointer text-green-400 transition-colors">
                        <Coins className="w-3.5 h-3.5" />
                      </button>
                      {!c.ownerId || c.ownerId === 'pending' ? (
                        <button onClick={() => openCreateOwner(c)} title="Create Owner"
                          className="p-1.5 rounded hover:bg-accent/20 cursor-pointer text-accent-light transition-colors">
                          <UserCog className="w-3.5 h-3.5" />
                        </button>
                      ) : null}
                      <button onClick={() => void handleDeleteCompany(c)} title="Delete Company"
                        className="p-1.5 rounded hover:bg-red-500/10 cursor-pointer text-red-400 transition-colors">
                        <Trash2 className="w-3.5 h-3.5" />
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>

          {/* Company Detail Panel */}
          <AnimatePresence>
            {detailCompany && (
              <motion.div initial={{ opacity: 0, x: 16 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 16 }}
                className="glass rounded-xl p-5 space-y-4 self-start">
                <div className="flex items-start justify-between">
                  <div className="w-12 h-12 rounded-full gradient-accent flex items-center justify-center text-white text-sm font-bold">
                    <Building2 className="w-5 h-5" />
                  </div>
                  <button onClick={() => setDetailCompany(null)} className="p-1 rounded hover:bg-surface-light cursor-pointer">
                    <X className="w-4 h-4 text-muted" />
                  </button>
                </div>
                <div>
                  <h3 className="font-semibold text-foreground">{detailCompany.name}</h3>
                  <p className="text-xs text-muted mt-0.5">ID: {detailCompany.id.slice(0, 8)}...</p>
                  <div className="flex items-center gap-2 mt-2">
                    <TierBadge tier={detailCompany.package} />
                  </div>
                </div>
                <div className="grid grid-cols-2 gap-2 text-[11px]">
                  <div className="glass-light rounded-lg p-3">
                    <div className="text-muted mb-1">Users</div>
                    <p className="font-bold text-foreground">{detailCompany.userCount} / {detailCompany.maxUsers}</p>
                  </div>
                  <div className="glass-light rounded-lg p-3">
                    <div className="text-muted mb-1">Conversions</div>
                    <p className="font-bold text-foreground">{detailCompany.conversionCount} / {detailCompany.maxConversions}</p>
                  </div>
                  <div className="glass-light rounded-lg p-3 col-span-2">
                    <div className="text-muted mb-1">Credits (Allocated)</div>
                    <p className="font-bold text-foreground tabular-nums">
                      {(detailCompany.ownedTokens ?? 0).toLocaleString()}
                    </p>
                  </div>
                  <div className="glass-light rounded-lg p-3 col-span-2">
                    <div className="text-muted mb-1">Tokens Used</div>
                    <p className="font-bold text-foreground tabular-nums">
                      {(detailCompany.freeTokensConsumed ?? 0).toLocaleString()}
                    </p>
                  </div>
                </div>
                <div className="text-[11px] text-muted space-y-1 border-t border-border pt-3">
                  <div className="flex items-center gap-2">
                    <Crown className="w-3 h-3" />
                    {detailCompany.owner ? (
                      <span>{detailCompany.owner.name || detailCompany.owner.email}</span>
                    ) : (
                      <span className="text-amber-400">No owner assigned</span>
                    )}
                  </div>
                  <div className="flex items-center gap-2">
                    <Calendar className="w-3 h-3" />
                    Created {new Date(detailCompany.createdAt).toLocaleDateString('en-GB', { day: '2-digit', month: 'long', year: 'numeric' })}
                  </div>
                </div>
                <div className="grid grid-cols-2 gap-2">
                  <button onClick={() => openViewCompany(detailCompany)}
                    className="flex items-center justify-center gap-1.5 py-2 rounded-lg bg-surface-light text-foreground text-xs font-semibold border border-border cursor-pointer hover:bg-surface transition">
                    <Users className="w-3.5 h-3.5" /> View Users
                  </button>
                  <button onClick={() => openEditCompany(detailCompany)}
                    className="flex items-center justify-center gap-1.5 py-2 rounded-lg bg-blue-500/10 text-blue-400 text-xs font-semibold border border-blue-500/20 cursor-pointer hover:bg-blue-500/20 transition">
                    <Edit2 className="w-3.5 h-3.5" /> Edit
                  </button>
                </div>
                {!detailCompany.ownerId || detailCompany.ownerId === 'pending' ? (
                  <button onClick={() => openCreateOwner(detailCompany)}
                    className="w-full flex items-center justify-center gap-1.5 py-2 rounded-lg gradient-accent text-white text-xs font-semibold cursor-pointer hover:opacity-90">
                    <UserPlus className="w-3.5 h-3.5" /> Create Owner
                  </button>
                ) : null}
                <button onClick={() => openAssignTokens(detailCompany)}
                  className="w-full flex items-center justify-center gap-1.5 py-2 rounded-lg bg-green-500/10 text-green-400 text-xs font-semibold border border-green-500/20 cursor-pointer hover:bg-green-500/20 transition">
                  <Coins className="w-3.5 h-3.5" /> Assign Credits
                </button>
                <button onClick={() => void handleDeleteCompany(detailCompany)}
                  className="w-full flex items-center justify-center gap-1.5 py-2 rounded-lg bg-red-500/10 text-red-400 text-xs font-semibold border border-red-500/20 cursor-pointer hover:bg-red-500/20 transition">
                  <Trash2 className="w-3.5 h-3.5" /> Delete Company
                </button>
              </motion.div>
            )}
          </AnimatePresence>
        </motion.div>
      )}

      {/* Modals */}
      <AnimatePresence>
        {modal !== 'none' && (
          <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
            className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4">
            <motion.div initial={{ opacity: 0, scale: 0.95, y: 12 }} animate={{ opacity: 1, scale: 1, y: 0 }} exit={{ opacity: 0, scale: 0.95 }}
              className="w-full max-w-md glass rounded-2xl p-6 border border-border">
              
              {/* Modal Header */}
              <div className="flex items-center justify-between mb-5">
                <div>
                  {isCompanyCreationFlow && (
                    <div className="flex items-center gap-2 mb-1.5">
                      <span className="flex items-center gap-1 text-[10px] font-semibold text-muted">
                        <span className="w-4 h-4 rounded-full bg-green-500/20 text-green-400 flex items-center justify-center text-[9px]">✓</span>
                        Step 1: Company
                      </span>
                      <span className="text-muted text-[10px]">→</span>
                      <span className="flex items-center gap-1 text-[10px] font-semibold text-accent-light">
                        <span className="w-4 h-4 rounded-full bg-accent/20 text-accent-light flex items-center justify-center text-[9px]">2</span>
                        Step 2: Owner
                      </span>
                    </div>
                  )}
                  <h3 className="text-base font-bold text-foreground">
                    {modal === 'create' && 'New User'}
                    {modal === 'edit' && 'Edit User'}
                    {modal === 'createCompany' && 'Add Company'}
                    {modal === 'createOwner' && (isCompanyCreationFlow ? `Assign Owner — ${selectedCompany?.name}` : `Create Owner — ${selectedCompany?.name}`)}
                    {modal === 'assignTokens' && `Assign Credits — ${selectedCompany?.name}`}
                    {modal === 'viewCompany' && `${selectedCompany?.name} — Users`}
                    {modal === 'editCompany' && `Edit Company — ${selectedCompany?.name}`}
                  </h3>
                  {isCompanyCreationFlow && (
                    <p className="text-[11px] text-amber-400 mt-0.5">Required — a company must have an owner to be active</p>
                  )}
                </div>
                <button onClick={() => { setModal('none'); setIsCompanyCreationFlow(false); }} className="p-1.5 rounded hover:bg-surface-light cursor-pointer">
                  <X className="w-4 h-4 text-muted" />
                </button>
              </div>

              {formError && (
                <div className="mb-4 p-3 rounded-lg bg-red-500/10 border border-red-500/20 text-xs text-red-400">
                  {formError}
                </div>
              )}

              {/* Create Company Form */}
              {modal === 'createCompany' && (
                <form onSubmit={handleCreateCompany} className="space-y-4">
                  <Field label="Company Name" required>
                    <input type="text" required value={companyForm.name} 
                      onChange={e => setCompanyForm({ ...companyForm, name: e.target.value })}
                      className="w-full bg-surface border border-border rounded-lg px-3 py-2 text-sm text-foreground outline-none focus:border-accent/60 transition" />
                  </Field>
                  <Field label="Package" required>
                    <select value={companyForm.package} 
                      onChange={e => setCompanyForm({ ...companyForm, package: e.target.value })}
                      className="w-full bg-surface border border-border rounded-lg px-3 py-2 text-sm text-foreground outline-none focus:border-accent/60 transition cursor-pointer">
                      <option value="starter">Starter — 5 users · 5 projects</option>
                      <option value="professional">Professional — 25 users · 15 projects</option>
                      <option value="enterprise">Enterprise — Unlimited users · 40 projects</option>
                    </select>
                  </Field>
                  <div className="flex gap-3 pt-2">
                    <button type="button" onClick={() => setModal('none')}
                      className="flex-1 py-2.5 rounded-lg glass-light text-sm text-muted hover:text-foreground transition cursor-pointer">
                      Cancel
                    </button>
                    <button type="submit" disabled={saving}
                      className="flex-1 py-2.5 rounded-lg gradient-accent text-white text-sm font-semibold hover:opacity-90 transition cursor-pointer disabled:opacity-50">
                      {saving ? 'Creating…' : 'Create Company'}
                    </button>
                  </div>
                </form>
              )}

              {/* Create Owner Form */}
              {modal === 'createOwner' && (
                <form onSubmit={handleCreateOwner} className="space-y-4">
                  {!isCompanyCreationFlow && (
                    <p className="text-xs text-muted">Create the owner user for <strong className="text-foreground">{selectedCompany?.name}</strong></p>
                  )}
                  <>
                    <Field label="Email" required>
                      <input type="email" required value={ownerForm.email}
                        onChange={e => setOwnerForm({ ...ownerForm, email: e.target.value })}
                        className="w-full bg-surface border border-border rounded-lg px-3 py-2 text-sm text-foreground outline-none focus:border-accent/60 transition" />
                    </Field>
                    <Field label="Name">
                      <input type="text" value={ownerForm.name}
                        onChange={e => setOwnerForm({ ...ownerForm, name: e.target.value })}
                        className="w-full bg-surface border border-border rounded-lg px-3 py-2 text-sm text-foreground outline-none focus:border-accent/60 transition" />
                    </Field>
                    <Field label="Password" required>
                      <input type="password" required value={ownerForm.password}
                        onChange={e => setOwnerForm({ ...ownerForm, password: e.target.value })}
                        className="w-full bg-surface border border-border rounded-lg px-3 py-2 text-sm text-foreground outline-none focus:border-accent/60 transition" />
                    </Field>
                    <Field label="Confirm Password" required>
                      <input type="password" required value={ownerForm.confirmPassword}
                        onChange={e => setOwnerForm({ ...ownerForm, confirmPassword: e.target.value })}
                        className="w-full bg-surface border border-border rounded-lg px-3 py-2 text-sm text-foreground outline-none focus:border-accent/60 transition" />
                    </Field>
                  </>
                  <div className="flex gap-3 pt-2">
                    {isCompanyCreationFlow ? (
                      <button type="button" onClick={() => { setModal('none'); setIsCompanyCreationFlow(false); }}
                        className="px-4 py-2.5 rounded-lg glass-light text-xs text-muted hover:text-foreground transition cursor-pointer">
                        Skip for now
                      </button>
                    ) : (
                      <button type="button" onClick={() => setModal('none')}
                        className="flex-1 py-2.5 rounded-lg glass-light text-sm text-muted hover:text-foreground transition cursor-pointer">
                        Cancel
                      </button>
                    )}
                    <button type="submit" disabled={saving}
                      className="flex-1 py-2.5 rounded-lg gradient-accent text-white text-sm font-semibold hover:opacity-90 transition cursor-pointer disabled:opacity-50">
                      {saving ? 'Saving…' : isCompanyCreationFlow ? 'Create Owner & Finish' : 'Create Owner'}
                    </button>
                  </div>
                </form>
              )}

              {/* Assign Tokens Form */}
              {modal === 'assignTokens' && (
                <form onSubmit={handleAssignTokens} className="space-y-4">
                  <p className="text-xs text-muted">
                    Assign free tokens to <strong className="text-foreground">{selectedCompany?.name}</strong>
                  </p>
                  <Field label="Tokens to Add" required>
                    <input
                      type="number"
                      min="1"
                      required
                      value={tokensForm.tokens || ''}
                      onChange={e => setTokensForm({ ...tokensForm, tokens: parseInt(e.target.value) || 0 })}
                      placeholder="e.g., 100000"
                      className="w-full bg-surface border border-border rounded-lg px-3 py-2 text-sm text-foreground outline-none focus:border-accent/60 transition"
                    />
                    <p className="text-[10px] text-muted mt-1">Enter the number of tokens to assign</p>
                  </Field>
                  <div className="flex gap-3 pt-2">
                    <button type="button" onClick={() => setModal('none')}
                      className="flex-1 py-2.5 rounded-lg glass-light text-sm text-muted hover:text-foreground transition cursor-pointer">
                      Cancel
                    </button>
                    <button type="submit" disabled={saving || tokensForm.tokens <= 0}
                      className="flex-1 py-2.5 rounded-lg gradient-accent text-white text-sm font-semibold hover:opacity-90 transition cursor-pointer disabled:opacity-50">
                      {saving ? 'Assigning…' : 'Assign Tokens'}
                    </button>
                  </div>
                </form>
              )}

              {/* View Company Users */}
              {modal === 'viewCompany' && selectedCompany && (
                <div className="space-y-4 max-h-[60vh] overflow-y-auto">
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <p className="text-xs text-muted">Owner</p>
                      {selectedCompany.owner ? (
                        <span className="text-xs text-foreground">{selectedCompany.owner.name || selectedCompany.owner.email}</span>
                      ) : (
                        <span className="text-xs text-amber-400">No owner assigned</span>
                      )}
                    </div>
                    <div className="border-t border-border pt-3">
                      <p className="text-xs text-muted mb-2">Users ({selectedCompany.userCount})</p>
                      {users.filter(u => u.companyId === selectedCompany.id).length === 0 ? (
                        <p className="text-xs text-muted italic">No users in this company</p>
                      ) : (
                        <div className="space-y-2">
                          {users.filter(u => u.companyId === selectedCompany.id).map(user => (
                            <div key={user.id} className="flex items-center justify-between p-2 rounded-lg bg-surface/50">
                              <div className="flex items-center gap-2">
                                <div className="w-6 h-6 rounded-full bg-accent/20 flex items-center justify-center text-[10px] text-accent-light">
                                  {(user.name?.[0] ?? user.email[0]).toUpperCase()}
                                </div>
                                <div>
                                  <p className="text-xs text-foreground">{user.name || '—'}</p>
                                  <p className="text-[10px] text-muted">{user.email}</p>
                                </div>
                              </div>
                              <div className="flex items-center gap-1">
                                {user.isOwner && <span className="px-1.5 py-0.5 rounded bg-amber-500/10 text-amber-400 text-[9px]">Owner</span>}
                                <span className={`px-1.5 py-0.5 rounded text-[9px] ${user.role === 'admin' ? 'bg-purple-500/10 text-purple-400' : 'bg-surface-light text-muted'}`}>
                                  {user.role}
                                </span>
                              </div>
                            </div>
                          ))}
                        </div>
                      )}
                    </div>
                  </div>
                  <div className="flex gap-3 pt-2">
                    <button type="button" onClick={() => setModal('none')}
                      className="flex-1 py-2.5 rounded-lg glass-light text-sm text-muted hover:text-foreground transition cursor-pointer">
                      Close
                    </button>
                  </div>
                </div>
              )}

              {/* Edit Company Form */}
              {modal === 'editCompany' && (
                <form onSubmit={handleEditCompany} className="space-y-4">
                  <Field label="Company Name" required>
                    <input type="text" required value={companyForm.name}
                      onChange={e => setCompanyForm({ ...companyForm, name: e.target.value })}
                      className="w-full bg-surface border border-border rounded-lg px-3 py-2 text-sm text-foreground outline-none focus:border-accent/60 transition" />
                  </Field>
                  <Field label="Package" required>
                    <select value={companyForm.package}
                      onChange={e => setCompanyForm({ ...companyForm, package: e.target.value })}
                      className="w-full bg-surface border border-border rounded-lg px-3 py-2 text-sm text-foreground outline-none focus:border-accent/60 transition cursor-pointer">
                      <option value="starter">Starter — 5 users · 5 projects</option>
                      <option value="professional">Professional — 25 users · 15 projects</option>
                      <option value="enterprise">Enterprise — Unlimited users · 40 projects</option>
                    </select>
                  </Field>
                  <div className="flex gap-3 pt-2">
                    <button type="button" onClick={() => setModal('none')}
                      className="flex-1 py-2.5 rounded-lg glass-light text-sm text-muted hover:text-foreground transition cursor-pointer">
                      Cancel
                    </button>
                    <button type="submit" disabled={saving}
                      className="flex-1 py-2.5 rounded-lg gradient-accent text-white text-sm font-semibold hover:opacity-90 transition cursor-pointer disabled:opacity-50">
                      {saving ? 'Saving…' : 'Save Changes'}
                    </button>
                  </div>
                </form>
              )}

              {/* Create/Edit User Form */}
              {(modal === 'create' || modal === 'edit') && (
                <form onSubmit={e => void (modal === 'create' ? handleCreate(e) : handleEdit(e))} className="space-y-4">
                  <Field label="Email" required>
                    <input type="email" required value={form.email} onChange={e => setForm({ ...form, email: e.target.value })}
                      className="w-full bg-surface border border-border rounded-lg px-3 py-2 text-sm text-foreground outline-none focus:border-accent/60 transition" />
                  </Field>
                  <Field label="Name">
                    <input type="text" value={form.name} onChange={e => setForm({ ...form, name: e.target.value })}
                      className="w-full bg-surface border border-border rounded-lg px-3 py-2 text-sm text-foreground outline-none focus:border-accent/60 transition" />
                  </Field>
                  <div>
                    <Field label="Role">
                      <select value={form.role} onChange={e => setForm({ ...form, role: e.target.value })}
                        className="w-full bg-surface border border-border rounded-lg px-3 py-2 text-sm text-foreground outline-none focus:border-accent/60 transition cursor-pointer">
                        <option value="client">Client</option>
                        <option value="admin">Admin</option>
                      </select>
                    </Field>
                  </div>
                  {/* Company Selection - Required for non-admin users */}
                  {form.role !== 'admin' && (
                    <Field label="Company" required={form.role !== 'admin'}>
                      <select 
                        value={form.companyId} 
                        onChange={e => setForm({ ...form, companyId: e.target.value })}
                        className="w-full bg-surface border border-border rounded-lg px-3 py-2 text-sm text-foreground outline-none focus:border-accent/60 transition cursor-pointer"
                        required={form.role !== 'admin'}
                      >
                        <option value="">Select a company...</option>
                        {companies.map(c => (
                          <option key={c.id} value={c.id}>{c.name}</option>
                        ))}
                      </select>
                      <p className="text-[10px] text-muted mt-1">Required for non-admin users</p>
                    </Field>
                  )}
                  <Field label={modal === 'edit' ? 'New Password (leave blank to keep)' : 'Password'}>
                    <input type="password" value={form.password} onChange={e => setForm({ ...form, password: e.target.value })}
                      className="w-full bg-surface border border-border rounded-lg px-3 py-2 text-sm text-foreground outline-none focus:border-accent/60 transition"
                      required={modal === 'create'} />
                  </Field>
                  {modal === 'create' && (
                    <Field label="Confirm Password" required>
                      <input type="password" value={form.confirmPassword} onChange={e => setForm({ ...form, confirmPassword: e.target.value })}
                        className="w-full bg-surface border border-border rounded-lg px-3 py-2 text-sm text-foreground outline-none focus:border-accent/60 transition"
                        required />
                    </Field>
                  )}
                  <label className="flex items-center gap-2.5 cursor-pointer">
                    <div className={`w-4 h-4 rounded border-2 flex items-center justify-center transition-colors ${
                      form.emailVerified ? 'bg-accent border-accent' : 'border-border'
                    }`} onClick={() => setForm({ ...form, emailVerified: !form.emailVerified })}>
                      {form.emailVerified && <CheckCircle2 className="w-3 h-3 text-white" />}
                    </div>
                    <span className="text-sm text-muted">Email Verified</span>
                  </label>
                  <div className="flex gap-3 pt-2">
                    <button type="button" onClick={() => setModal('none')}
                      className="flex-1 py-2.5 rounded-lg glass-light text-sm text-muted hover:text-foreground transition cursor-pointer">
                      Cancel
                    </button>
                    <button type="submit" disabled={saving}
                      className="flex-1 py-2.5 rounded-lg gradient-accent text-white text-sm font-semibold hover:opacity-90 transition cursor-pointer disabled:opacity-50">
                      {saving ? 'Saving…' : modal === 'create' ? 'Create User' : 'Save Changes'}
                    </button>
                  </div>
                </form>
              )}
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>

    </div>
  );
}

function Field({ label, required, children }: { label: string; required?: boolean; children: React.ReactNode }) {
  return (
    <div>
      <label className="block text-xs font-medium text-muted mb-1.5">
        {label}{required && <span className="text-red-400 ml-0.5">*</span>}
      </label>
      {children}
    </div>
  );
}