import { createMemo, createSignal, For, onMount, Show } from 'solid-js';
import AdminShell from '~/components/AdminShell';

const API = '/api/gateway';
const LEGACY_INTERNAL_PREVIEW_BASE = String(import.meta.env.VITE_LEGACY_ADMIN_PREVIEW_URL || 'http://localhost:3002').replace(/\/+$/, '');

// ---------- Types ----------
type SidebarItem = { key: string; label: string; visible: boolean; order: number };
type Field = { id: string; label: string; type: 'text' | 'number' | 'select' | 'date'; required: boolean; placeholder?: string };
type Tab = { id: string; title: string; fields: Field[] };
type Widget = { id: string; title: string; metric: string; description?: string };
type Section = { id: string; title: string; tabs: Tab[]; widgets: Widget[] };
type Dashboard = { id: string; roleId: string; roleName: string; title: string; description?: string; status: string; version: number; sidebar: SidebarItem[]; sections: Section[] };
type InternalRole = { id: string; key: string; name: string };

const FIELD_TYPES: Field['type'][] = ['text', 'number', 'select', 'date'];
const makeId = (prefix: string) => `${prefix}_${Math.random().toString(36).slice(2, 10)}`;

function normalizeInternalDashboardFromConfig(base: Dashboard, configJson: any): Dashboard {
  const sidebarRaw = Array.isArray(configJson?.sidebar) ? configJson.sidebar : [];
  const sectionsRaw = Array.isArray(configJson?.sections) ? configJson.sections : [];
  const legacyNav = Array.isArray(configJson?.nav) ? configJson.nav : [];

  const sidebar: SidebarItem[] = sidebarRaw.length > 0
    ? sidebarRaw.map((item: any, index: number) => ({
        key: String(item?.key || makeId('sb')),
        label: String(item?.label || `Menu ${index + 1}`),
        visible: item?.visible !== false,
        order: Number(item?.order) || index + 1,
      }))
    : legacyNav.map((item: any, index: number) => ({
        key: String(item?.key || makeId('sb')),
        label: String(item?.label || `Menu ${index + 1}`),
        visible: true,
        order: index + 1,
      }));

  const sections: Section[] = sectionsRaw.map((section: any, sectionIndex: number) => ({
    id: String(section?.id || `section_${sectionIndex + 1}`),
    title: String(section?.title || `Section ${sectionIndex + 1}`),
    tabs: Array.isArray(section?.tabs)
      ? section.tabs.map((tab: any, tabIndex: number) => ({
          id: String(tab?.id || `tab_${tabIndex + 1}`),
          title: String(tab?.title || `Tab ${tabIndex + 1}`),
          fields: Array.isArray(tab?.fields)
            ? tab.fields.map((field: any, fieldIndex: number) => ({
                id: String(field?.id || `field_${fieldIndex + 1}`),
                label: String(field?.label || `Field ${fieldIndex + 1}`),
                type: field?.type === 'number' || field?.type === 'select' || field?.type === 'date' ? field.type : 'text',
                required: Boolean(field?.required),
                placeholder: String(field?.placeholder || ''),
              }))
            : [],
        }))
      : [],
    widgets: Array.isArray(section?.widgets)
      ? section.widgets.map((widget: any, widgetIndex: number) => ({
          id: String(widget?.id || `widget_${widgetIndex + 1}`),
          title: String(widget?.title || `Widget ${widgetIndex + 1}`),
          metric: String(widget?.metric || '0'),
          description: String(widget?.description || ''),
        }))
      : [],
  }));

  return {
    ...base,
    title: String(configJson?.title || base.title || 'Internal Dashboard'),
    description: String(configJson?.description || ''),
    roleName: String(configJson?.roleName || base.roleName || ''),
    sidebar,
    sections,
  };
}

