import React, { useMemo, useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { Link } from 'react-router-dom';
import {
  UserGroupIcon, HeartIcon, BuildingOffice2Icon, CalendarDaysIcon,
  CreditCardIcon, ArrowPathIcon, BellAlertIcon, ChatBubbleLeftEllipsisIcon,
  ClockIcon, StarIcon, UserIcon, CheckIcon, XMarkIcon,
} from '@heroicons/react/24/outline';
import { toast } from 'sonner';
import { api } from '../lib/api';
import type { ApiResponse } from '../lib/api';
import { formatNumber, formatRial, formatDateTime } from '../lib/utils';
import { useAuthStore } from '../stores/authStore';
import InviteDoctorModal from '../components/ui/InviteDoctorModal';

// ── Shared Status Maps ────────────────────────────────────────────────────

const APPT_LABEL: Record<string, string> = {
  waiting_for_payment: 'انتظار پرداخت', reserved: 'رزرو شده', checked_in: 'ورود به مطب',
  waiting: 'صف انتظار', in_progress: 'در حال ویزیت', visited: 'ویزیت شده',
  completed: 'تکمیل شده', cancelled_by_doctor: 'لغو پزشک', cancelled_by_user: 'لغو بیمار',
  auto_cancel_unpaid: 'لغو خودکار', no_show: 'غیبت',
};
const APPT_COLOR: Record<string, string> = {
  waiting_for_payment: '#f59e0b', reserved: '#3b82f6', checked_in: '#6366f1',
  waiting: '#f97316', in_progress: '#8b5cf6', visited: '#10b981',
  completed: '#22c55e', cancelled_by_doctor: '#ef4444', cancelled_by_user: '#f43f5e',
  auto_cancel_unpaid: '#94a3b8', no_show: '#64748b',
};
const APPT_CLS: Record<string, string> = {
  waiting_for_payment: 'amber', reserved: 'blue', checked_in: 'violet',
  waiting: 'amber', in_progress: 'violet', visited: 'green', completed: 'green',
  cancelled_by_doctor: 'red', cancelled_by_user: 'red', auto_cancel_unpaid: 'gray', no_show: 'gray',
};
const PAY_LABEL: Record<string, string> = {
  pending: 'در انتظار', received: 'موفق', canceled: 'لغو شده', refund: 'استرداد',
};
const PAY_COLOR: Record<string, string> = {
  pending: '#f59e0b', received: '#22c55e', canceled: '#ef4444', refund: '#3b82f6',
};
const PAY_CLS: Record<string, string> = {
  pending: 'amber', received: 'green', canceled: 'red', refund: 'blue',
};

// ── Shared SVG Charts ─────────────────────────────────────────────────────

function SvgLineChart({ data, color, h = 220 }: { data: number[]; color: string; h?: number }) {
  if (data.length < 2) return null;
  const w = 760, pad = 8;
  const max = Math.max(...data) * 1.15 || 1;
  const stepX = (w - pad * 2) / (data.length - 1);
  const pts: [number, number][] = data.map((v, i) => [
    pad + i * stepX,
    h - pad - (v / max) * (h - pad * 2 - 18),
  ]);
  const d = pts.map((p, i) => {
    if (i === 0) return `M${p[0]},${p[1]}`;
    const prev = pts[i - 1];
    const cx = (prev[0] + p[0]) / 2;
    return `C${cx},${prev[1]} ${cx},${p[1]} ${p[0]},${p[1]}`;
  }).join(' ');
  const area = `${d} L${pts[pts.length - 1][0]},${h - pad} L${pts[0][0]},${h - pad} Z`;
  const gid = 'lg' + color.replace(/[^a-z0-9]/gi, '');
  return (
    <svg viewBox={`0 0 ${w} ${h}`} width="100%" height={h} preserveAspectRatio="none" style={{ overflow: 'visible' }}>
      <defs>
        <linearGradient id={gid} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={color} stopOpacity={0.22} />
          <stop offset="100%" stopColor={color} stopOpacity={0} />
        </linearGradient>
      </defs>
      {[0.25, 0.5, 0.75, 1].map((g, i) => (
        <line key={i} x1={pad} x2={w - pad} y1={(h - pad * 2) * g} y2={(h - pad * 2) * g}
          stroke="var(--border)" strokeDasharray="4 6" strokeWidth={1} />
      ))}
      <path d={area} fill={`url(#${gid})`} className="ln-area" />
      <path d={d} fill="none" stroke={color} strokeWidth={2.6} strokeLinecap="round" className="ln-path" />
      {pts.map((p, i) => i % 4 === 0 && (
        <circle key={i} cx={p[0]} cy={p[1]} r={3.2} fill="var(--surface)" stroke={color} strokeWidth={2.2} />
      ))}
      <style>{`.ln-path{stroke-dasharray:2400;stroke-dashoffset:2400;animation:draw 1.4s cubic-bezier(.22,.61,.36,1) forwards}.ln-area{opacity:0;animation:fadein .9s .5s forwards}@keyframes draw{to{stroke-dashoffset:0}}`}</style>
    </svg>
  );
}

function SvgDonut({ data, size = 190 }: { data: { value: number; color: string; label: string }[]; size?: number }) {
  const total = data.reduce((s, d) => s + d.value, 0);
  if (!total) return null;
  const r = size / 2 - 16;
  const c = 2 * Math.PI * r;
  let off = 0;
  return (
    <svg viewBox={`0 0 ${size} ${size}`} width={size} height={size}>
      <g transform={`rotate(-90 ${size / 2} ${size / 2})`}>
        {data.map((d, i) => {
          const frac = d.value / total;
          const seg = (
            <circle key={i} cx={size / 2} cy={size / 2} r={r} fill="none"
              stroke={d.color} strokeWidth={20} strokeLinecap="round"
              strokeDasharray={`${Math.max(frac * c - 4, 0)} ${c}`}
              strokeDashoffset={-off * c} />
          );
          off += frac;
          return seg;
        })}
      </g>
      <text x="50%" y="46%" textAnchor="middle" fontSize="13" fill="var(--text-3)" fontFamily="Vazirmatn">مجموع</text>
      <text x="50%" y="60%" textAnchor="middle" fontSize="22" fontWeight="800" fill="var(--text)" fontFamily="Vazirmatn">{formatNumber(total)}</text>
    </svg>
  );
}

function SvgHBars({ data }: { data: { label: string; value: number }[] }) {
  const max = Math.max(...data.map(d => d.value)) || 1;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
      {data.map((d, i) => (
        <div key={i} style={{ display: 'grid', gridTemplateColumns: '160px 1fr 52px', alignItems: 'center', gap: 12 }}>
          <div style={{ fontSize: 12.5, color: 'var(--text-2)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{d.label}</div>
          <div className="bar" style={{ height: 12 }}>
            <i style={{ width: `${(d.value / max) * 100}%`, animation: `growbar 1s ${i * 0.07}s cubic-bezier(.22,.61,.36,1) both` }} />
          </div>
          <div style={{ fontSize: 12.5, fontWeight: 700 }}>{formatNumber(d.value)}</div>
        </div>
      ))}
    </div>
  );
}

// ── Shared UI Pieces ──────────────────────────────────────────────────────

function AvatarEl({ initials, hue = 222, size }: { initials: string; hue?: number; size?: 'sm' | 'lg' }) {
  const cls = 'avatar' + (size === 'sm' ? ' sm' : size === 'lg' ? ' lg' : '');
  return (
    <div className={cls} style={{ background: `linear-gradient(145deg, oklch(0.62 0.15 ${hue}), oklch(0.48 0.16 ${hue}))` }}>
      {initials}
    </div>
  );
}

interface MiniRow {
  title: string; sub: string; meta: string;
  badgeLabel: string; badgeCls: string; initials: string; hue: number;
}

function MiniList({ title, to, rows, loading }: { title: string; to: string; rows: MiniRow[]; loading?: boolean }) {
  return (
    <div className="card card-pad">
      <div className="card-title-row">
        <h3 style={{ fontSize: 16 }}>{title}</h3>
        <Link to={to} className="link">همه</Link>
      </div>
      {loading ? (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          {Array.from({ length: 5 }).map((_, i) => (
            <div key={i} style={{ display: 'flex', gap: 11, alignItems: 'center' }}>
              <div className="skeleton" style={{ width: 32, height: 32, borderRadius: '50%', flexShrink: 0 }} />
              <div style={{ flex: 1 }}>
                <div className="skeleton" style={{ height: 13, borderRadius: 5, width: '70%', marginBottom: 5 }} />
                <div className="skeleton" style={{ height: 11, borderRadius: 5, width: '50%' }} />
              </div>
            </div>
          ))}
        </div>
      ) : !rows.length ? (
        <p className="muted" style={{ textAlign: 'center', padding: '32px 0', fontSize: 13.5 }}>موردی ثبت نشده</p>
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          {rows.map((r, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '10px 0', borderBottom: i < rows.length - 1 ? '1px solid var(--border)' : 'none' }}>
              <AvatarEl initials={r.initials} hue={r.hue} size="sm" />
              <div style={{ flex: 1, minWidth: 0 }}>
                <b style={{ fontSize: 13.5, display: 'block', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{r.title}</b>
                <span className="muted" style={{ fontSize: 11.5 }}>{r.sub}</span>
              </div>
              <div style={{ textAlign: 'start', flexShrink: 0 }}>
                <span className={`badge ${r.badgeCls}`}><span className="bdot" />{r.badgeLabel}</span>
                <div className="muted" style={{ fontSize: 10.5, marginTop: 3 }}>{r.meta}</div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

function KpiSkeleton() {
  return (
    <div className="stat">
      <div className="skeleton" style={{ width: 40, height: 40, borderRadius: 12, marginBottom: 14 }} />
      <div className="skeleton" style={{ height: 13, borderRadius: 6, width: '60%', marginBottom: 6 }} />
      <div className="skeleton" style={{ height: 26, borderRadius: 6, width: '45%', marginBottom: 4 }} />
      <div className="skeleton" style={{ height: 12, borderRadius: 6, width: '75%' }} />
    </div>
  );
}

function LoadingSkeleton() {
  return (
    <div className="fade-in">
      <div className="stat-grid">
        {Array.from({ length: 4 }).map((_, i) => <KpiSkeleton key={i} />)}
      </div>
      <div className="skeleton" style={{ height: 300, borderRadius: 'var(--r)', marginTop: 'var(--gap)' }} />
    </div>
  );
}

// ── Appointments Table (shared) ────────────────────────────────────────────

interface ApptRow {
  uuid: string;
  patient_name: string | null;
  patient_mobile?: string;
  slot_start: number;
  status: string;
}

function TodayAppointmentsTable({ appts, loading }: { appts: ApptRow[]; loading: boolean }) {
  if (loading) return <div className="skeleton" style={{ height: 180, borderRadius: 'var(--r)' }} />;
  if (!appts.length) return <p className="muted" style={{ textAlign: 'center', padding: '32px 0', fontSize: 13.5 }}>نوبتی برای امروز ثبت نشده</p>;
  return (
    <div style={{ overflowX: 'auto' }}>
      <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13.5 }}>
        <thead>
          <tr style={{ borderBottom: '1px solid var(--border)' }}>
            <th style={{ textAlign: 'right', padding: '8px 12px', color: 'var(--text-3)', fontWeight: 500 }}>بیمار</th>
            <th style={{ textAlign: 'right', padding: '8px 12px', color: 'var(--text-3)', fontWeight: 500 }}>ساعت</th>
            <th style={{ textAlign: 'right', padding: '8px 12px', color: 'var(--text-3)', fontWeight: 500 }}>وضعیت</th>
          </tr>
        </thead>
        <tbody>
          {appts.map((a, i) => (
            <tr key={a.uuid} style={{ borderBottom: i < appts.length - 1 ? '1px solid var(--border)' : 'none' }}>
              <td style={{ padding: '10px 12px' }}>{a.patient_name || a.patient_mobile || '—'}</td>
              <td style={{ padding: '10px 12px', direction: 'ltr', textAlign: 'left' }}>
                {new Date(a.slot_start * 1000).toLocaleTimeString('fa-IR', { hour: '2-digit', minute: '2-digit' })}
              </td>
              <td style={{ padding: '10px 12px' }}>
                <span className={`badge ${APPT_CLS[a.status] ?? 'gray'}`}>
                  <span className="bdot" />{APPT_LABEL[a.status] ?? a.status}
                </span>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

// ── Admin Dashboard ───────────────────────────────────────────────────────

interface AdminStats {
  total_users: number; active_doctors: number; total_doctors: number; total_clinics: number;
  today_appointments: number; total_appointments: number; today_payments_count: number;
  today_payments_amount: number; total_payments_amount: number; pending_comments: number;
  pending_settlements: number; this_month_revenue: number; this_month_appointments: number;
}
interface AdminCharts {
  appointments_by_day: { date: number; count: number }[];
  revenue_by_day:      { date: number; amount_rials: number }[];
  appointment_status: { status: string; count: number }[];
  top_specialties:   { name: string; count: number }[];
  subscription_sales_by_plan?: { plan: string; count: number; total_rials: number }[];
}
interface AdminRecent {
  appointments: { uuid: string; slot_start: string; status: string; doctor_name: string; user_mobile: string; user_name: string | null; created_at: string }[];
  payments:     { uuid: string; amount: number; status: string; gateway: string; user_mobile: string; user_name: string | null; created_at: string }[];
  users:        { uuid: string; mobile: string; name: string | null; email: string | null; created_at: string }[];
}

type DatePreset = 'this_week' | 'this_month' | '3_months';

function getRange(preset: DatePreset): { from: number; to: number } {
  const now = Math.floor(Date.now() / 1000);
  if (preset === 'this_week') {
    const d = new Date(); d.setHours(0, 0, 0, 0);
    const day = d.getDay(); // 0=sun, 6=sat
    const daysToSat = (day + 1) % 7;
    const satMs = d.getTime() - daysToSat * 86400000;
    return { from: Math.floor(satMs / 1000), to: now };
  }
  if (preset === 'this_month') {
    const d = new Date(); d.setDate(1); d.setHours(0, 0, 0, 0);
    return { from: Math.floor(d.getTime() / 1000), to: now };
  }
  return { from: now - 90 * 86400, to: now };
}

function AdminDashboard() {
  const [chartMode, setChartMode] = useState<'appts' | 'rev'>('appts');
  const [preset, setPreset] = useState<DatePreset>('this_month');
  const range = getRange(preset);

  const statsQ = useQuery({ queryKey: ['dashboard-stats'], queryFn: () => api.get<ApiResponse<AdminStats>>('/api/v1/admin/dashboard/stats'), staleTime: 60_000 });
  const chartsQ = useQuery({ queryKey: ['dashboard-charts', preset], queryFn: () => api.get<ApiResponse<AdminCharts>>(`/api/v1/admin/dashboard/charts?from=${range.from}&to=${range.to}`), staleTime: 120_000 });
  const recentQ = useQuery({ queryKey: ['dashboard-recent'], queryFn: () => api.get<ApiResponse<AdminRecent>>('/api/v1/admin/dashboard/recent'), staleTime: 30_000 });

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const stats  = useMemo<AdminStats | undefined>(() => (statsQ.data?.data  as any)?.data ?? statsQ.data?.data,  [statsQ.data]);
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const charts = useMemo<AdminCharts | undefined>(()  => (chartsQ.data?.data as any)?.data ?? chartsQ.data?.data, [chartsQ.data]);
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const recent = useMemo<AdminRecent | undefined>(()  => (recentQ.data?.data as any)?.data ?? recentQ.data?.data, [recentQ.data]);

  const fn = (n?: number) => n !== undefined ? formatNumber(n) : '—';
  const fr = (n?: number) => n !== undefined ? formatRial(n) : '—';
  const today = new Date().toLocaleDateString('fa-IR', { year: 'numeric', month: 'long', day: 'numeric' });
  const isFetching = statsQ.isFetching || chartsQ.isFetching || recentQ.isFetching;

  const apptSeries = useMemo(() => charts?.appointments_by_day?.map(d => d.count) ?? [], [charts]);
  const revSeries  = useMemo(() => charts?.revenue_by_day?.map(d => d.amount_rials) ?? [], [charts]);
  const donutData  = useMemo(() =>
    (charts?.appointment_status ?? []).slice(0, 7).map(s => ({
      label: APPT_LABEL[s.status] ?? s.status, value: s.count, color: APPT_COLOR[s.status] ?? '#94a3b8',
    })), [charts]);
  const hbarsData  = useMemo(() => (charts?.top_specialties ?? []).map(s => ({ label: s.name, value: s.count })), [charts]);

  const kpiCards = [
    { label: 'کل کاربران',      value: fn(stats?.total_users),        hint: '',                                                                    icon: UserGroupIcon,        color: 'var(--violet)',  bg: 'var(--violet-bg)'    },
    { label: 'پزشکان فعال',     value: fn(stats?.active_doctors),     hint: stats ? `از ${fn(stats.total_doctors)} پزشک` : '',                     icon: HeartIcon,            color: 'var(--success)', bg: 'var(--success-bg)'   },
    { label: 'کلینیک‌ها',       value: fn(stats?.total_clinics),      hint: '',                                                                    icon: BuildingOffice2Icon,  color: 'var(--info)',    bg: 'var(--info-bg)'      },
    { label: 'نوبت‌های امروز',  value: fn(stats?.today_appointments), hint: stats ? `ماه جاری: ${fn(stats.this_month_appointments)}` : '',         icon: CalendarDaysIcon,     color: 'var(--warning)', bg: 'var(--warning-bg)'   },
    { label: 'درآمد این ماه',   value: fr(stats?.this_month_revenue), hint: 'تومان',                                                               icon: CreditCardIcon,       color: 'var(--primary)', bg: 'var(--primary-soft)' },
    { label: 'در انتظار بررسی', value: fn(stats ? stats.pending_comments + stats.pending_settlements : undefined), hint: stats ? `${fn(stats.pending_comments)} نظر · ${fn(stats.pending_settlements)} تسویه` : '', icon: BellAlertIcon, color: 'var(--danger)', bg: 'var(--danger-bg)' },
  ];

  const quickActions = [
    { label: 'پزشکان',    to: '/admin/doctors',      icon: HeartIcon,                  color: 'var(--success)', bg: 'var(--success-bg)'   },
    { label: 'کلینیک‌ها', to: '/admin/clinics',      icon: BuildingOffice2Icon,        color: 'var(--info)',    bg: 'var(--info-bg)'      },
    { label: 'نوبت‌ها',   to: '/admin/appointments', icon: CalendarDaysIcon,           color: 'var(--warning)', bg: 'var(--warning-bg)'   },
    { label: 'پرداخت‌ها', to: '/admin/payments',     icon: CreditCardIcon,             color: 'var(--danger)',  bg: 'var(--danger-bg)'    },
    { label: 'نظرات',     to: '/admin/comments',     icon: ChatBubbleLeftEllipsisIcon, color: 'var(--violet)',  bg: 'var(--violet-bg)'    },
    { label: 'کاربران',   to: '/admin/users',        icon: UserGroupIcon,              color: 'var(--primary)', bg: 'var(--primary-soft)' },
  ];

  const timelineEvents = useMemo(() => {
    if (!recent) return [];
    const evs: { title: string; sub: string; time: string; color: string }[] = [];
    (recent.appointments ?? []).slice(0, 4).forEach(a => {
      evs.push({ title: `نوبت ${APPT_LABEL[a.status] ?? a.status}`, sub: `${a.user_name || a.user_mobile} · دکتر ${a.doctor_name}`, time: a.created_at, color: APPT_COLOR[a.status] ?? '#94a3b8' });
    });
    (recent.payments ?? []).slice(0, 3).forEach(p => {
      evs.push({ title: `پرداخت ${PAY_LABEL[p.status] ?? p.status}`, sub: `${p.user_name || p.user_mobile} · ${formatRial(p.amount)}`, time: p.created_at, color: PAY_COLOR[p.status] ?? '#94a3b8' });
    });
    (recent.users ?? []).slice(0, 3).forEach(u => {
      evs.push({ title: 'ثبت‌نام کاربر جدید', sub: u.name || u.mobile, time: u.created_at, color: '#8b5cf6' });
    });
    return evs.sort((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime()).slice(0, 8);
  }, [recent]);

  const apptRows = useMemo<MiniRow[]>(() =>
    (recent?.appointments ?? []).slice(0, 5).map(a => ({
      title: a.user_name || a.user_mobile, sub: `دکتر ${a.doctor_name}`, meta: formatDateTime(a.slot_start),
      badgeLabel: APPT_LABEL[a.status] ?? a.status, badgeCls: APPT_CLS[a.status] ?? 'gray',
      initials: (a.user_name || a.user_mobile).slice(0, 2), hue: 222,
    })), [recent]);

  const payRows = useMemo<MiniRow[]>(() =>
    (recent?.payments ?? []).slice(0, 5).map(p => ({
      title: p.user_name || p.user_mobile, sub: formatRial(p.amount), meta: formatDateTime(p.created_at),
      badgeLabel: PAY_LABEL[p.status] ?? p.status, badgeCls: PAY_CLS[p.status] ?? 'gray',
      initials: (p.user_name || p.user_mobile).slice(0, 2), hue: 162,
    })), [recent]);

  const userRows = useMemo<MiniRow[]>(() =>
    (recent?.users ?? []).slice(0, 5).map(u => ({
      title: u.name || u.mobile, sub: u.name ? u.mobile : '', meta: formatDateTime(u.created_at),
      badgeLabel: 'فعال', badgeCls: 'green',
      initials: (u.name || u.mobile).slice(0, 2), hue: 256,
    })), [recent]);

  return (
    <div className="fade-in">
      <div className="card-title-row" style={{ marginBottom: 'var(--gap)' }}>
        <div>
          <h1 className="section-title">داشبورد مدیریت</h1>
          <div className="muted" style={{ fontSize: 13, marginTop: 2 }}>{today} · نمای کلی عملکرد مجموعه</div>
        </div>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          <div className="seg">
            <button className={preset === 'this_week'  ? 'on' : ''} onClick={() => setPreset('this_week')}>این هفته</button>
            <button className={preset === 'this_month' ? 'on' : ''} onClick={() => setPreset('this_month')}>این ماه</button>
            <button className={preset === '3_months'   ? 'on' : ''} onClick={() => setPreset('3_months')}>۳ ماه</button>
          </div>
          <button className="btn primary sm" disabled={isFetching}
            onClick={() => { statsQ.refetch(); chartsQ.refetch(); recentQ.refetch(); }}>
            <ArrowPathIcon style={{ width: 14, height: 14 }} />
            به‌روزرسانی
          </button>
        </div>
      </div>

      <div className="stat-grid">
        {statsQ.isLoading
          ? Array.from({ length: 6 }).map((_, i) => <KpiSkeleton key={i} />)
          : kpiCards.map(c => (
            <div key={c.label} className="stat">
              <div className="ico" style={{ background: c.bg, color: c.color }}>
                <c.icon style={{ width: 21, height: 21 }} />
              </div>
              <div className="lbl">{c.label}</div>
              <div className="val">{c.value}</div>
              <div style={{ display: 'flex', gap: 8, justifyContent: 'space-between' }}>
                <span className="hint">{c.hint}</span>
              </div>
            </div>
          ))
        }
      </div>

      <div className="dash-main">
        <div className="card card-pad">
          <div className="card-title-row"><h3 style={{ fontSize: 16 }}>وضعیت نوبت‌ها</h3></div>
          {chartsQ.isLoading ? (
            <>
              <div className="skeleton" style={{ width: 190, height: 190, borderRadius: '50%', margin: '6px auto 18px' }} />
              <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
                {Array.from({ length: 5 }).map((_, i) => (
                  <div key={i} className="skeleton" style={{ height: 14, borderRadius: 5 }} />
                ))}
              </div>
            </>
          ) : (
            <>
              <div style={{ display: 'flex', justifyContent: 'center', margin: '6px 0 18px' }}>
                <SvgDonut data={donutData} />
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
                {donutData.map((d, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: 13 }}>
                    <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <span style={{ width: 9, height: 9, borderRadius: 3, background: d.color, flexShrink: 0, display: 'inline-block' }} />
                      <span style={{ color: 'var(--text-2)' }}>{d.label}</span>
                    </span>
                    <b>{formatNumber(d.value)}</b>
                  </div>
                ))}
              </div>
            </>
          )}
        </div>
        <div className="card card-pad">
          <div className="card-title-row">
            <h3 style={{ fontSize: 16 }}>{chartMode === 'appts' ? 'نوبت‌ها' : 'درآمد'} — {preset === 'this_week' ? 'این هفته' : preset === 'this_month' ? 'این ماه' : '۳ ماه اخیر'}</h3>
            <div className="seg">
              <button className={chartMode === 'appts' ? 'on' : ''} onClick={() => setChartMode('appts')}>نوبت‌ها</button>
              <button className={chartMode === 'rev' ? 'on' : ''} onClick={() => setChartMode('rev')}>درآمد</button>
            </div>
          </div>
          {chartsQ.isLoading ? (
            <div className="skeleton" style={{ height: 236, borderRadius: 'var(--r)' }} />
          ) : (
            <SvgLineChart key={chartMode}
              data={chartMode === 'appts' ? apptSeries : revSeries}
              color={chartMode === 'appts' ? 'var(--primary)' : 'var(--success)'}
              h={236} />
          )}
        </div>
      </div>

      <div className="grid-2" style={{ marginBottom: 'var(--gap)' }}>
        <div className="card card-pad">
          <div className="card-title-row">
            <h3 style={{ fontSize: 16 }}>پرتکرارترین تخصص‌ها</h3>
            <span className="muted" style={{ fontSize: 12 }}>بر اساس تعداد نوبت</span>
          </div>
          {chartsQ.isLoading ? (
            <div className="skeleton" style={{ height: 200, borderRadius: 'var(--r)' }} />
          ) : !hbarsData.length ? (
            <p className="muted" style={{ textAlign: 'center', padding: '40px 0', fontSize: 13.5 }}>داده‌ای موجود نیست</p>
          ) : (
            <SvgHBars data={hbarsData} />
          )}
        </div>
        <div className="card card-pad">
          <div className="card-title-row">
            <h3 style={{ fontSize: 16 }}>فروش اشتراک‌ها</h3>
            <span className="muted" style={{ fontSize: 12 }}>{preset === 'this_week' ? 'این هفته' : preset === 'this_month' ? 'این ماه' : '۳ ماه اخیر'}</span>
          </div>
          {chartsQ.isLoading ? (
            <div className="skeleton" style={{ height: 120, borderRadius: 'var(--r)' }} />
          ) : !(charts?.subscription_sales_by_plan ?? []).length ? (
            <p className="muted" style={{ textAlign: 'center', padding: '40px 0', fontSize: 13.5 }}>فروشی ثبت نشده</p>
          ) : (
            <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
              <thead>
                <tr style={{ borderBottom: '1px solid var(--border)' }}>
                  <th style={{ textAlign: 'right', padding: '8px 4px', color: 'var(--text-3)', fontWeight: 500 }}>پنل</th>
                  <th style={{ textAlign: 'right', padding: '8px 4px', color: 'var(--text-3)', fontWeight: 500 }}>تعداد</th>
                  <th style={{ textAlign: 'right', padding: '8px 4px', color: 'var(--text-3)', fontWeight: 500 }}>درآمد</th>
                </tr>
              </thead>
              <tbody>
                {(charts?.subscription_sales_by_plan ?? []).map((row) => (
                  <tr key={row.plan} style={{ borderBottom: '1px solid var(--border)' }}>
                    <td style={{ padding: '8px 4px' }}>{row.plan === 'basic' ? 'پایه' : row.plan === 'professional' ? 'حرفه‌ای' : row.plan}</td>
                    <td style={{ padding: '8px 4px' }}>{formatNumber(row.count)}</td>
                    <td style={{ padding: '8px 4px' }}>{formatRial(row.total_rials)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </div>
      </div>

      <div className="grid-2" style={{ marginBottom: 'var(--gap)' }}>
        <div className="card card-pad">
          <div className="card-title-row"><h3 style={{ fontSize: 16 }}>دسترسی سریع</h3></div>
          <div className="quick-grid" style={{ gridTemplateColumns: 'repeat(3,1fr)' }}>
            {quickActions.map(a => (
              <Link key={a.to} to={a.to} className="quick">
                <span className="qi" style={{ background: a.bg, color: a.color }}>
                  <a.icon style={{ width: 22, height: 22 }} />
                </span>
                <b>{a.label}</b>
              </Link>
            ))}
          </div>
        </div>
        <div className="card card-pad">
          <div className="card-title-row"><h3 style={{ fontSize: 16 }}>آخرین رویدادها</h3></div>
          {recentQ.isLoading ? (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              {Array.from({ length: 5 }).map((_, i) => (
                <div key={i} style={{ display: 'flex', gap: 13, alignItems: 'flex-start' }}>
                  <div className="skeleton" style={{ width: 9, height: 9, borderRadius: '50%', marginTop: 7, flexShrink: 0 }} />
                  <div style={{ flex: 1 }}>
                    <div className="skeleton" style={{ height: 13, borderRadius: 5, width: '70%', marginBottom: 5 }} />
                    <div className="skeleton" style={{ height: 11, borderRadius: 5, width: '50%' }} />
                  </div>
                </div>
              ))}
            </div>
          ) : !timelineEvents.length ? (
            <p className="muted" style={{ textAlign: 'center', padding: '32px 0', fontSize: 13.5 }}>رویدادی ثبت نشده</p>
          ) : (
            <div>
              {timelineEvents.map((e, i) => (
                <div className="timeline-item" key={i}>
                  <span className="tl-dot" style={{ background: e.color }}></span>
                  <div className="tl-body">
                    <b>{e.title}</b>
                    {e.sub && <p>{e.sub}</p>}
                    <time>{formatDateTime(e.time)}</time>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>

      <div className="dash-3">
        <MiniList title="آخرین نوبت‌ها"   to="/admin/appointments" rows={apptRows} loading={recentQ.isLoading} />
        <MiniList title="آخرین پرداخت‌ها" to="/admin/payments"     rows={payRows}  loading={recentQ.isLoading} />
        <MiniList title="کاربران جدید"     to="/admin/users"        rows={userRows} loading={recentQ.isLoading} />
      </div>
    </div>
  );
}

// ── Clinic Dashboard ──────────────────────────────────────────────────────

interface ClinicDashboardData {
  clinic: { uuid: string; name: string; is_active: boolean; logo: string | null };
  stats: {
    total_doctors: number; today_appointments: number; this_month_appointments: number; pending_invitations: number;
    sms_wallet_balance?: number; unique_patients_count?: number; revenue_period_rials?: number;
  };
  today_appointments: ApptRow[];
  doctors: { uuid: string; name: string; today_count: number }[];
}

function ClinicDashboard() {
  const { context, dbUuid } = useAuthStore();
  const [inviteOpen, setInviteOpen] = useState(false);
  const [preset, setPreset] = useState<DatePreset>('this_month');
  const range = getRange(preset);
  const q = useQuery({
    queryKey: ['dashboard-clinic', preset],
    queryFn: () => api.get<ApiResponse<ClinicDashboardData>>(`/api/v1/dashboard/clinic?from=${range.from}&to=${range.to}`),
    staleTime: 60_000,
  });

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const d = useMemo<ClinicDashboardData | undefined>(() => (q.data?.data as any)?.data ?? q.data?.data, [q.data]);
  const today = new Date().toLocaleDateString('fa-IR', { year: 'numeric', month: 'long', day: 'numeric' });
  const clinicUuid = d?.clinic.uuid ?? dbUuid ?? '';

  if (q.isLoading) return <LoadingSkeleton />;

  const kpiCards = [
    { label: 'پزشکان',             value: formatNumber(d?.stats.total_doctors ?? 0),           icon: HeartIcon,        color: 'var(--success)', bg: 'var(--success-bg)'   },
    { label: 'نوبت‌های امروز',     value: formatNumber(d?.stats.today_appointments ?? 0),      icon: CalendarDaysIcon, color: 'var(--warning)', bg: 'var(--warning-bg)'   },
    { label: 'نوبت‌های این ماه',   value: formatNumber(d?.stats.this_month_appointments ?? 0), icon: ClockIcon,        color: 'var(--info)',    bg: 'var(--info-bg)'      },
    { label: 'دعوتنامه در انتظار', value: formatNumber(d?.stats.pending_invitations ?? 0),     icon: BellAlertIcon,    color: 'var(--danger)',  bg: 'var(--danger-bg)'    },
    ...(d?.stats.sms_wallet_balance != null ? [{ label: 'موجودی پیامک', value: formatRial(d.stats.sms_wallet_balance), icon: CreditCardIcon, color: 'var(--primary)', bg: 'var(--primary-soft)' }] : []),
    ...(d?.stats.unique_patients_count != null ? [{ label: 'بیماران یکتا', value: formatNumber(d.stats.unique_patients_count), icon: UserGroupIcon, color: 'var(--violet)', bg: 'var(--violet-bg)' }] : []),
    ...(d?.stats.revenue_period_rials != null ? [{ label: 'درآمد دوره', value: formatRial(d.stats.revenue_period_rials), icon: CreditCardIcon, color: 'var(--success)', bg: 'var(--success-bg)' }] : []),
  ];

  return (
    <div className="fade-in">
      <div className="card-title-row" style={{ marginBottom: 'var(--gap)' }}>
        <div>
          <h1 className="section-title">داشبورد کلینیک</h1>
          <div className="muted" style={{ fontSize: 13, marginTop: 2 }}>{today} · {d?.clinic.name ?? context?.name ?? ''}</div>
        </div>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          <div className="seg">
            <button className={preset === 'this_week'  ? 'on' : ''} onClick={() => setPreset('this_week')}>این هفته</button>
            <button className={preset === 'this_month' ? 'on' : ''} onClick={() => setPreset('this_month')}>این ماه</button>
            <button className={preset === '3_months'   ? 'on' : ''} onClick={() => setPreset('3_months')}>۳ ماه</button>
          </div>
          <button className="btn primary sm" onClick={() => setInviteOpen(true)}>
            <UserIcon style={{ width: 14, height: 14 }} />
            دعوت پزشک
          </button>
          <button className="btn ghost sm" onClick={() => q.refetch()}>
            <ArrowPathIcon style={{ width: 14, height: 14 }} />
            به‌روزرسانی
          </button>
        </div>
      </div>

      <div className="stat-grid">
        {kpiCards.map(c => (
          <div key={c.label} className="stat">
            <div className="ico" style={{ background: c.bg, color: c.color }}>
              <c.icon style={{ width: 21, height: 21 }} />
            </div>
            <div className="lbl">{c.label}</div>
            <div className="val">{c.value}</div>
          </div>
        ))}
      </div>

      <div className="grid-2" style={{ marginTop: 'var(--gap)' }}>
        <div className="card card-pad">
          <div className="card-title-row">
            <h3 style={{ fontSize: 16 }}>نوبت‌های امروز</h3>
            <Link to="/admin/appointments" className="link">همه نوبت‌ها</Link>
          </div>
          <TodayAppointmentsTable appts={d?.today_appointments ?? []} loading={q.isLoading} />
        </div>

        <div className="card card-pad">
          <div className="card-title-row">
            <h3 style={{ fontSize: 16 }}>پزشکان کلینیک</h3>
            <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
              <button className="btn ghost sm" style={{ fontSize: 11, padding: '3px 10px' }} onClick={() => setInviteOpen(true)}>
                + دعوت جدید
              </button>
              {clinicUuid && (
                <Link to={`/admin/clinics/${clinicUuid}`} className="link">مدیریت</Link>
              )}
            </div>
          </div>
          {!d?.doctors.length ? (
            <div style={{ textAlign: 'center', padding: '24px 0' }}>
              <p className="muted" style={{ fontSize: 13.5, marginBottom: 12 }}>هنوز پزشکی دعوت نشده</p>
              <button className="btn primary sm" onClick={() => setInviteOpen(true)}>
                دعوت اولین پزشک
              </button>
            </div>
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column' }}>
              {d.doctors.map((doc, i) => (
                <div
                  key={doc.uuid}
                  style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '10px 0', borderBottom: i < d.doctors.length - 1 ? '1px solid var(--border)' : 'none' }}
                >
                  <AvatarEl initials={doc.name.slice(0, 1)} hue={162} size="sm" />
                  <div style={{ flex: 1 }}>
                    <b style={{ fontSize: 13.5 }}>دکتر {doc.name}</b>
                  </div>
                  <span className="badge blue"><span className="bdot" />{formatNumber(doc.today_count)} امروز</span>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>

      {inviteOpen && clinicUuid && (
        <InviteDoctorModal
          clinicUuid={clinicUuid}
          onClose={() => setInviteOpen(false)}
          onInvited={() => q.refetch()}
        />
      )}
    </div>
  );
}

// ── Doctor Clinic Invitations Card ───────────────────────────────────────

interface ClinicInvitation {
  uuid: string;
  invited_specialty: string | null;
  invited_at: number;
  expires_at: number;
  clinic: { uuid: string; name: string; logo: string | null };
}

function DoctorClinicInvitationsCard() {
  const qc = useQueryClient();
  const { data, isLoading } = useQuery({
    queryKey: ['doctor-my-invitations'],
    queryFn: () => api.get<{ data: { data: ClinicInvitation[] } }>('/api/v1/doctor/invitations'),
    staleTime: 30_000,
  });

  const respondMut = useMutation({
    mutationFn: ({ uuid, action }: { uuid: string; action: 'accept' | 'reject' }) =>
      api.post(`/api/v1/doctor/invitation/${uuid}/respond`, { action }),
    onSuccess: (_res, { action }) => {
      toast.success(action === 'accept' ? 'دعوتنامه پذیرفته شد' : 'دعوتنامه رد شد');
      qc.invalidateQueries({ queryKey: ['doctor-my-invitations'] });
      qc.invalidateQueries({ queryKey: ['dashboard-doctor'] });
    },
    onError: (err: Error) => toast.error(err.message),
  });

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const invitations: ClinicInvitation[] = (data?.data as any) ?? [];

  if (!isLoading && invitations.length === 0) return null;

  return (
    <div className="card card-pad" style={{ marginTop: 'var(--gap)' }}>
      <div className="card-title-row">
        <h3 style={{ fontSize: 16, display: 'flex', alignItems: 'center', gap: 8 }}>
          <BellAlertIcon style={{ width: 18, height: 18, color: 'var(--danger)' }} />
          دعوتنامه‌های کلینیک
        </h3>
        <span className="badge red"><span className="bdot" />{invitations.length} در انتظار</span>
      </div>
      {isLoading ? (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {[1, 2].map(i => (
            <div key={i} className="skeleton" style={{ height: 60, borderRadius: 8 }} />
          ))}
        </div>
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {invitations.map((inv) => (
            <div key={inv.uuid} style={{
              display: 'flex', alignItems: 'center', gap: 12,
              padding: '12px 14px', borderRadius: 8,
              background: 'var(--surface-2, var(--primary-soft))',
              border: '1px solid var(--border)',
            }}>
              {inv.clinic.logo ? (
                <img src={inv.clinic.logo} alt="" style={{ width: 40, height: 40, borderRadius: 8, objectFit: 'cover', flexShrink: 0 }} />
              ) : (
                <div style={{ width: 40, height: 40, borderRadius: 8, background: 'var(--primary)', color: 'var(--on-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 16, flexShrink: 0 }}>
                  {(inv.clinic.name ?? '?')[0]}
                </div>
              )}
              <div style={{ flex: 1, minWidth: 0 }}>
                <b style={{ fontSize: 13.5, display: 'block' }}>{inv.clinic.name}</b>
                {inv.invited_specialty && <span className="muted" style={{ fontSize: 12 }}>{inv.invited_specialty}</span>}
              </div>
              <div style={{ display: 'flex', gap: 8, flexShrink: 0 }}>
                <button
                  className="btn primary sm"
                  style={{ padding: '5px 12px', fontSize: 12 }}
                  disabled={respondMut.isPending}
                  onClick={() => respondMut.mutate({ uuid: inv.uuid, action: 'accept' })}
                >
                  <CheckIcon style={{ width: 14, height: 14 }} />
                  پذیرفتن
                </button>
                <button
                  className="btn ghost sm"
                  style={{ padding: '5px 12px', fontSize: 12 }}
                  disabled={respondMut.isPending}
                  onClick={() => respondMut.mutate({ uuid: inv.uuid, action: 'reject' })}
                >
                  <XMarkIcon style={{ width: 14, height: 14 }} />
                  رد کردن
                </button>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

// ── Doctor Dashboard ──────────────────────────────────────────────────────

interface DoctorDashboardData {
  doctor: { uuid: string; name: string; degree: string | null };
  stats: {
    today_appointments: number; tomorrow_appointments: number; this_month_appointments: number;
    avg_rating: number | null; total_ratings: number;
    unique_patients_count?: number; revenue_period_rials?: number;
  };
  today_appointments: ApptRow[];
  clinics: { uuid: string; name: string; logo: string | null }[];
}

function DoctorDashboard() {
  const { context } = useAuthStore();
  const [preset, setPreset] = useState<DatePreset>('this_month');
  const range = getRange(preset);
  const q = useQuery({
    queryKey: ['dashboard-doctor', preset],
    queryFn: () => api.get<ApiResponse<DoctorDashboardData>>(`/api/v1/dashboard/doctor?from=${range.from}&to=${range.to}`),
    staleTime: 60_000,
  });

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const d = useMemo<DoctorDashboardData | undefined>(() => (q.data?.data as any)?.data ?? q.data?.data, [q.data]);
  const today = new Date().toLocaleDateString('fa-IR', { year: 'numeric', month: 'long', day: 'numeric' });

  if (q.isLoading) return <LoadingSkeleton />;

  const kpiCards = [
    { label: 'نوبت‌های امروز',   value: formatNumber(d?.stats.today_appointments ?? 0),      icon: CalendarDaysIcon, color: 'var(--warning)', bg: 'var(--warning-bg)'   },
    { label: 'نوبت‌های فردا',    value: formatNumber(d?.stats.tomorrow_appointments ?? 0),   icon: ClockIcon,        color: 'var(--info)',    bg: 'var(--info-bg)'      },
    { label: 'نوبت‌های این ماه', value: formatNumber(d?.stats.this_month_appointments ?? 0), icon: CalendarDaysIcon, color: 'var(--success)', bg: 'var(--success-bg)'   },
    { label: 'میانگین امتیاز',   value: d?.stats.avg_rating != null ? String(d.stats.avg_rating) : '—', icon: StarIcon, color: 'var(--primary)', bg: 'var(--primary-soft)' },
    ...(d?.stats.unique_patients_count != null ? [{ label: 'بیماران یکتا', value: formatNumber(d.stats.unique_patients_count), icon: UserGroupIcon, color: 'var(--violet)', bg: 'var(--violet-bg)' }] : []),
    ...(d?.stats.revenue_period_rials != null ? [{ label: 'درآمد دوره', value: formatRial(d.stats.revenue_period_rials), icon: CreditCardIcon, color: 'var(--success)', bg: 'var(--success-bg)' }] : []),
  ];

  return (
    <div className="fade-in">
      <div className="card-title-row" style={{ marginBottom: 'var(--gap)' }}>
        <div>
          <h1 className="section-title">داشبورد پزشک</h1>
          <div className="muted" style={{ fontSize: 13, marginTop: 2 }}>{today} · دکتر {d?.doctor.name ?? context?.name ?? ''}</div>
        </div>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          <div className="seg">
            <button className={preset === 'this_week'  ? 'on' : ''} onClick={() => setPreset('this_week')}>این هفته</button>
            <button className={preset === 'this_month' ? 'on' : ''} onClick={() => setPreset('this_month')}>این ماه</button>
            <button className={preset === '3_months'   ? 'on' : ''} onClick={() => setPreset('3_months')}>۳ ماه</button>
          </div>
          <button className="btn ghost sm" onClick={() => q.refetch()}>
            <ArrowPathIcon style={{ width: 14, height: 14 }} />
            به‌روزرسانی
          </button>
        </div>
      </div>

      <div className="stat-grid">
        {kpiCards.map(c => (
          <div key={c.label} className="stat">
            <div className="ico" style={{ background: c.bg, color: c.color }}>
              <c.icon style={{ width: 21, height: 21 }} />
            </div>
            <div className="lbl">{c.label}</div>
            <div className="val">{c.value}</div>
            {c.label === 'میانگین امتیاز' && d?.stats.total_ratings ? (
              <div className="hint">{formatNumber(d.stats.total_ratings)} نظر</div>
            ) : null}
          </div>
        ))}
      </div>

      <DoctorClinicInvitationsCard />

      <div className="grid-2" style={{ marginTop: 'var(--gap)' }}>
        <div className="card card-pad">
          <div className="card-title-row">
            <h3 style={{ fontSize: 16 }}>نوبت‌های امروز</h3>
            <Link to="/admin/appointments" className="link">همه نوبت‌ها</Link>
          </div>
          <TodayAppointmentsTable appts={d?.today_appointments ?? []} loading={q.isLoading} />
        </div>

        <div className="card card-pad">
          <div className="card-title-row">
            <h3 style={{ fontSize: 16 }}>کلینیک‌های من</h3>
          </div>
          {!d?.clinics.length ? (
            <p className="muted" style={{ textAlign: 'center', padding: '32px 0', fontSize: 13.5 }}>عضو کلینیکی نیستید</p>
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column' }}>
              {d.clinics.map((c, i) => (
                <div key={c.uuid} style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '10px 0', borderBottom: i < d.clinics.length - 1 ? '1px solid var(--border)' : 'none' }}>
                  <AvatarEl initials={c.name.slice(0, 1)} hue={205} size="sm" />
                  <div style={{ flex: 1 }}>
                    <b style={{ fontSize: 13.5 }}>{c.name}</b>
                  </div>
                  <span className="badge green"><span className="bdot" />فعال</span>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// ── Secretary Dashboard ───────────────────────────────────────────────────

interface SecretaryDashboardData {
  doctor: { uuid: string; name: string; degree: string | null };
  permissions: Record<string, unknown>;
  stats: { today_appointments: number; tomorrow_appointments: number };
  today_appointments: ApptRow[];
}

function SecretaryDashboard() {
  const q = useQuery({
    queryKey: ['dashboard-secretary'],
    queryFn: () => api.get<ApiResponse<SecretaryDashboardData>>('/api/v1/dashboard/secretary'),
    staleTime: 60_000,
  });

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const d = useMemo<SecretaryDashboardData | undefined>(() => (q.data?.data as any)?.data ?? q.data?.data, [q.data]);
  const today = new Date().toLocaleDateString('fa-IR', { year: 'numeric', month: 'long', day: 'numeric' });

  if (q.isLoading) return <LoadingSkeleton />;

  const kpiCards = [
    { label: 'نوبت‌های امروز', value: formatNumber(d?.stats.today_appointments ?? 0),    icon: CalendarDaysIcon, color: 'var(--warning)', bg: 'var(--warning-bg)' },
    { label: 'نوبت‌های فردا',  value: formatNumber(d?.stats.tomorrow_appointments ?? 0), icon: ClockIcon,        color: 'var(--info)',    bg: 'var(--info-bg)'    },
  ];

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const canViewAppts = (d?.permissions as any)?.resources?.appointments?.view ?? false;

  return (
    <div className="fade-in">
      <div className="card-title-row" style={{ marginBottom: 'var(--gap)' }}>
        <div>
          <h1 className="section-title">داشبورد منشی</h1>
          <div className="muted" style={{ fontSize: 13, marginTop: 2 }}>{today} · منشی دکتر {d?.doctor.name ?? ''}</div>
        </div>
        <button className="btn ghost sm" onClick={() => q.refetch()}>
          <ArrowPathIcon style={{ width: 14, height: 14 }} />
          به‌روزرسانی
        </button>
      </div>

      <div className="card card-pad" style={{ marginBottom: 'var(--gap)', display: 'flex', alignItems: 'center', gap: 16 }}>
        <AvatarEl initials={(d?.doctor.name ?? 'D').slice(0, 1)} hue={256} size="lg" />
        <div>
          <div style={{ fontWeight: 700, fontSize: 16 }}>دکتر {d?.doctor.name ?? '—'}</div>
          {d?.doctor.degree && <div className="muted" style={{ fontSize: 13, marginTop: 3 }}>{d.doctor.degree}</div>}
        </div>
        <div style={{ marginRight: 'auto', display: 'flex', gap: 8 }}>
          <span className={`badge ${canViewAppts ? 'green' : 'gray'}`}>
            <span className="bdot" />{canViewAppts ? 'دسترسی نوبت‌ها: فعال' : 'دسترسی نوبت‌ها: غیرفعال'}
          </span>
        </div>
      </div>

      <div className="stat-grid" style={{ gridTemplateColumns: 'repeat(2, 1fr)' }}>
        {kpiCards.map(c => (
          <div key={c.label} className="stat">
            <div className="ico" style={{ background: c.bg, color: c.color }}>
              <c.icon style={{ width: 21, height: 21 }} />
            </div>
            <div className="lbl">{c.label}</div>
            <div className="val">{c.value}</div>
          </div>
        ))}
      </div>

      {canViewAppts && (
        <div className="card card-pad" style={{ marginTop: 'var(--gap)' }}>
          <div className="card-title-row">
            <h3 style={{ fontSize: 16 }}>نوبت‌های امروز</h3>
            <Link to="/admin/appointments" className="link">همه نوبت‌ها</Link>
          </div>
          <TodayAppointmentsTable appts={d?.today_appointments ?? []} loading={q.isLoading} />
        </div>
      )}

      {!canViewAppts && (
        <div className="card card-pad" style={{ marginTop: 'var(--gap)', textAlign: 'center', padding: '2rem' }}>
          <UserIcon style={{ width: 40, height: 40, color: 'var(--text-3)', margin: '0 auto 1rem' }} />
          <p className="muted" style={{ fontSize: 13.5 }}>دسترسی مشاهده نوبت‌ها برای این منشی فعال نیست.</p>
        </div>
      )}
    </div>
  );
}

// ── Main Dispatcher ───────────────────────────────────────────────────────

export default function DashboardPage() {
  const primaryRole = useAuthStore(s => s.primaryRole);

  if (!primaryRole) return <LoadingSkeleton />;
  if (primaryRole === 'admin')     return <AdminDashboard />;
  if (primaryRole === 'clinic')    return <ClinicDashboard />;
  if (primaryRole === 'doctor')    return <DoctorDashboard />;
  if (primaryRole === 'secretary') return <SecretaryDashboard />;

  return <AdminDashboard />;
}