import { type FormEvent, useEffect, useState } from 'react';
import {
  BookOpen,
  Briefcase,
  Calendar,
  CheckCircle2,
  HelpCircle,
  Image as ImageIcon,
  Inbox,
  LayoutDashboard,
  Lock,
  LogOut,
  Palette,
  Plus,
  RefreshCw,
  Save,
  Settings,
  ShieldAlert,
  Sparkles,
  Trash2,
  Users,
} from 'lucide-react';
import {
  adminLoginApi,
  deleteAdminCareer,
  deleteAdminEvent,
  deleteAdminFaq,
  deleteAdminService,
  deleteAdminStory,
  deleteSubmission,
  fetchAdminCareers,
  fetchAdminEvents,
  fetchAdminFaqs,
  fetchAdminServices,
  fetchAdminSettings,
  fetchAdminStories,
  fetchAdminSubmissions,
  saveAdminCareer,
  saveAdminEvent,
  saveAdminFaq,
  saveAdminService,
  saveAdminStory,
  updateAdminSettings,
  updateSubmissionStatus,
} from '../api/client';
import { useSiteContent } from '../context/ContentContext';
import { Button } from '../components/ui/Button';

export function AdminPage() {
  const { reloadContent } = useSiteContent();
  const [token, setToken] = useState<string | null>(() => localStorage.getItem('embrace_admin_token'));
  const [adminUser, setAdminUser] = useState<any>(() => {
    const saved = localStorage.getItem('embrace_admin_user');
    return saved ? JSON.parse(saved) : null;
  });

  // Login Form
  const [username, setUsername] = useState('admin');
  const [password, setPassword] = useState('admin123');
  const [loginError, setLoginError] = useState('');
  const [loggingIn, setLoggingIn] = useState(false);

  // Active Tab State
  const [activeTab, setActiveTab] = useState<
    'dashboard' | 'hero_photos' | 'theme_settings' | 'page_titles' | 'settings' | 'services' | 'faqs' | 'events' | 'stories' | 'careers' | 'inbox'
  >('dashboard');

  // Loading & Feedback
  const [loadingData, setLoadingData] = useState(false);
  const [saveSuccess, setSaveSuccess] = useState('');

  // Content Datasets
  const [settings, setSettings] = useState<Record<string, string>>({});
  const [services, setServices] = useState<any[]>([]);
  const [faqs, setFaqs] = useState<any[]>([]);
  const [events, setEvents] = useState<any[]>([]);
  const [stories, setStories] = useState<any[]>([]);
  const [careers, setCareers] = useState<any[]>([]);
  const [submissions, setSubmissions] = useState<{ referrals: any[]; consultations: any[]; callbacks: any[] }>({
    referrals: [],
    consultations: [],
    callbacks: [],
  });

  // Modals / Item Editing State
  const [activeModal, setActiveModal] = useState<'service' | 'faq' | 'event' | 'story' | 'career' | null>(null);
  const [editItem, setEditItem] = useState<any | null>(null);

  useEffect(() => {
    if (token) {
      loadAdminData();
    }
  }, [token]);

  // Live Instant Theme Preview in Admin Panel
  useEffect(() => {
    if (settings.site_theme) {
      document.documentElement.setAttribute('data-theme', settings.site_theme);
    }
    if (settings.site_font_size) {
      document.documentElement.setAttribute('data-font-size', settings.site_font_size);
    }
    if (settings.site_high_contrast !== undefined) {
      document.documentElement.setAttribute('data-high-contrast', settings.site_high_contrast === 'true' ? 'true' : 'false');
    }
    if (settings.site_dyslexic_font !== undefined) {
      document.documentElement.setAttribute('data-dyslexic', settings.site_dyslexic_font === 'true' ? 'true' : 'false');
    }
  }, [settings.site_theme, settings.site_font_size, settings.site_high_contrast, settings.site_dyslexic_font]);

  async function loadAdminData() {
    if (!token) return;
    setLoadingData(true);
    try {
      const [
        settingsRes,
        servicesRes,
        faqsRes,
        eventsRes,
        storiesRes,
        careersRes,
        subsRes,
      ] = await Promise.all([
        fetchAdminSettings(token),
        fetchAdminServices(token),
        fetchAdminFaqs(token),
        fetchAdminEvents(token),
        fetchAdminStories(token),
        fetchAdminCareers(token),
        fetchAdminSubmissions(token),
      ]);

      if (settingsRes.settings) setSettings(settingsRes.settings);
      if (servicesRes.services) setServices(servicesRes.services);
      if (faqsRes.faqs) setFaqs(faqsRes.faqs);
      if (eventsRes.events) setEvents(eventsRes.events);
      if (storiesRes.stories) setStories(storiesRes.stories);
      if (careersRes.careers) setCareers(careersRes.careers);
      if (subsRes) {
        setSubmissions({
          referrals: subsRes.referrals || [],
          consultations: subsRes.consultations || [],
          callbacks: subsRes.callbacks || [],
        });
      }
    } catch (err: any) {
      console.error('Error loading admin CMS data:', err.message);
    } finally {
      setLoadingData(false);
    }
  }

  async function handleLogin(e: FormEvent) {
    e.preventDefault();
    setLoginError('');
    setLoggingIn(true);
    try {
      const res = await adminLoginApi({ username, password });
      setToken(res.token);
      setAdminUser(res.user);
      localStorage.setItem('embrace_admin_token', res.token);
      localStorage.setItem('embrace_admin_user', JSON.stringify(res.user));
    } catch (err: any) {
      setLoginError(err.message || 'Login failed. Check credentials.');
    } finally {
      setLoggingIn(false);
    }
  }

  function handleLogout() {
    setToken(null);
    setAdminUser(null);
    localStorage.removeItem('embrace_admin_token');
    localStorage.removeItem('embrace_admin_user');
  }

  async function handleSaveSettings(e: FormEvent) {
    e.preventDefault();
    if (!token) return;
    try {
      const res = await updateAdminSettings(token, settings);
      if (res.success) {
        setSaveSuccess('Website text, photos & settings saved successfully!');
        await reloadContent();
        setTimeout(() => setSaveSuccess(''), 3500);
      }
    } catch (err: any) {
      alert('Error updating settings: ' + err.message);
    }
  }

  // Generic Item Saver
  async function handleSaveModalItem(e: FormEvent) {
    e.preventDefault();
    if (!token || !activeModal || !editItem) return;

    try {
      if (activeModal === 'service') await saveAdminService(token, editItem, editItem.id);
      if (activeModal === 'faq') await saveAdminFaq(token, editItem, editItem.id);
      if (activeModal === 'event') await saveAdminEvent(token, editItem, editItem.id);
      if (activeModal === 'story') await saveAdminStory(token, editItem, editItem.id);
      if (activeModal === 'career') await saveAdminCareer(token, editItem, editItem.id);

      setActiveModal(null);
      setEditItem(null);
      loadAdminData();
      await reloadContent();
      setSaveSuccess('Item saved successfully!');
      setTimeout(() => setSaveSuccess(''), 3000);
    } catch (err: any) {
      alert('Error saving item: ' + err.message);
    }
  }

  // Delete Handlers
  async function handleDeleteItem(type: 'service' | 'faq' | 'event' | 'story' | 'career', id: number) {
    if (!token || !confirm('Are you sure you want to delete this content item?')) return;
    try {
      if (type === 'service') await deleteAdminService(token, id);
      if (type === 'faq') await deleteAdminFaq(token, id);
      if (type === 'event') await deleteAdminEvent(token, id);
      if (type === 'story') await deleteAdminStory(token, id);
      if (type === 'career') await deleteAdminCareer(token, id);
      loadAdminData();
      await reloadContent();
    } catch (err: any) {
      alert('Error deleting item: ' + err.message);
    }
  }

  async function handleUpdateStatus(type: 'referral' | 'consultation' | 'callback', id: number, status: string) {
    if (!token) return;
    try {
      await updateSubmissionStatus(token, type, id, status);
      loadAdminData();
    } catch (err: any) {
      alert('Error updating status: ' + err.message);
    }
  }

  async function handleDeleteSubItem(type: 'referral' | 'consultation' | 'callback', id: number) {
    if (!token || !confirm('Delete submission entry?')) return;
    try {
      await deleteSubmission(token, type, id);
      loadAdminData();
    } catch (err: any) {
      alert('Error deleting submission: ' + err.message);
    }
  }

  // LOGIN SCREEN
  if (!token) {
    return (
      <section className="min-h-[80vh] flex items-center justify-center px-4 py-16 bg-[var(--color-bg-alt)]">
        <div className="w-full max-w-md rounded-3xl border border-theme bg-[var(--color-surface)] p-8 shadow-2xl space-y-6">
          <div className="text-center space-y-2">
            <div className="inline-flex h-14 w-14 items-center justify-center rounded-2xl bg-primary/10 text-primary mb-2">
              <Lock className="h-7 w-7" />
            </div>
            <h1 className="text-2xl font-bold text-[var(--color-text)]">Admin Portal</h1>
            <p className="text-xs text-muted">Sign in to control all website text, photos, services, and inbox.</p>
          </div>

          {loginError && (
            <div className="rounded-2xl bg-red-500/10 border border-red-500/20 p-3.5 text-xs text-red-600 font-semibold flex items-center gap-2">
              <ShieldAlert className="h-4 w-4 shrink-0" />
              <span>{loginError}</span>
            </div>
          )}

          <form onSubmit={handleLogin} className="space-y-4">
            <div>
              <label className="block text-xs font-bold uppercase tracking-wider text-[var(--color-text)] mb-1">
                Username
              </label>
              <input
                type="text"
                required
                value={username}
                onChange={(e) => setUsername(e.target.value)}
                className="w-full rounded-xl border border-theme bg-[var(--color-bg)] px-3.5 py-2.5 text-xs text-[var(--color-text)] outline-none focus:border-primary"
              />
            </div>

            <div>
              <label className="block text-xs font-bold uppercase tracking-wider text-[var(--color-text)] mb-1">
                Password
              </label>
              <input
                type="password"
                required
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                className="w-full rounded-xl border border-theme bg-[var(--color-bg)] px-3.5 py-2.5 text-xs text-[var(--color-text)] outline-none focus:border-primary"
              />
            </div>

            <Button type="submit" disabled={loggingIn} className="w-full justify-center">
              {loggingIn ? 'Authenticating...' : 'Sign In To Control Panel'}
            </Button>
          </form>

          <div className="border-t border-theme pt-4 text-center text-[11px] text-muted space-y-1">
            <p>Default Credentials: <strong>admin</strong> / <strong>admin123</strong></p>
          </div>
        </div>
      </section>
    );
  }

  const totalSubmissions =
    submissions.referrals.length + submissions.consultations.length + submissions.callbacks.length;

  return (
    <div className="min-h-screen bg-[var(--color-bg)] pb-24">
      {/* Top Admin Header */}
      <header className="border-b border-theme bg-[var(--color-surface)] px-4 py-4 sticky top-0 z-30 shadow-sm">
        <div className="mx-auto flex max-w-7xl items-center justify-between gap-4">
          <div className="flex items-center gap-3">
            <span className="flex h-10 w-10 items-center justify-center rounded-xl bg-primary text-white font-bold text-sm">
              E
            </span>
            <div>
              <h1 className="font-bold text-base text-[var(--color-text)] flex items-center gap-2">
                Embrace Content Control Panel
                <span className="rounded-full bg-green-500/10 text-green-600 border border-green-500/20 px-2.5 py-0.5 text-[10px] font-bold uppercase">
                  Connected
                </span>
              </h1>
              <p className="text-[11px] text-muted">Admin User: {adminUser?.username || 'admin'}</p>
            </div>
          </div>

          <div className="flex items-center gap-2">
            <Button onClick={loadAdminData} variant="outline" className="!px-3 !py-1.5 text-xs gap-1.5 hidden sm:inline-flex">
              <RefreshCw className={`h-3.5 w-3.5 ${loadingData ? 'animate-spin' : ''}`} /> Refresh Data
            </Button>
            <Button onClick={handleLogout} variant="outline" className="!px-3 !py-1.5 text-xs gap-1.5">
              <LogOut className="h-3.5 w-3.5 text-red-500" /> Logout
            </Button>
          </div>
        </div>
      </header>

      {/* Main Admin Workspace */}
      <div className="mx-auto max-w-7xl px-4 py-8 space-y-6">
        {saveSuccess && (
          <div className="rounded-2xl bg-green-500/10 border border-green-500/20 p-4 text-xs font-semibold text-green-600 flex items-center gap-2">
            <CheckCircle2 className="h-4 w-4" /> {saveSuccess}
          </div>
        )}

        {/* Navigation Tabs */}
        <div className="flex flex-wrap gap-2 border-b border-theme pb-4">
          {[
            { id: 'dashboard', label: 'Dashboard', icon: LayoutDashboard },
            { id: 'hero_photos', label: 'Hero & Photos', icon: ImageIcon },
            { id: 'theme_settings', label: 'Theme & Branding', icon: Palette },
            { id: 'page_titles', label: 'Page Titles', icon: BookOpen },
            { id: 'settings', label: 'Site & Contact Info', icon: Settings },
            { id: 'services', label: `Services (${services.length})`, icon: Sparkles },
            { id: 'faqs', label: `FAQs (${faqs.length})`, icon: HelpCircle },
            { id: 'events', label: `Events (${events.length})`, icon: Calendar },
            { id: 'stories', label: `Stories (${stories.length})`, icon: Users },
            { id: 'careers', label: `Careers (${careers.length})`, icon: Briefcase },
            { id: 'inbox', label: `Submissions (${totalSubmissions})`, icon: Inbox },
          ].map((tab) => {
            const Icon = tab.icon;
            const isActive = activeTab === tab.id;
            return (
              <button
                key={tab.id}
                type="button"
                onClick={() => setActiveTab(tab.id as any)}
                className={`flex items-center gap-2 rounded-2xl px-3.5 py-2 text-xs font-bold transition-all ${
                  isActive
                    ? 'bg-primary text-white shadow-md'
                    : 'bg-surface border border-theme text-muted hover:border-primary'
                }`}
              >
                <Icon className="h-4 w-4" /> {tab.label}
              </button>
            );
          })}
        </div>

        {/* TAB 1: DASHBOARD */}
        {activeTab === 'dashboard' && (
          <div className="space-y-8">
            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
              <div className="rounded-3xl border border-theme bg-surface p-6 shadow-sm space-y-2">
                <span className="text-xs font-bold text-muted uppercase">Active NDIS Services</span>
                <p className="text-3xl font-bold text-[var(--color-text)]">{services.length}</p>
                <button onClick={() => setActiveTab('services')} className="text-xs text-primary font-bold hover:underline">
                  Manage Services →
                </button>
              </div>

              <div className="rounded-3xl border border-theme bg-surface p-6 shadow-sm space-y-2">
                <span className="text-xs font-bold text-muted uppercase">Community Events</span>
                <p className="text-3xl font-bold text-[var(--color-text)]">{events.length}</p>
                <button onClick={() => setActiveTab('events')} className="text-xs text-primary font-bold hover:underline">
                  Manage Events →
                </button>
              </div>

              <div className="rounded-3xl border border-theme bg-surface p-6 shadow-sm space-y-2">
                <span className="text-xs font-bold text-muted uppercase">Participant Stories</span>
                <p className="text-3xl font-bold text-[var(--color-text)]">{stories.length}</p>
                <button onClick={() => setActiveTab('stories')} className="text-xs text-primary font-bold hover:underline">
                  Manage Stories →
                </button>
              </div>

              <div className="rounded-3xl border border-theme bg-surface p-6 shadow-sm space-y-2">
                <span className="text-xs font-bold text-muted uppercase">Submissions Inbox</span>
                <p className="text-3xl font-bold text-[var(--color-text)]">{totalSubmissions}</p>
                <button onClick={() => setActiveTab('inbox')} className="text-xs text-primary font-bold hover:underline">
                  Open Inbox →
                </button>
              </div>
            </div>

            <div className="rounded-3xl border border-theme bg-[var(--color-bg-alt)] p-6 space-y-4">
              <h2 className="text-lg font-bold text-[var(--color-text)]">CMS Rapid Management</h2>
              <div className="flex flex-wrap gap-3">
                <Button onClick={() => setActiveTab('hero_photos')} variant="outline" className="text-xs">
                  Change Hero Photo & Banner Headlines
                </Button>
                <Button onClick={() => setActiveTab('page_titles')} variant="outline" className="text-xs">
                  Edit All Page Subtitles
                </Button>
                <Button onClick={() => setActiveTab('settings')} variant="outline" className="text-xs">
                  Update Office Hours & Phone
                </Button>
              </div>
            </div>
          </div>
        )}

        {/* TAB 2: HERO & PHOTO BANNERS */}
        {activeTab === 'hero_photos' && (
          <form onSubmit={handleSaveSettings} className="rounded-3xl border border-theme bg-surface p-6 md:p-8 shadow-xl space-y-6">
            <div className="flex items-center justify-between border-b border-theme pb-4">
              <div>
                <h2 className="text-xl font-bold text-[var(--color-text)]">Hero Section, Photos & Statistics</h2>
                <p className="text-xs text-muted">Change main banner text, CTA buttons, hero photo URL, and statistics counters.</p>
              </div>
              <Button type="submit" className="gap-1.5 text-xs">
                <Save className="h-4 w-4" /> Save Hero & Photos
              </Button>
            </div>

            <div className="grid gap-6 md:grid-cols-2">
              <div className="space-y-4">
                <div>
                  <label className="block text-xs font-bold uppercase tracking-wider text-[var(--color-text)] mb-1">
                    Hero Headline
                  </label>
                  <input
                    type="text"
                    value={settings.hero_headline || ''}
                    onChange={(e) => setSettings({ ...settings, hero_headline: e.target.value })}
                    className="w-full rounded-xl border border-theme bg-[var(--color-bg)] px-3.5 py-2.5 text-xs text-[var(--color-text)] outline-none focus:border-primary"
                  />
                </div>

                <div>
                  <label className="block text-xs font-bold uppercase tracking-wider text-[var(--color-text)] mb-1">
                    Hero Subtitle Statement
                  </label>
                  <textarea
                    rows={3}
                    value={settings.hero_subtitle || ''}
                    onChange={(e) => setSettings({ ...settings, hero_subtitle: e.target.value })}
                    className="w-full rounded-xl border border-theme bg-[var(--color-bg)] px-3.5 py-2.5 text-xs text-[var(--color-text)] outline-none focus:border-primary"
                  />
                </div>

                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className="block text-xs font-bold uppercase tracking-wider text-[var(--color-text)] mb-1">
                      Primary CTA Text
                    </label>
                    <input
                      type="text"
                      value={settings.hero_cta_primary || ''}
                      onChange={(e) => setSettings({ ...settings, hero_cta_primary: e.target.value })}
                      className="w-full rounded-xl border border-theme bg-[var(--color-bg)] px-3.5 py-2.5 text-xs text-[var(--color-text)] outline-none focus:border-primary"
                    />
                  </div>

                  <div>
                    <label className="block text-xs font-bold uppercase tracking-wider text-[var(--color-text)] mb-1">
                      Secondary CTA Text
                    </label>
                    <input
                      type="text"
                      value={settings.hero_cta_secondary || ''}
                      onChange={(e) => setSettings({ ...settings, hero_cta_secondary: e.target.value })}
                      className="w-full rounded-xl border border-theme bg-[var(--color-bg)] px-3.5 py-2.5 text-xs text-[var(--color-text)] outline-none focus:border-primary"
                    />
                  </div>
                </div>
              </div>

              {/* Photo Preview & URL */}
              <div className="space-y-4">
                <div>
                  <label className="block text-xs font-bold uppercase tracking-wider text-[var(--color-text)] mb-1">
                    Main Hero Photo URL
                  </label>
                  <input
                    type="text"
                    value={settings.hero_image_url || ''}
                    onChange={(e) => setSettings({ ...settings, hero_image_url: e.target.value })}
                    className="w-full rounded-xl border border-theme bg-[var(--color-bg)] px-3.5 py-2.5 text-xs text-[var(--color-text)] outline-none focus:border-primary"
                  />
                </div>

                <div className="rounded-2xl border border-theme p-2 bg-[var(--color-bg)] text-center space-y-1">
                  <p className="text-[11px] font-bold text-muted">Hero Photo Live Preview</p>
                  <img
                    src={settings.hero_image_url || 'https://images.unsplash.com/photo-1576765608535-5f04d1e3f289?w=1200&q=80'}
                    alt="Hero Preview"
                    className="h-44 w-full object-cover rounded-xl"
                  />
                </div>
              </div>
            </div>

            {/* Statistics Counters */}
            <div className="pt-6 border-t border-theme space-y-4">
              <h3 className="text-base font-bold text-[var(--color-text)]">Hero Statistics Counters</h3>
              <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                {[1, 2, 3, 4].map((num) => (
                  <div key={num} className="rounded-2xl border border-theme p-4 bg-[var(--color-bg)] space-y-2">
                    <span className="text-[10px] font-bold uppercase text-primary">Stat #{num}</span>
                    <input
                      type="text"
                      placeholder="Value (e.g. 500+)"
                      value={settings[`stat_${num}_val`] || ''}
                      onChange={(e) => setSettings({ ...settings, [`stat_${num}_val`]: e.target.value })}
                      className="w-full rounded-lg border border-theme bg-surface px-2.5 py-1.5 text-xs font-bold text-[var(--color-text)]"
                    />
                    <input
                      type="text"
                      placeholder="Label (e.g. Participants)"
                      value={settings[`stat_${num}_label`] || ''}
                      onChange={(e) => setSettings({ ...settings, [`stat_${num}_label`]: e.target.value })}
                      className="w-full rounded-lg border border-theme bg-surface px-2.5 py-1.5 text-xs text-muted"
                    />
                  </div>
                ))}
              </div>
            </div>

            <div className="flex justify-end pt-4 border-t border-theme">
              <Button type="submit" className="gap-1.5 text-xs">
                <Save className="h-4 w-4" /> Save Hero & Photos
              </Button>
            </div>
          </form>
        )}

        {/* TAB: THEME & BRANDING SETTINGS */}
        {activeTab === 'theme_settings' && (
          <form onSubmit={handleSaveSettings} className="rounded-3xl border border-theme bg-surface p-6 md:p-8 shadow-xl space-y-6">
            <div className="flex items-center justify-between border-b border-theme pb-4">
              <div>
                <h2 className="text-xl font-bold text-[var(--color-text)]">Global Site Theme & Accessibility Controls</h2>
                <p className="text-xs text-muted">Select the official site theme, text scaling, contrast, and accessibility settings. Changes save to MySQL and apply live across the entire website.</p>
              </div>
              <Button type="submit" className="gap-1.5 text-xs">
                <Save className="h-4 w-4" /> Save Theme Settings
              </Button>
            </div>

            <div className="space-y-6">
              {/* 1. Theme Presets */}
              <div>
                <label className="block text-xs font-bold uppercase tracking-wider text-primary mb-2">
                  Official Site Color Theme
                </label>
                <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
                  {[
                    { id: 'embrace', label: 'Embrace (Default)', primary: '#5b21b6', bg: '#faf8ff' },
                    { id: 'light', label: 'Clean Light', primary: '#2563eb', bg: '#f8fafc' },
                    { id: 'dark', label: 'Midnight Dark', primary: '#a78bfa', bg: '#0f0f14' },
                    { id: 'ocean', label: 'Teal Ocean', primary: '#0d9488', bg: '#f0fdfa' },
                  ].map((item) => {
                    const isSelected = (settings.site_theme || 'embrace') === item.id;
                    return (
                      <button
                        key={item.id}
                        type="button"
                        onClick={() => setSettings({ ...settings, site_theme: item.id })}
                        className={`flex flex-col justify-between rounded-2xl border p-4 text-left transition-all cursor-pointer ${
                          isSelected
                            ? 'border-primary bg-primary/10 ring-2 ring-primary/20 shadow-md'
                            : 'border-theme bg-[var(--color-bg)] hover:border-primary/50'
                        }`}
                      >
                        <span className="text-xs font-bold text-[var(--color-text)] mb-2 block">{item.label}</span>
                        <div className="flex items-center gap-2">
                          <span className="h-4 w-4 rounded-full border border-black/10 shadow-xs" style={{ backgroundColor: item.primary }} />
                          <span className="h-4 w-4 rounded-full border border-black/10 shadow-xs" style={{ backgroundColor: item.bg }} />
                        </div>
                      </button>
                    );
                  })}
                </div>
              </div>

              {/* 2. Default Font Size */}
              <div className="pt-4 border-t border-theme">
                <label className="block text-xs font-bold uppercase tracking-wider text-primary mb-2">
                  Default Font Scaling Size
                </label>
                <div className="grid grid-cols-3 gap-3">
                  {[
                    { id: 'normal', label: 'Standard Font Size (A)' },
                    { id: 'large', label: 'Large Font Size (A+)' },
                    { id: 'xlarge', label: 'Extra Large Font Size (A++)' },
                  ].map((item) => {
                    const isSelected = (settings.site_font_size || 'normal') === item.id;
                    return (
                      <button
                        key={item.id}
                        type="button"
                        onClick={() => setSettings({ ...settings, site_font_size: item.id })}
                        className={`rounded-2xl border p-3 text-xs font-bold transition-all cursor-pointer ${
                          isSelected
                            ? 'border-primary bg-primary text-white shadow-md'
                            : 'border-theme bg-[var(--color-bg)] text-muted hover:border-primary'
                        }`}
                      >
                        {item.label}
                      </button>
                    );
                  })}
                </div>
              </div>

              {/* 3. Accessibility Defaults */}
              <div className="pt-4 border-t border-theme grid md:grid-cols-2 gap-4">
                <div className="rounded-2xl border border-theme bg-[var(--color-bg)] p-4 flex items-center justify-between cursor-pointer"
                  onClick={() =>
                    setSettings({
                      ...settings,
                      site_high_contrast: settings.site_high_contrast === 'true' ? 'false' : 'true',
                    })
                  }
                >
                  <div>
                    <strong className="block text-xs font-bold text-[var(--color-text)]">Default High Contrast Mode</strong>
                    <span className="text-[11px] text-muted font-normal">Forces high-contrast text and outlines site-wide</span>
                  </div>
                  <button
                    type="button"
                    role="switch"
                    aria-checked={settings.site_high_contrast === 'true'}
                    onClick={() =>
                      setSettings({
                        ...settings,
                        site_high_contrast: settings.site_high_contrast === 'true' ? 'false' : 'true',
                      })
                    }
                    className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ${
                      settings.site_high_contrast === 'true' ? 'bg-primary' : 'bg-muted/40'
                    }`}
                  >
                    <span
                      className={`inline-block h-5 w-5 transform rounded-full bg-white transition duration-200 ${
                        settings.site_high_contrast === 'true' ? 'translate-x-5' : 'translate-x-0'
                      }`}
                    />
                  </button>
                </div>

                <div className="rounded-2xl border border-theme bg-[var(--color-bg)] p-4 flex items-center justify-between cursor-pointer"
                  onClick={() =>
                    setSettings({
                      ...settings,
                      site_dyslexic_font: settings.site_dyslexic_font === 'true' ? 'false' : 'true',
                    })
                  }
                >
                  <div>
                    <strong className="block text-xs font-bold text-[var(--color-text)]">Default Dyslexic Friendly Font</strong>
                    <span className="text-[11px] text-muted font-normal">Enforces OpenDyslexic typography for all visitors</span>
                  </div>
                  <button
                    type="button"
                    role="switch"
                    aria-checked={settings.site_dyslexic_font === 'true'}
                    onClick={() =>
                      setSettings({
                        ...settings,
                        site_dyslexic_font: settings.site_dyslexic_font === 'true' ? 'false' : 'true',
                      })
                    }
                    className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ${
                      settings.site_dyslexic_font === 'true' ? 'bg-primary' : 'bg-muted/40'
                    }`}
                  >
                    <span
                      className={`inline-block h-5 w-5 transform rounded-full bg-white transition duration-200 ${
                        settings.site_dyslexic_font === 'true' ? 'translate-x-5' : 'translate-x-0'
                      }`}
                    />
                  </button>
                </div>
              </div>
            </div>

            <div className="flex justify-end pt-4 border-t border-theme">
              <Button type="submit" className="gap-1.5 text-xs">
                <Save className="h-4 w-4" /> Save Theme Settings
              </Button>
            </div>
          </form>
        )}

        {/* TAB 3: PAGE TITLES & HEADINGS */}
        {activeTab === 'page_titles' && (
          <form onSubmit={handleSaveSettings} className="rounded-3xl border border-theme bg-surface p-6 md:p-8 shadow-xl space-y-6">
            <div className="flex items-center justify-between border-b border-theme pb-4">
              <div>
                <h2 className="text-xl font-bold text-[var(--color-text)]">Page Banner Headings & Subtitles</h2>
                <p className="text-xs text-muted">Customize hero banner titles and descriptions across all pages.</p>
              </div>
              <Button type="submit" className="gap-1.5 text-xs">
                <Save className="h-4 w-4" /> Save Page Titles
              </Button>
            </div>

            <div className="grid gap-6 md:grid-cols-2">
              <div className="rounded-2xl border border-theme p-4 space-y-3 bg-[var(--color-bg)]">
                <h3 className="font-bold text-sm text-primary">Services Page</h3>
                <input
                  type="text"
                  placeholder="Title"
                  value={settings.page_hero_services_title || ''}
                  onChange={(e) => setSettings({ ...settings, page_hero_services_title: e.target.value })}
                  className="w-full rounded-xl border border-theme bg-surface px-3 py-2 text-xs font-bold text-[var(--color-text)]"
                />
                <textarea
                  rows={2}
                  placeholder="Subtitle"
                  value={settings.page_hero_services_sub || ''}
                  onChange={(e) => setSettings({ ...settings, page_hero_services_sub: e.target.value })}
                  className="w-full rounded-xl border border-theme bg-surface px-3 py-2 text-xs text-muted"
                />
              </div>

              <div className="rounded-2xl border border-theme p-4 space-y-3 bg-[var(--color-bg)]">
                <h3 className="font-bold text-sm text-primary">NDIS Hub Page</h3>
                <input
                  type="text"
                  placeholder="Title"
                  value={settings.page_hero_ndis_hub_title || ''}
                  onChange={(e) => setSettings({ ...settings, page_hero_ndis_hub_title: e.target.value })}
                  className="w-full rounded-xl border border-theme bg-surface px-3 py-2 text-xs font-bold text-[var(--color-text)]"
                />
                <textarea
                  rows={2}
                  placeholder="Subtitle"
                  value={settings.page_hero_ndis_hub_sub || ''}
                  onChange={(e) => setSettings({ ...settings, page_hero_ndis_hub_sub: e.target.value })}
                  className="w-full rounded-xl border border-theme bg-surface px-3 py-2 text-xs text-muted"
                />
              </div>

              <div className="rounded-2xl border border-theme p-4 space-y-3 bg-[var(--color-bg)]">
                <h3 className="font-bold text-sm text-primary">Events Page</h3>
                <input
                  type="text"
                  placeholder="Title"
                  value={settings.page_hero_events_title || ''}
                  onChange={(e) => setSettings({ ...settings, page_hero_events_title: e.target.value })}
                  className="w-full rounded-xl border border-theme bg-surface px-3 py-2 text-xs font-bold text-[var(--color-text)]"
                />
                <textarea
                  rows={2}
                  placeholder="Subtitle"
                  value={settings.page_hero_events_sub || ''}
                  onChange={(e) => setSettings({ ...settings, page_hero_events_sub: e.target.value })}
                  className="w-full rounded-xl border border-theme bg-surface px-3 py-2 text-xs text-muted"
                />
              </div>

              <div className="rounded-2xl border border-theme p-4 space-y-3 bg-[var(--color-bg)]">
                <h3 className="font-bold text-sm text-primary">Careers Page</h3>
                <input
                  type="text"
                  placeholder="Title"
                  value={settings.page_hero_career_title || ''}
                  onChange={(e) => setSettings({ ...settings, page_hero_career_title: e.target.value })}
                  className="w-full rounded-xl border border-theme bg-surface px-3 py-2 text-xs font-bold text-[var(--color-text)]"
                />
                <textarea
                  rows={2}
                  placeholder="Subtitle"
                  value={settings.page_hero_career_sub || ''}
                  onChange={(e) => setSettings({ ...settings, page_hero_career_sub: e.target.value })}
                  className="w-full rounded-xl border border-theme bg-surface px-3 py-2 text-xs text-muted"
                />
              </div>
            </div>

            <div className="flex justify-end pt-4 border-t border-theme">
              <Button type="submit" className="gap-1.5 text-xs">
                <Save className="h-4 w-4" /> Save Page Titles
              </Button>
            </div>
          </form>
        )}

        {/* TAB 4: SITE & CONTACT INFO */}
        {activeTab === 'settings' && (
          <form onSubmit={handleSaveSettings} className="rounded-3xl border border-theme bg-surface p-6 md:p-8 shadow-xl space-y-6">
            <div className="flex items-center justify-between border-b border-theme pb-4">
              <div>
                <h2 className="text-xl font-bold text-[var(--color-text)]">Site Identity & Contact Information</h2>
                <p className="text-xs text-muted">Update values displayed across header, footer, contact page, and hotlines.</p>
              </div>
              <Button type="submit" className="gap-1.5 text-xs">
                <Save className="h-4 w-4" /> Save Contact Info
              </Button>
            </div>

            <div className="grid gap-6 sm:grid-cols-2">
              <div>
                <label className="block text-xs font-bold uppercase tracking-wider text-[var(--color-text)] mb-1">
                  Site Name
                </label>
                <input
                  type="text"
                  value={settings.site_name || ''}
                  onChange={(e) => setSettings({ ...settings, site_name: e.target.value })}
                  className="w-full rounded-xl border border-theme bg-[var(--color-bg)] px-3.5 py-2.5 text-xs text-[var(--color-text)] outline-none focus:border-primary"
                />
              </div>

              <div>
                <label className="block text-xs font-bold uppercase tracking-wider text-[var(--color-text)] mb-1">
                  NDIS Provider Registration ID
                </label>
                <input
                  type="text"
                  value={settings.provider_number || ''}
                  onChange={(e) => setSettings({ ...settings, provider_number: e.target.value })}
                  className="w-full rounded-xl border border-theme bg-[var(--color-bg)] px-3.5 py-2.5 text-xs text-[var(--color-text)] outline-none focus:border-primary"
                />
              </div>

              <div>
                <label className="block text-xs font-bold uppercase tracking-wider text-[var(--color-text)] mb-1">
                  Primary Phone Number
                </label>
                <input
                  type="text"
                  value={settings.phone || ''}
                  onChange={(e) => setSettings({ ...settings, phone: e.target.value })}
                  className="w-full rounded-xl border border-theme bg-[var(--color-bg)] px-3.5 py-2.5 text-xs text-[var(--color-text)] outline-none focus:border-primary"
                />
              </div>

              <div>
                <label className="block text-xs font-bold uppercase tracking-wider text-[var(--color-text)] mb-1">
                  24/7 Emergency Helpline
                </label>
                <input
                  type="text"
                  value={settings.emergency_number || ''}
                  onChange={(e) => setSettings({ ...settings, emergency_number: e.target.value })}
                  className="w-full rounded-xl border border-theme bg-[var(--color-bg)] px-3.5 py-2.5 text-xs text-[var(--color-text)] outline-none focus:border-primary"
                />
              </div>

              <div>
                <label className="block text-xs font-bold uppercase tracking-wider text-[var(--color-text)] mb-1">
                  Primary Contact Email
                </label>
                <input
                  type="email"
                  value={settings.email || ''}
                  onChange={(e) => setSettings({ ...settings, email: e.target.value })}
                  className="w-full rounded-xl border border-theme bg-[var(--color-bg)] px-3.5 py-2.5 text-xs text-[var(--color-text)] outline-none focus:border-primary"
                />
              </div>

              <div>
                <label className="block text-xs font-bold uppercase tracking-wider text-[var(--color-text)] mb-1">
                  Office Address
                </label>
                <input
                  type="text"
                  value={settings.address || ''}
                  onChange={(e) => setSettings({ ...settings, address: e.target.value })}
                  className="w-full rounded-xl border border-theme bg-[var(--color-bg)] px-3.5 py-2.5 text-xs text-[var(--color-text)] outline-none focus:border-primary"
                />
              </div>
            </div>

            <div className="flex justify-end pt-4 border-t border-theme">
              <Button type="submit" className="gap-1.5 text-xs">
                <Save className="h-4 w-4" /> Save Contact Info
              </Button>
            </div>
          </form>
        )}

        {/* TAB 5: SERVICES MANAGER */}
        {activeTab === 'services' && (
          <div className="space-y-6">
            <div className="flex items-center justify-between border-b border-theme pb-4">
              <div>
                <h2 className="text-xl font-bold text-[var(--color-text)]">NDIS Services Manager</h2>
                <p className="text-xs text-muted">Create, edit, or delete service items, photos, and NDIS line codes.</p>
              </div>
              <Button
                onClick={() => {
                  setEditItem({
                    title: '',
                    short_title: '',
                    category: 'core',
                    category_label: 'Core Support',
                    description: '',
                    ndis_item_code: '',
                    icon: 'heart',
                    image_url: 'https://images.unsplash.com/photo-1576765608535-5f04d1e3f289?w=800&q=80',
                    highlights: ['Tailored support goal'],
                  });
                  setActiveModal('service');
                }}
                className="gap-1.5 text-xs"
              >
                <Plus className="h-4 w-4" /> Add New Service
              </Button>
            </div>

            <div className="grid gap-4">
              {services.map((service) => (
                <div
                  key={service.id}
                  className="rounded-3xl border border-theme bg-surface p-6 shadow-sm flex flex-col md:flex-row md:items-center justify-between gap-4"
                >
                  <div className="flex items-start gap-4">
                    <img
                      src={service.image_url || 'https://images.unsplash.com/photo-1576765608535-5f04d1e3f289?w=800&q=80'}
                      alt={service.title}
                      className="h-16 w-20 object-cover rounded-xl border border-theme shrink-0"
                    />
                    <div className="space-y-1">
                      <div className="flex items-center gap-2">
                        <span className="rounded-full bg-primary/10 px-2.5 py-0.5 text-[10px] font-bold text-primary uppercase">
                          {service.category_label}
                        </span>
                        {service.ndis_item_code && (
                          <span className="text-[10px] font-mono text-muted">Code: {service.ndis_item_code}</span>
                        )}
                      </div>
                      <h3 className="font-bold text-base text-[var(--color-text)]">{service.title}</h3>
                      <p className="text-xs text-muted line-clamp-2 max-w-xl">{service.description}</p>
                    </div>
                  </div>

                  <div className="flex items-center gap-2 shrink-0">
                    <Button
                      onClick={() => {
                        setEditItem(service);
                        setActiveModal('service');
                      }}
                      variant="outline"
                      className="!px-3 !py-1.5 text-xs"
                    >
                      Edit Service
                    </Button>
                    <Button
                      onClick={() => handleDeleteItem('service', service.id)}
                      variant="outline"
                      className="!px-3 !py-1.5 text-xs text-red-500 border-red-500/30 hover:bg-red-500/10"
                    >
                      <Trash2 className="h-3.5 w-3.5" />
                    </Button>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* TAB 6: FAQS MANAGER */}
        {activeTab === 'faqs' && (
          <div className="space-y-6">
            <div className="flex items-center justify-between border-b border-theme pb-4">
              <div>
                <h2 className="text-xl font-bold text-[var(--color-text)]">Frequently Asked Questions Manager</h2>
                <p className="text-xs text-muted">Add, update, or remove question and answer entries.</p>
              </div>
              <Button
                onClick={() => {
                  setEditItem({
                    category_id: 'general',
                    category_name: 'General & NDIS Basics',
                    question: '',
                    answer: '',
                  });
                  setActiveModal('faq');
                }}
                className="gap-1.5 text-xs"
              >
                <Plus className="h-4 w-4" /> Add FAQ Entry
              </Button>
            </div>

            <div className="space-y-3">
              {faqs.map((faq) => (
                <div key={faq.id} className="rounded-2xl border border-theme bg-surface p-4 shadow-sm flex items-center justify-between gap-4">
                  <div>
                    <span className="text-[10px] font-bold text-primary uppercase">{faq.category_name}</span>
                    <h3 className="font-bold text-sm text-[var(--color-text)]">{faq.question}</h3>
                    <p className="text-xs text-muted line-clamp-1">{faq.answer}</p>
                  </div>

                  <div className="flex items-center gap-2 shrink-0">
                    <Button
                      onClick={() => {
                        setEditItem(faq);
                        setActiveModal('faq');
                      }}
                      variant="outline"
                      className="!px-3 !py-1 text-xs"
                    >
                      Edit
                    </Button>
                    <Button
                      onClick={() => handleDeleteItem('faq', faq.id)}
                      variant="outline"
                      className="!px-3 !py-1 text-xs text-red-500 border-red-500/30"
                    >
                      <Trash2 className="h-3.5 w-3.5" />
                    </Button>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* TAB 7: EVENTS MANAGER */}
        {activeTab === 'events' && (
          <div className="space-y-6">
            <div className="flex items-center justify-between border-b border-theme pb-4">
              <div>
                <h2 className="text-xl font-bold text-[var(--color-text)]">Events & Workshops Manager</h2>
                <p className="text-xs text-muted">Manage community events, dates, locations, and photos.</p>
              </div>
              <Button
                onClick={() => {
                  setEditItem({
                    title: '',
                    date_str: '15 Oct 2026',
                    time_str: '10:00 AM – 12:00 PM',
                    location: 'Melbourne CBD',
                    category: 'Workshop',
                    summary: '',
                    seats_left: 10,
                    image_url: 'https://images.unsplash.com/photo-1577962917302-cd874c4e31d2?w=800&q=80',
                  });
                  setActiveModal('event');
                }}
                className="gap-1.5 text-xs"
              >
                <Plus className="h-4 w-4" /> Add New Event
              </Button>
            </div>

            <div className="grid gap-4 sm:grid-cols-2">
              {events.map((ev) => (
                <div key={ev.id} className="rounded-3xl border border-theme bg-surface overflow-hidden shadow-sm flex flex-col justify-between">
                  <img src={ev.image_url || ev.image} alt={ev.title} className="h-36 w-full object-cover" />
                  <div className="p-5 space-y-2">
                    <span className="text-[10px] font-bold text-primary uppercase">{ev.category} · {ev.seats_left || ev.seatsLeft} Seats Left</span>
                    <h3 className="font-bold text-base text-[var(--color-text)]">{ev.title}</h3>
                    <p className="text-xs text-muted">{ev.date_str || ev.date} at {ev.location || ev.location}</p>
                    <p className="text-xs text-muted line-clamp-2">{ev.summary}</p>
                  </div>

                  <div className="p-4 border-t border-theme flex justify-end gap-2 bg-[var(--color-bg)]">
                    <Button
                      onClick={() => {
                        setEditItem({ ...ev, date_str: ev.date_str || ev.date, time_str: ev.time_str || ev.time, image_url: ev.image_url || ev.image });
                        setActiveModal('event');
                      }}
                      variant="outline"
                      className="!px-3 !py-1 text-xs"
                    >
                      Edit Event
                    </Button>
                    <Button
                      onClick={() => handleDeleteItem('event', ev.id)}
                      variant="outline"
                      className="!px-3 !py-1 text-xs text-red-500 border-red-500/30"
                    >
                      Delete
                    </Button>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* TAB 8: PARTICIPANT STORIES MANAGER */}
        {activeTab === 'stories' && (
          <div className="space-y-6">
            <div className="flex items-center justify-between border-b border-theme pb-4">
              <div>
                <h2 className="text-xl font-bold text-[var(--color-text)]">Participant Stories & Photos Manager</h2>
                <p className="text-xs text-muted">Manage participant testimonials, avatar photos, quotes, and full stories.</p>
              </div>
              <Button
                onClick={() => {
                  setEditItem({
                    name: '',
                    age: 30,
                    role: 'NDIS Participant',
                    location: 'Melbourne, VIC',
                    service_used: 'Community Support',
                    avatar_url: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=300&q=80',
                    quote: '',
                    full_story: '',
                  });
                  setActiveModal('story');
                }}
                className="gap-1.5 text-xs"
              >
                <Plus className="h-4 w-4" /> Add Story
              </Button>
            </div>

            <div className="grid gap-4 sm:grid-cols-3">
              {stories.map((st) => (
                <div key={st.id} className="rounded-3xl border border-theme bg-surface p-5 shadow-sm space-y-3 flex flex-col justify-between">
                  <div>
                    <div className="flex items-center gap-3 mb-2">
                      <img src={st.avatar_url || st.avatar} alt={st.name} className="h-12 w-12 rounded-full object-cover border-2 border-primary/20" />
                      <div>
                        <h3 className="font-bold text-sm text-[var(--color-text)]">{st.name}</h3>
                        <p className="text-[11px] text-primary font-semibold">{st.role}</p>
                      </div>
                    </div>
                    <p className="text-xs italic text-[var(--color-text)]">"{st.quote}"</p>
                  </div>

                  <div className="pt-3 border-t border-theme flex justify-end gap-2">
                    <Button
                      onClick={() => {
                        setEditItem({ ...st, avatar_url: st.avatar_url || st.avatar, full_story: st.full_story || st.fullStory, service_used: st.service_used || st.serviceUsed });
                        setActiveModal('story');
                      }}
                      variant="outline"
                      className="!px-3 !py-1 text-xs"
                    >
                      Edit
                    </Button>
                    <Button
                      onClick={() => handleDeleteItem('story', st.id)}
                      variant="outline"
                      className="!px-3 !py-1 text-xs text-red-500 border-red-500/30"
                    >
                      Delete
                    </Button>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* TAB 9: CAREER ROLES MANAGER */}
        {activeTab === 'careers' && (
          <div className="space-y-6">
            <div className="flex items-center justify-between border-b border-theme pb-4">
              <div>
                <h2 className="text-xl font-bold text-[var(--color-text)]">Careers & Job Openings Manager</h2>
                <p className="text-xs text-muted">Create and manage job vacancies, salary ranges, and requirements.</p>
              </div>
              <Button
                onClick={() => {
                  setEditItem({
                    title: '',
                    type_name: 'Full-Time',
                    location: 'Melbourne Metro',
                    salary: '$35 – $42 / hr + Super',
                    description: '',
                    requirements: ['Certificate III/IV in Disability', 'Valid NDIS Worker Screening Check'],
                  });
                  setActiveModal('career');
                }}
                className="gap-1.5 text-xs"
              >
                <Plus className="h-4 w-4" /> Add Career Position
              </Button>
            </div>

            <div className="space-y-4">
              {careers.map((role) => (
                <div key={role.id} className="rounded-3xl border border-theme bg-surface p-6 shadow-sm flex items-center justify-between gap-4">
                  <div>
                    <span className="text-[10px] font-bold text-primary uppercase">{role.type_name || role.type}</span>
                    <h3 className="font-bold text-base text-[var(--color-text)]">{role.title}</h3>
                    <p className="text-xs text-muted">{role.location} · {role.salary}</p>
                  </div>

                  <div className="flex items-center gap-2">
                    <Button
                      onClick={() => {
                        setEditItem({ ...role, type_name: role.type_name || role.type });
                        setActiveModal('career');
                      }}
                      variant="outline"
                      className="!px-3 !py-1 text-xs"
                    >
                      Edit
                    </Button>
                    <Button
                      onClick={() => handleDeleteItem('career', role.id)}
                      variant="outline"
                      className="!px-3 !py-1 text-xs text-red-500 border-red-500/30"
                    >
                      Delete
                    </Button>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* TAB 10: SUBMISSIONS INBOX */}
        {activeTab === 'inbox' && (
          <div className="space-y-8">
            {/* Consultations */}
            <div className="space-y-4">
              <h2 className="text-lg font-bold text-[var(--color-text)]">Consultation Bookings ({submissions.consultations.length})</h2>
              {submissions.consultations.length === 0 ? (
                <p className="text-xs text-muted rounded-2xl border border-dashed border-theme p-6 text-center">No consultation enquiries yet.</p>
              ) : (
                <div className="grid gap-4 sm:grid-cols-2">
                  {submissions.consultations.map((c) => (
                    <div key={c.id} className="rounded-3xl border border-theme bg-surface p-5 shadow-sm space-y-2">
                      <div className="flex items-center justify-between border-b border-theme pb-2">
                        <strong className="text-sm font-bold text-[var(--color-text)]">{c.first_name} {c.last_name}</strong>
                        <span className={`rounded-full px-2.5 py-0.5 text-[10px] font-bold uppercase ${c.status === 'resolved' ? 'bg-green-500/10 text-green-600' : 'bg-amber-500/10 text-amber-600'}`}>{c.status || 'New'}</span>
                      </div>
                      <p className="text-xs text-muted"><strong>Email:</strong> {c.email} | <strong>Phone:</strong> {c.phone}</p>
                      <p className="text-xs text-muted"><strong>Interest:</strong> {c.service_interest} | <strong>Plan:</strong> {c.plan_type}</p>
                      {c.message && <p className="text-[11px] italic bg-[var(--color-bg)] p-2 rounded-xl text-muted">{c.message}</p>}
                      <div className="flex items-center justify-between pt-2 border-t border-theme">
                        <button type="button" onClick={() => handleUpdateStatus('consultation', c.id, c.status === 'resolved' ? 'new' : 'resolved')} className="text-xs text-primary font-bold hover:underline">
                          Mark {c.status === 'resolved' ? 'New' : 'Resolved'}
                        </button>
                        <button type="button" onClick={() => handleDeleteSubItem('consultation', c.id)} className="text-xs text-red-500 font-bold hover:underline">Delete</button>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>

            {/* Referrals */}
            <div className="space-y-4 pt-4 border-t border-theme">
              <h2 className="text-lg font-bold text-[var(--color-text)]">Professional Referrals ({submissions.referrals.length})</h2>
              {submissions.referrals.length === 0 ? (
                <p className="text-xs text-muted rounded-2xl border border-dashed border-theme p-6 text-center">No referrals recorded yet.</p>
              ) : (
                <div className="grid gap-4 sm:grid-cols-2">
                  {submissions.referrals.map((r) => (
                    <div key={r.id} className="rounded-3xl border border-theme bg-surface p-5 shadow-sm space-y-2">
                      <div className="flex items-center justify-between border-b border-theme pb-2">
                        <div>
                          <strong className="text-sm font-bold text-[var(--color-text)]">{r.client_name}</strong>
                          <span className="block text-[10px] text-muted">NDIS: {r.client_ndis || 'N/A'}</span>
                        </div>
                        <span className={`rounded-full px-2.5 py-0.5 text-[10px] font-bold uppercase ${r.status === 'resolved' ? 'bg-green-500/10 text-green-600' : 'bg-amber-500/10 text-amber-600'}`}>{r.status || 'New'}</span>
                      </div>
                      <p className="text-xs text-muted"><strong>Referrer:</strong> {r.referrer_name} ({r.referrer_type})</p>
                      <p className="text-xs text-muted"><strong>Contact:</strong> {r.referrer_email} · {r.referrer_phone}</p>
                      {r.notes && <p className="text-[11px] italic bg-[var(--color-bg)] p-2 rounded-xl text-muted">{r.notes}</p>}
                      <div className="flex items-center justify-between pt-2 border-t border-theme">
                        <button type="button" onClick={() => handleUpdateStatus('referral', r.id, r.status === 'resolved' ? 'new' : 'resolved')} className="text-xs text-primary font-bold hover:underline">
                          Mark {r.status === 'resolved' ? 'New' : 'Resolved'}
                        </button>
                        <button type="button" onClick={() => handleDeleteSubItem('referral', r.id)} className="text-xs text-red-500 font-bold hover:underline">Delete</button>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>
        )}
      </div>

      {/* UNIVERSAL MODAL EDIT FORMS */}
      {activeModal && editItem && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm overflow-y-auto">
          <div className="w-full max-w-xl rounded-3xl border border-theme bg-[var(--color-surface)] p-6 md:p-8 shadow-2xl space-y-6 my-8">
            <h2 className="text-xl font-bold text-[var(--color-text)]">
              {editItem.id ? 'Edit Content Item' : 'Add New Content Item'}
            </h2>

            <form onSubmit={handleSaveModalItem} className="space-y-4">
              {/* SERVICE EDIT FORM */}
              {activeModal === 'service' && (
                <>
                  <div>
                    <label className="block text-xs font-bold uppercase tracking-wider text-[var(--color-text)] mb-1">Service Title *</label>
                    <input type="text" required value={editItem.title || ''} onChange={(e) => setEditItem({ ...editItem, title: e.target.value })} className="w-full rounded-xl border border-theme bg-[var(--color-bg)] px-3.5 py-2 text-xs text-[var(--color-text)]" />
                  </div>
                  <div className="grid grid-cols-2 gap-3">
                    <div>
                      <label className="block text-xs font-bold uppercase tracking-wider text-[var(--color-text)] mb-1">Category Label</label>
                      <input type="text" value={editItem.category_label || editItem.categoryLabel || ''} onChange={(e) => setEditItem({ ...editItem, category_label: e.target.value })} className="w-full rounded-xl border border-theme bg-[var(--color-bg)] px-3 py-2 text-xs text-[var(--color-text)]" />
                    </div>
                    <div>
                      <label className="block text-xs font-bold uppercase tracking-wider text-[var(--color-text)] mb-1">NDIS Item Code</label>
                      <input type="text" value={editItem.ndis_item_code || editItem.ndisItemCode || ''} onChange={(e) => setEditItem({ ...editItem, ndis_item_code: e.target.value })} className="w-full rounded-xl border border-theme bg-[var(--color-bg)] px-3 py-2 text-xs text-[var(--color-text)]" />
                    </div>
                  </div>
                  <div>
                    <label className="block text-xs font-bold uppercase tracking-wider text-[var(--color-text)] mb-1">Photo Image URL</label>
                    <input type="text" value={editItem.image_url || editItem.imageUrl || ''} onChange={(e) => setEditItem({ ...editItem, image_url: e.target.value })} className="w-full rounded-xl border border-theme bg-[var(--color-bg)] px-3.5 py-2 text-xs text-[var(--color-text)]" />
                  </div>
                  <div>
                    <label className="block text-xs font-bold uppercase tracking-wider text-[var(--color-text)] mb-1">Description *</label>
                    <textarea rows={3} required value={editItem.description || ''} onChange={(e) => setEditItem({ ...editItem, description: e.target.value })} className="w-full rounded-xl border border-theme bg-[var(--color-bg)] px-3.5 py-2 text-xs text-[var(--color-text)]" />
                  </div>
                </>
              )}

              {/* FAQ EDIT FORM */}
              {activeModal === 'faq' && (
                <>
                  <div>
                    <label className="block text-xs font-bold uppercase tracking-wider text-[var(--color-text)] mb-1">Question *</label>
                    <input type="text" required value={editItem.question || ''} onChange={(e) => setEditItem({ ...editItem, question: e.target.value })} className="w-full rounded-xl border border-theme bg-[var(--color-bg)] px-3.5 py-2 text-xs text-[var(--color-text)]" />
                  </div>
                  <div>
                    <label className="block text-xs font-bold uppercase tracking-wider text-[var(--color-text)] mb-1">Answer *</label>
                    <textarea rows={4} required value={editItem.answer || ''} onChange={(e) => setEditItem({ ...editItem, answer: e.target.value })} className="w-full rounded-xl border border-theme bg-[var(--color-bg)] px-3.5 py-2 text-xs text-[var(--color-text)]" />
                  </div>
                </>
              )}

              {/* EVENT EDIT FORM */}
              {activeModal === 'event' && (
                <>
                  <div>
                    <label className="block text-xs font-bold uppercase tracking-wider text-[var(--color-text)] mb-1">Event Title *</label>
                    <input type="text" required value={editItem.title || ''} onChange={(e) => setEditItem({ ...editItem, title: e.target.value })} className="w-full rounded-xl border border-theme bg-[var(--color-bg)] px-3.5 py-2 text-xs text-[var(--color-text)]" />
                  </div>
                  <div className="grid grid-cols-2 gap-3">
                    <div>
                      <label className="block text-xs font-bold uppercase tracking-wider text-[var(--color-text)] mb-1">Date</label>
                      <input type="text" value={editItem.date_str || ''} onChange={(e) => setEditItem({ ...editItem, date_str: e.target.value })} className="w-full rounded-xl border border-theme bg-[var(--color-bg)] px-3 py-2 text-xs text-[var(--color-text)]" />
                    </div>
                    <div>
                      <label className="block text-xs font-bold uppercase tracking-wider text-[var(--color-text)] mb-1">Location</label>
                      <input type="text" value={editItem.location || ''} onChange={(e) => setEditItem({ ...editItem, location: e.target.value })} className="w-full rounded-xl border border-theme bg-[var(--color-bg)] px-3 py-2 text-xs text-[var(--color-text)]" />
                    </div>
                  </div>
                  <div>
                    <label className="block text-xs font-bold uppercase tracking-wider text-[var(--color-text)] mb-1">Photo Image URL</label>
                    <input type="text" value={editItem.image_url || ''} onChange={(e) => setEditItem({ ...editItem, image_url: e.target.value })} className="w-full rounded-xl border border-theme bg-[var(--color-bg)] px-3.5 py-2 text-xs text-[var(--color-text)]" />
                  </div>
                  <div>
                    <label className="block text-xs font-bold uppercase tracking-wider text-[var(--color-text)] mb-1">Summary *</label>
                    <textarea rows={3} required value={editItem.summary || ''} onChange={(e) => setEditItem({ ...editItem, summary: e.target.value })} className="w-full rounded-xl border border-theme bg-[var(--color-bg)] px-3.5 py-2 text-xs text-[var(--color-text)]" />
                  </div>
                </>
              )}

              {/* STORY EDIT FORM */}
              {activeModal === 'story' && (
                <>
                  <div className="grid grid-cols-2 gap-3">
                    <div>
                      <label className="block text-xs font-bold uppercase tracking-wider text-[var(--color-text)] mb-1">Participant Name *</label>
                      <input type="text" required value={editItem.name || ''} onChange={(e) => setEditItem({ ...editItem, name: e.target.value })} className="w-full rounded-xl border border-theme bg-[var(--color-bg)] px-3 py-2 text-xs text-[var(--color-text)]" />
                    </div>
                    <div>
                      <label className="block text-xs font-bold uppercase tracking-wider text-[var(--color-text)] mb-1">Role / Tag</label>
                      <input type="text" value={editItem.role || ''} onChange={(e) => setEditItem({ ...editItem, role: e.target.value })} className="w-full rounded-xl border border-theme bg-[var(--color-bg)] px-3 py-2 text-xs text-[var(--color-text)]" />
                    </div>
                  </div>
                  <div>
                    <label className="block text-xs font-bold uppercase tracking-wider text-[var(--color-text)] mb-1">Avatar Photo URL</label>
                    <input type="text" value={editItem.avatar_url || editItem.avatar || ''} onChange={(e) => setEditItem({ ...editItem, avatar_url: e.target.value })} className="w-full rounded-xl border border-theme bg-[var(--color-bg)] px-3.5 py-2 text-xs text-[var(--color-text)]" />
                  </div>
                  <div>
                    <label className="block text-xs font-bold uppercase tracking-wider text-[var(--color-text)] mb-1">Quote Statement *</label>
                    <textarea rows={2} required value={editItem.quote || ''} onChange={(e) => setEditItem({ ...editItem, quote: e.target.value })} className="w-full rounded-xl border border-theme bg-[var(--color-bg)] px-3.5 py-2 text-xs text-[var(--color-text)]" />
                  </div>
                  <div>
                    <label className="block text-xs font-bold uppercase tracking-wider text-[var(--color-text)] mb-1">Full Story</label>
                    <textarea rows={3} value={editItem.full_story || editItem.fullStory || ''} onChange={(e) => setEditItem({ ...editItem, full_story: e.target.value })} className="w-full rounded-xl border border-theme bg-[var(--color-bg)] px-3.5 py-2 text-xs text-[var(--color-text)]" />
                  </div>
                </>
              )}

              {/* CAREER EDIT FORM */}
              {activeModal === 'career' && (
                <>
                  <div>
                    <label className="block text-xs font-bold uppercase tracking-wider text-[var(--color-text)] mb-1">Position Title *</label>
                    <input type="text" required value={editItem.title || ''} onChange={(e) => setEditItem({ ...editItem, title: e.target.value })} className="w-full rounded-xl border border-theme bg-[var(--color-bg)] px-3.5 py-2 text-xs text-[var(--color-text)]" />
                  </div>
                  <div className="grid grid-cols-2 gap-3">
                    <div>
                      <label className="block text-xs font-bold uppercase tracking-wider text-[var(--color-text)] mb-1">Employment Type</label>
                      <input type="text" value={editItem.type_name || editItem.type || ''} onChange={(e) => setEditItem({ ...editItem, type_name: e.target.value })} className="w-full rounded-xl border border-theme bg-[var(--color-bg)] px-3 py-2 text-xs text-[var(--color-text)]" />
                    </div>
                    <div>
                      <label className="block text-xs font-bold uppercase tracking-wider text-[var(--color-text)] mb-1">Salary Range</label>
                      <input type="text" value={editItem.salary || ''} onChange={(e) => setEditItem({ ...editItem, salary: e.target.value })} className="w-full rounded-xl border border-theme bg-[var(--color-bg)] px-3 py-2 text-xs text-[var(--color-text)]" />
                    </div>
                  </div>
                  <div>
                    <label className="block text-xs font-bold uppercase tracking-wider text-[var(--color-text)] mb-1">Description *</label>
                    <textarea rows={3} required value={editItem.description || ''} onChange={(e) => setEditItem({ ...editItem, description: e.target.value })} className="w-full rounded-xl border border-theme bg-[var(--color-bg)] px-3.5 py-2 text-xs text-[var(--color-text)]" />
                  </div>
                </>
              )}

              <div className="flex justify-end gap-3 pt-4 border-t border-theme">
                <Button type="button" variant="outline" onClick={() => setActiveModal(null)} className="text-xs">
                  Cancel
                </Button>
                <Button type="submit" className="text-xs">
                  Save Changes
                </Button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}