// ---------- Preview ----------
function PreviewSection(props: { section: Section }) {
  const [activeTabId, setActiveTabId] = createSignal(props.section.tabs[0]?.id || '');
  const activeTab = createMemo(() => props.section.tabs.find((t) => t.id === activeTabId()) || props.section.tabs[0] || null);
  return (
    <div class="preview-section">
      <h5 style="margin:0 0 4px;font-size:17px;font-weight:700;color:#050026">{props.section.title}</h5>
      <p style="margin:0;font-size:13px;color:#64748b">Preview tabs, fields, and widgets.</p>
      <Show when={props.section.tabs.length > 0}>
        <div class="preview-tabs">
          {props.section.tabs.map((tab) => (
            <button type="button" class={`preview-tab-btn ${activeTabId() === tab.id ? 'active' : ''}`} onClick={() => setActiveTabId(tab.id)}>
              {tab.title}
            </button>
          ))}
        </div>
      </Show>
      <Show when={activeTab()}>
        <Show when={activeTab()!.fields.length > 0}>
          <div class="preview-fields-grid">
            {activeTab()!.fields.map((field) => (
              <div class="preview-field">
                <label>{field.label}{field.required ? <span style="color:#fd6216"> *</span> : null}</label>
                {field.type === 'select'
                  ? <select><option>{field.placeholder || `Select ${field.label}`}</option><option>Option A</option><option>Option B</option></select>
                  : <input type={field.type === 'number' ? 'number' : field.type === 'date' ? 'date' : 'text'} placeholder={field.placeholder || `Enter ${field.label}`} />}
              </div>
            ))}
          </div>
        </Show>
        <Show when={activeTab()!.fields.length === 0}>
          <div style="margin-top:16px;border:1px dashed #cbd5e1;border-radius:12px;padding:24px;text-align:center;font-size:13px;color:#94a3b8">Add fields to this tab to preview.</div>
        </Show>
      </Show>
      <Show when={props.section.widgets.length > 0}>
        <div class="preview-widget-grid">
          {props.section.widgets.map((w) => (
            <div class="preview-widget">
              <div class="w-label">{w.title}</div>
              <div class="w-metric">{w.metric}</div>
              <div class="w-desc">{w.description || 'Widget description'}</div>
            </div>
          ))}
        </div>
      </Show>
    </div>
  );
}

function DashboardPreview(props: { dashboard: Dashboard }) {
  const visibleSidebar = createMemo(() =>
    [...props.dashboard.sidebar].filter((i) => i.visible).sort((a, b) => a.order - b.order)
  );
  const [activeSidebarKey, setActiveSidebarKey] = createSignal('');
  const selectedLabel = createMemo(() => visibleSidebar().find((i) => i.key === activeSidebarKey())?.label || 'Overview');

  return (
    <div class="preview-shell">
      <div class="preview-header">
        <div>
          <h3 style="margin:0;font-size:17px;font-weight:700;color:#050026">{props.dashboard.title}</h3>
          <p style="margin:2px 0 0;font-size:13px;color:#64748b">{props.dashboard.roleName}</p>
        </div>
        <div style="display:flex;align-items:center;gap:12px">
          <div style="width:36px;height:36px;border-radius:999px;background:#fff1e8;display:flex;align-items:center;justify-content:center;color:#c2410c;font-weight:700;font-size:14px">A</div>
        </div>
      </div>
      <div class="preview-layout">
        <aside class="preview-sidebar">
          {visibleSidebar().map((item) => (
            <button
              type="button"
              class={`preview-sidebar-item ${activeSidebarKey() === item.key ? 'active' : ''}`}
              onClick={() => setActiveSidebarKey(item.key)}
            >
              <span style="width:16px;height:16px;border-radius:4px;background:#cbd5e1;flex-shrink:0;display:inline-block" />
              {item.label}
            </button>
          ))}
          <Show when={visibleSidebar().length === 0}>
            <p style="font-size:12px;color:#94a3b8;padding:8px">No sidebar items added yet.</p>
          </Show>
        </aside>
        <div class="preview-content">
          <p style="margin:0;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#fd6216">Dashboard Preview</p>
          <h4 style="margin:4px 0 4px;font-size:22px;font-weight:700;color:#050026">{selectedLabel()}</h4>
          <p style="margin:0 0 16px;font-size:13px;color:#64748b">{props.dashboard.description || 'Preview of the internal dashboard layout.'}</p>
          <For each={props.dashboard.sections}>
            {(section) => <PreviewSection section={section} />}
          </For>
          <Show when={props.dashboard.sections.length === 0}>
            <div style="border:1px dashed #cbd5e1;border-radius:12px;padding:32px;text-align:center;font-size:13px;color:#94a3b8">Add sections, tabs, fields, and widgets to preview here.</div>
          </Show>
        </div>
      </div>
    </div>
  );
}

// ---------- Main Page ----------
export default function InternalDashboardManagementPage() {
  const [dashboards, setDashboards] = createSignal<Dashboard[]>([]);
  const [roles, setRoles] = createSignal<InternalRole[]>([]);
  const [selectedId, setSelectedId] = createSignal('');
  const [activeTab, setActiveTab] = createSignal<'overview' | 'sidebar' | 'sections' | 'preview'>('overview');
  const [previewMode, setPreviewMode] = createSignal<'configured' | 'live'>('configured');
  const [loading, setLoading] = createSignal(true);
  const [saving, setSaving] = createSignal(false);
  const [creating, setCreating] = createSignal(false);
  const [error, setError] = createSignal('');

  onMount(async () => {
    await Promise.all([loadDashboards(), loadRoles()]);
  });

  const loadDashboards = async () => {
    try {
      setLoading(true);
      setError('');
      const res = await fetch(`${API}/api/admin/dashboard-config?audience=INTERNAL`);
      if (!res.ok) throw new Error('Failed to load internal dashboards');
      const data = await res.json();
      const rows = (Array.isArray(data) ? data : (data.dashboards || []))
        .filter((item: any) => String(item?.audience || '').toUpperCase() === 'INTERNAL')
        .map((item: any) => ({
          id: String(item.id || ''),
          roleId: String(item.role_id || ''),
          roleName: '',
          title: 'Internal Dashboard',
          description: '',
          status: item.is_active ? 'published' : 'draft',
          version: Number(item.version) || 1,
          sidebar: [],
          sections: [],
        }));
      setDashboards(rows);
    } catch (err: any) {
      setError(err.message || 'Failed to load dashboards');
    } finally {
      setLoading(false);
    }
  };

  const loadRoles = async () => {
    try {
      const res = await fetch(`${API}/api/admin/roles?audience=INTERNAL`);
      if (!res.ok) return;
      const data = await res.json();
      setRoles(
        (Array.isArray(data) ? data : (data.roles || []))
          .filter((r: any) => String(r?.audience || '').toUpperCase() === 'INTERNAL')
          .map((r: any) => ({ id: String(r.id || ''), key: String(r.key || ''), name: String(r.name || 'Internal Role') })),
      );
    } catch { setRoles([]); }
  };

  const hydrateDashboard = async (configId: string) => {
    const base = dashboards().find((item) => item.id === configId);
    if (!base || !base.roleId) return;
    try {
      const res = await fetch(`${API}/api/admin/dashboard-config/${base.roleId}?audience=INTERNAL`);
      if (!res.ok) return;
      const detail = await res.json();
      const role = roles().find((item) => item.id === base.roleId);
      const hydrated = normalizeInternalDashboardFromConfig(
        {
          ...base,
          roleName: role?.name || base.roleName,
          status: detail?.is_active ? 'published' : base.status,
          version: Number(detail?.version) || base.version,
        },
        detail?.config_json || {},
      );
      setDashboards((prev) => prev.map((item) => (item.id === configId ? hydrated : item)));
    } catch {
      // Keep list-summary data if detail fetch fails.
    }
  };

  const openDashboard = async (configId: string) => {
    setSelectedId(configId);
    setActiveTab('overview');
    await hydrateDashboard(configId);
  };

  const selected = () => dashboards().find((d) => d.id === selectedId()) || null;
  const livePreviewUrl = createMemo(() => {
    const roleId = String(selected()?.roleId || '').trim();
    if (!roleId) return `${LEGACY_INTERNAL_PREVIEW_BASE}/internal-dashboard-management`;
    return `${LEGACY_INTERNAL_PREVIEW_BASE}/internal-dashboard-management?roleId=${encodeURIComponent(roleId)}`;
  });
  const livePreviewRoleLabel = createMemo(() => String(selected()?.roleName || '').trim() || 'Unlinked Role');

  const update = (patch: Partial<Dashboard>) =>
    setDashboards((prev) => prev.map((d) => d.id === selectedId() ? { ...d, ...patch } : d));

  const updateSection = (sectionId: string, patch: Partial<Section>) =>
    update({ sections: selected()!.sections.map((s) => s.id === sectionId ? { ...s, ...patch } : s) });

  const updateTab = (sectionId: string, tabId: string, patch: Partial<Tab>) => {
    const section = selected()!.sections.find((s) => s.id === sectionId)!;
    updateSection(sectionId, { tabs: section.tabs.map((t) => t.id === tabId ? { ...t, ...patch } : t) });
  };

  const updateField = (sId: string, tId: string, fId: string, patch: Partial<Field>) => {
    const tab = selected()!.sections.find((s) => s.id === sId)!.tabs.find((t) => t.id === tId)!;
    updateTab(sId, tId, { fields: tab.fields.map((f) => f.id === fId ? { ...f, ...patch } : f) });
  };

  const updateWidget = (sId: string, wId: string, patch: Partial<Widget>) => {
    const section = selected()!.sections.find((s) => s.id === sId)!;
    updateSection(sId, { widgets: section.widgets.map((w) => w.id === wId ? { ...w, ...patch } : w) });
  };

  const addSidebarItem = () => {
    const items = selected()!.sidebar;
    update({ sidebar: [...items, { key: makeId('sb'), label: 'New Sidebar Item', visible: true, order: items.length + 1 }] });
  };

  const removeSidebarItem = (key: string) =>
    update({ sidebar: selected()!.sidebar.filter((i) => i.key !== key).map((i, idx) => ({ ...i, order: idx + 1 })) });

  const addSection = () =>
    update({ sections: [...selected()!.sections, { id: makeId('sec'), title: 'New Section', tabs: [], widgets: [] }] });

  const removeSection = (id: string) =>
    update({ sections: selected()!.sections.filter((s) => s.id !== id) });

  const addTab = (sId: string) => {
    const section = selected()!.sections.find((s) => s.id === sId)!;
    updateSection(sId, { tabs: [...section.tabs, { id: makeId('tab'), title: 'New Tab', fields: [] }] });
  };

  const removeTab = (sId: string, tId: string) => {
    const section = selected()!.sections.find((s) => s.id === sId)!;
    updateSection(sId, { tabs: section.tabs.filter((t) => t.id !== tId) });
  };

  const addField = (sId: string, tId: string) => {
    const tab = selected()!.sections.find((s) => s.id === sId)!.tabs.find((t) => t.id === tId)!;
    updateTab(sId, tId, { fields: [...tab.fields, { id: makeId('fld'), label: 'New Field', type: 'text', required: false, placeholder: 'Enter value' }] });
  };

  const removeField = (sId: string, tId: string, fId: string) => {
    const tab = selected()!.sections.find((s) => s.id === sId)!.tabs.find((t) => t.id === tId)!;
    updateTab(sId, tId, { fields: tab.fields.filter((f) => f.id !== fId) });
  };

  const addWidget = (sId: string) => {
    const section = selected()!.sections.find((s) => s.id === sId)!;
    updateSection(sId, { widgets: [...section.widgets, { id: makeId('wgt'), title: 'New Widget', metric: '0', description: 'Describe this widget.' }] });
  };

  const removeWidget = (sId: string, wId: string) => {
    const section = selected()!.sections.find((s) => s.id === sId)!;
    updateSection(sId, { widgets: section.widgets.filter((w) => w.id !== wId) });
  };

  const createDashboard = async () => {
    try {
      setCreating(true);
      setError('');
      let newId = makeId('local');
      const defaultRole = roles()[0];
      try {
        if (defaultRole?.id) {
          const res = await fetch(`${API}/api/admin/dashboard-config`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
              role_id: defaultRole.id,
              audience: 'INTERNAL',
              config_json: { title: `${defaultRole.name} Dashboard`, description: '', roleName: defaultRole.name, version: 1, sidebar: [], sections: [], nav: [] },
            }),
          });
          if (res.ok) {
            const data = await res.json();
            newId = data.id;
          }
        }
      } catch { /* backend unavailable — use local draft */ }
      const nd: Dashboard = {
        id: newId,
        roleId: defaultRole?.id || '',
        roleName: defaultRole?.name || '',
        title: `${defaultRole?.name || 'New Internal'} Dashboard`,
        status: 'draft',
        version: 1,
        sidebar: [],
        sections: [],
      };
      setDashboards((prev) => [nd, ...prev]);
      setSelectedId(newId);
      setActiveTab('overview');
    } finally {
      setCreating(false);
    }
  };

  const saveSelected = async () => {
    const d = selected();
    if (!d) return;
    if (!d.roleId) {
      setError('Please select an internal role before saving.');
      return;
    }
    try {
      setSaving(true);
      setError('');
      const nav = d.sidebar
        .filter((item) => item.visible)
        .sort((a, b) => a.order - b.order)
        .map((item) => ({
          key: item.key,
          label: item.label,
          path: '/internal-dashboard-management',
        }));
      const res = await fetch(`${API}/api/admin/dashboard-config`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          role_id: d.roleId,
          audience: 'INTERNAL',
          config_json: { title: d.title, description: d.description, roleName: d.roleName, version: d.version, sidebar: d.sidebar, sections: d.sections, nav },
        }),
      });
      if (!res.ok) throw new Error('Failed to save dashboard');
      await loadDashboards();
      const next = dashboards().find((item) => item.roleId === d.roleId);
      if (next) await openDashboard(next.id);
    } catch (err: any) {
      setError(err.message || 'Failed to save dashboard');
    } finally {
      setSaving(false);
    }
  };

  // ---------- List view ----------
  return (
    <AdminShell>
      <div class="flex flex-col -mx-6 -mt-6 min-h-full">
      <div class="bg-white border-b border-gray-200 px-6 py-4 flex items-center justify-between">
        <div>
          <h1 class="text-xl font-semibold text-gray-900">Internal Dashboard Management</h1>
          <p class="text-sm text-gray-500 mt-0.5">Open one internal dashboard at a time from the list below and edit it using simple tabs.</p>
        </div>
        <a class="rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors" href="/admin">Back to Dashboard</a>
      </div>
      <div class="p-6 flex-1">

      <div class="hidden" style="margin-bottom:14px">
        <a class="hidden" href="#builder">View Dashboards</a>
        <a class="hidden" href="#builder">Open Builder</a>
      </div>

      <div id="builder" />

      <Show when={!selected()}>
        <div class="mb-6 flex items-start justify-between gap-4">
          <div>
            <h2 class="text-lg font-semibold text-gray-900">Internal Dashboard List</h2>
            <p class="mt-1 text-sm text-gray-500">Choose one internal dashboard to open in the builder, or create a new dashboard for an internal role.</p>
          </div>
          <button class="inline-flex items-center rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-medium text-white hover:bg-[#0f2a4e] transition-colors" onClick={createDashboard} disabled={creating()}>
            {creating() ? 'Creating...' : 'Create Internal Dashboard'}
          </button>
        </div>
        <Show when={error()}><div class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{error()}</div></Show>
        <section class="rounded-xl border border-gray-200 bg-white shadow-sm" style="padding: 0; overflow: hidden;">
          <div class="overflow-x-auto">
            <table class="w-full text-sm list-table-soft-head">
              <thead>
                <tr>
                  <th>Role</th>
                  <th>Role ID</th>
                  <th>Dashboard</th>
                  <th>Status</th>
                  <th>Version</th>
                  <th class="text-right">Action</th>
                </tr>
              </thead>
              <tbody>
                <Show when={loading()}>
                  <tr><td colspan="6" style="text-align:center;padding:32px;color:#64748b">Loading internal dashboards...</td></tr>
                </Show>
                <Show when={!loading() && dashboards().length === 0}>
                  <tr><td colspan="6" style="text-align:center;padding:32px;color:#94a3b8">No internal dashboards found. Create the first one.</td></tr>
                </Show>
                <For each={dashboards()}>
                  {(d) => (
                    <tr>
                      <td style="color:#475569">{d.roleName || 'Not linked'}</td>
                      <td style="color:#475569">{d.roleId || 'Not linked'}</td>
                      <td style="font-weight:600;color:#0f172a">{d.title}</td>
                      <td><span class={`inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600 ${d.status === 'published' ? 'active' : ''}`}>{d.status}</span></td>
                      <td style="color:#64748b">v{d.version}</td>
                      <td>
                        <div class="flex items-center justify-end gap-1">
                          <button class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors" onClick={() => void openDashboard(d.id)}>View Builder</button>
                        </div>
                      </td>
                    </tr>
                  )}
                </For>
              </tbody>
            </table>
          </div>
        </section>
      </Show>

      {/* ---------- Builder view ---------- */}
      <Show when={selected()}>
        <div class="builder-header">
          <div>
            <h2>Internal Dashboard Builder</h2>
            <p>Manage menu items, sections, tabs, form fields, and summary cards from one place.</p>
          </div>
          <div class="builder-header-actions">
            <button class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors" onClick={() => setSelectedId('')}>Back to List</button>
            <button class="inline-flex items-center rounded-lg bg-[#0a1d37] px-4 py-2 text-sm font-medium text-white hover:bg-[#0f2a4e] transition-colors" onClick={saveSelected} disabled={saving()}>
              {saving() ? 'Saving...' : 'Save Dashboard'}
            </button>
          </div>
        </div>

        <Show when={error()}><div class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{error()}</div></Show>

        {/* Tab bar */}
        <div class="builder-tab-bar">
          {(['overview', 'sidebar', 'sections', 'preview'] as const).map((t) => (
            <button
              type="button"
              class={`builder-tab-btn ${activeTab() === t ? 'active' : ''}`}
              onClick={() => setActiveTab(t)}
            >
              {t === 'sections' ? 'Sections, Tabs & Fields' : t.charAt(0).toUpperCase() + t.slice(1)}
            </button>
          ))}
        </div>

        {/* Overview */}
        <Show when={activeTab() === 'overview'}>
          <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
            <div class="field">
              <label>Team Role</label>
              <select
                value={selected()!.roleId}
                onChange={(e) => {
                  const role = roles().find((r) => r.id === e.currentTarget.value);
                  update({ roleId: e.currentTarget.value, roleName: role?.name || '', title: role ? `${role.name} Dashboard` : selected()!.title });
                }}
              >
                <option value="">Select team role</option>
                {roles().map((r) => <option value={r.id}>{r.name}</option>)}
              </select>
            </div>
            <div class="field">
              <label>Dashboard Title</label>
              <input value={selected()!.title} onInput={(e) => update({ title: e.currentTarget.value })} />
            </div>
            <div class="field">
              <label>Short description</label>
              <input value={selected()!.description || ''} onInput={(e) => update({ description: e.currentTarget.value })} />
            </div>
            <div class="info-box">
              <p style="margin:0 0 4px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#64748b">Linked Role</p>
              <p style="margin:0;font-weight:600;color:#0f172a">{selected()!.roleName || 'No role selected yet'}</p>
              <p style="margin:2px 0 0;font-size:12px;color:#64748b">{selected()!.roleId || 'Select a team role to connect this dashboard.'}</p>
            </div>
          </div>
        </Show>

        {/* Sidebar */}
        <Show when={activeTab() === 'sidebar'}>
          <div class="builder-section">
            <div class="sub-card-header">
              <h4>Menu</h4>
              <button class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors orange" onClick={addSidebarItem}>Add Menu Item</button>
            </div>
            <For each={selected()!.sidebar}>
              {(item, idx) => (
                <div class="builder-item builder-item-row-4">
                  <input
                    value={item.label}
                    placeholder="Menu label"
                    onInput={(e) => update({ sidebar: selected()!.sidebar.map((i) => i.key === item.key ? { ...i, label: e.currentTarget.value } : i) })}
                  />
                  <input
                    type="number"
                    value={item.order}
                    onInput={(e) => update({ sidebar: selected()!.sidebar.map((i) => i.key === item.key ? { ...i, order: Number(e.currentTarget.value) || idx() + 1 } : i) })}
                    style="width:80px"
                  />
                  <label class="checkbox-label" style="justify-content:center">
                    <input
                      type="checkbox"
                      checked={item.visible}
                      onChange={(e) => update({ sidebar: selected()!.sidebar.map((i) => i.key === item.key ? { ...i, visible: e.currentTarget.checked } : i) })}
                    />
                    Show
                  </label>
                  <button class="inline-flex items-center rounded-lg border border-red-200 bg-red-50 px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-100 transition-colors" onClick={() => removeSidebarItem(item.key)}>Remove</button>
                </div>
              )}
            </For>
            <Show when={selected()!.sidebar.length === 0}>
              <p class="notice">No menu items yet. Add your first menu item.</p>
            </Show>
          </div>
        </Show>

        {/* Sections, Tabs & Fields */}
        <Show when={activeTab() === 'sections'}>
          <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px">
            <h3 style="margin:0;font-size:15px;font-weight:700">Sections</h3>
            <button class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors orange" onClick={addSection}>Add Section</button>
          </div>
          <For each={selected()!.sections}>
            {(section) => (
              <div class="builder-section">
                <div class="builder-section-header">
                  <input
                    value={section.title}
                    onInput={(e) => updateSection(section.id, { title: e.currentTarget.value })}
                    placeholder="Section title"
                  />
                  <button class="inline-flex items-center rounded-lg border border-red-200 bg-red-50 px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-100 transition-colors" onClick={() => removeSection(section.id)}>Remove</button>
                </div>

                {/* Tabs */}
                <div class="sub-card">
                  <div class="sub-card-header">
                    <h4>Tabs and Form Fields</h4>
                    <button class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors orange" onClick={() => addTab(section.id)}>Add Tab</button>
                  </div>
                  <For each={section.tabs}>
                    {(tab) => (
                      <div class="nested-card">
                        <div class="nested-card-header">
                          <input
                            value={tab.title}
                            onInput={(e) => updateTab(section.id, tab.id, { title: e.currentTarget.value })}
                            placeholder="Tab title"
                          />
                          <button class="inline-flex items-center rounded-lg border border-red-200 bg-red-50 px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-100 transition-colors" onClick={() => removeTab(section.id, tab.id)}>Remove</button>
                        </div>
                        <div style="display:flex;justify-content:flex-end;margin-bottom:8px">
                          <button class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors orange" onClick={() => addField(section.id, tab.id)}>Add Field</button>
                        </div>
                        <For each={tab.fields}>
                          {(field) => (
                            <div class="field-row">
                              <div>
                                <input
                                  value={field.label}
                                  onInput={(e) => updateField(section.id, tab.id, field.id, { label: e.currentTarget.value })}
                                  placeholder="Field label"
                                  style="width:100%;margin-bottom:4px"
                                />
                                <input
                                  value={field.placeholder || ''}
                                  onInput={(e) => updateField(section.id, tab.id, field.id, { placeholder: e.currentTarget.value })}
                                  placeholder="Help text inside the input"
                                  style="width:100%"
                                />
                              </div>
                              <select
                                value={field.type}
                                onChange={(e) => updateField(section.id, tab.id, field.id, { type: e.currentTarget.value as Field['type'] })}
                              >
                                {FIELD_TYPES.map((t) => <option value={t}>{t}</option>)}
                              </select>
                              <label class="checkbox-label" style="justify-content:center">
                                <input
                                  type="checkbox"
                                  checked={field.required}
                                  onChange={(e) => updateField(section.id, tab.id, field.id, { required: e.currentTarget.checked })}
                                />
                                Required
                              </label>
                              <button class="inline-flex items-center rounded-lg border border-red-200 bg-red-50 px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-100 transition-colors" onClick={() => removeField(section.id, tab.id, field.id)}>Remove</button>
                            </div>
                          )}
                        </For>
                        <Show when={tab.fields.length === 0}>
                          <p class="notice" style="text-align:center">No fields in this tab yet.</p>
                        </Show>
                      </div>
                    )}
                  </For>
                  <Show when={section.tabs.length === 0}>
                    <p class="notice">No tabs yet. Add a tab above.</p>
                  </Show>
                </div>

                {/* Widgets */}
                <div class="sub-card" style="margin-top:8px">
                  <div class="sub-card-header">
                    <h4>Widgets</h4>
                    <button class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors orange" onClick={() => addWidget(section.id)}>Add Widget</button>
                  </div>
                  <For each={section.widgets}>
                    {(widget) => (
                      <div class="widget-item">
                        <input value={widget.title} onInput={(e) => updateWidget(section.id, widget.id, { title: e.currentTarget.value })} placeholder="Widget title" />
                        <input value={widget.metric} onInput={(e) => updateWidget(section.id, widget.id, { metric: e.currentTarget.value })} placeholder="Metric value e.g. 42" />
                        <textarea rows={2} value={widget.description || ''} onInput={(e) => updateWidget(section.id, widget.id, { description: e.currentTarget.value })} placeholder="Widget description" />
                        <div style="display:flex;justify-content:flex-end">
                          <button class="inline-flex items-center rounded-lg border border-red-200 bg-red-50 px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-100 transition-colors" style="font-size:12px;padding:5px 10px" onClick={() => removeWidget(section.id, widget.id)}>Remove Widget</button>
                        </div>
                      </div>
                    )}
                  </For>
                  <Show when={section.widgets.length === 0}>
                    <p class="notice">No widgets yet.</p>
                  </Show>
                </div>
              </div>
            )}
          </For>
          <Show when={selected()!.sections.length === 0}>
            <div style="text-align:center;padding:32px;border:1px dashed #cbd5e1;border-radius:12px;color:#94a3b8;font-size:13px">No sections yet. Add the first section above.</div>
          </Show>
        </Show>

        {/* Preview */}
        <Show when={activeTab() === 'preview'}>
          <div style="display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px">
            <p class="notice" style="margin:0">Preview this dashboard as a sample view or open the live version.</p>
            <div class="admin-segmented" style="margin:0">
              <button
                type="button"
                class={`admin-segment ${previewMode() === 'configured' ? 'active' : ''}`}
                onClick={() => setPreviewMode('configured')}
              >
                Sample Preview
              </button>
              <button
                type="button"
                class={`admin-segment ${previewMode() === 'live' ? 'active' : ''}`}
                onClick={() => setPreviewMode('live')}
              >
                Live Preview
              </button>
            </div>
          </div>

          <Show when={previewMode() === 'configured'}>
            <DashboardPreview dashboard={selected()!} />
          </Show>

          <Show when={previewMode() === 'live'}>
            <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px">
              <span class="meta-chip">Role: {livePreviewRoleLabel()}</span>
              <Show when={selected()!.roleId}>
                <span class="meta-chip">Role ID: {selected()!.roleId}</span>
              </Show>
              <a class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors" href={livePreviewUrl()} target="_blank" rel="noreferrer">Open Full Page Preview</a>
            </div>
            <iframe
              src={livePreviewUrl()}
              title="Live Internal Dashboard Preview"
              style="width:100%;height:760px;border:1px solid #e2e8f0;border-radius:14px;background:#fff"
            />
          </Show>
        </Show>
      </Show>
      </div>
      </div>
    </AdminShell>
  );
}