توضیحات

</div>
          <div className="form-row" style={{ marginTop: 12 }}>
            <label>توضیحات فوتر</label>
            <textarea {...register('footer_description')} rows={2} className="input" style={{ height: 'auto', resize: 'none' }} />
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginTop: 12 }}>
            <div className="form-row">
              <label>ترتیب نمایش</label>
              <input {...register('weight')} type="number" dir="ltr" className="input" placeholder="0" />
            </div>
            <div className="form-row">
              <label>وضعیت</label>
              <Controller name="status" control={control} render={({ field }) => (
                <SearchableSelect options={[{ value: '1', label: 'فعال' }, { value: '0', label: 'غیرفعال' }]} value={field.value ?? '1'} onChange={(v) => field.onChange(v ?? '1')} isClearable={false} />
              )} />
            </div>
          </div>
        </form>
      </Modal>

<ConfirmDialog open={!!deleteTarget} title="حذف شهر" message={`آیا از حذف "${deleteTarget?.name}" اطمینان دارید؟`} confirmLabel="حذف" danger loading={deleteMutation.isPending}
        onConfirm={() => deleteTarget && deleteMutation.mutate(deleteTarget)} onCancel={() => setDeleteTarget(null)} />
    </>
  );
}

// ── Specialties Tab ────────────────────────────────────────────────────────────

const specialtySchema = z.object({
  name:      z.string().min(1, 'نام الزامی است'),
  parent_id: z.number().nullable().optional(),
  weight:    z.string().optional(),
  status:    z.string().optional(),
});
type SpecialtyForm = z.infer<typeof specialtySchema>;

function SpecialtiesTab() {
  const qc = useQueryClient();
  const [page, setPage]               = useState(1);
  const [search, setSearch]           = useState('');
  const [addOpen, setAddOpen]         = useState(false);
  const [editTarget, setEditTarget]   = useState<SpecialtyFull | null>(null);
  const [deleteTarget, setDeleteTarget] = useState<SpecialtyFull | null>(null);

const { data, isLoading } = useQuery({
    queryKey: ['admin-specialties', page, search],
    queryFn: () => api.get<PaginatedResponse<SpecialtyFull>>(`/api/v1/admin/specialties?page=${page}&limit=20&search=${encodeURIComponent(search)}`),
  });

const { data: rootData } = useQuery({
    queryKey: ['admin-specialties-roots'],
    queryFn: () => api.get<PaginatedResponse<SpecialtyFull>>('/api/v1/admin/specialties?limit=100'),
    staleTime: 5 * 60 * 1000,
  });

const items = data?.data ?? [];
  const total = data?.meta?.totalRecords ?? 0;
  const rootItems = (rootData?.data ?? []).filter((s) => s.parent_id === null);
  const parentMap = Object.fromEntries((rootData?.data ?? []).map((s) => [s.id, s.name]));

const { register, handleSubmit, reset, control, formState: { errors } } = useForm<SpecialtyForm>({
    resolver: zodResolver(specialtySchema),
    defaultValues: { status: '1', weight: '0' },
  });

const closeModal = () => { setAddOpen(false); setEditTarget(null); reset({ status: '1', weight: '0' }); };

const openEdit = (s: SpecialtyFull) => {
    setEditTarget(s);
    reset({ name: s.name, weight: String(s.weight), status: String(s.status), parent_id: s.parent_id ?? null });
  };

const parentOptions = rootItems.map((s) => ({ value: s.id, label: s.name }));

const columns: Column<SpecialtyFull>[] = [
    { key: 'id',        header: 'شناسه',  render: (s) => <span className="muted" style={{ fontFamily: 'monospace', fontSize: 12 }}>{s.id}</span> },
    { key: 'name',      header: 'نام',    render: (s) => <b>{s.name}</b> },
    { key: 'slug',      header: 'slug',   render: (s) => <span className="muted" style={{ fontFamily: 'monospace', fontSize: 12 }}>{s.slug}</span> },
    { key: 'parent_id', header: 'والد',   render: (s) => s.parent_id ? <span className="chip">{parentMap[s.parent_id] ?? `#${s.parent_id}`}</span> : <span className="muted">—</span> },
    { key: 'weight',    header: 'ترتیب',  render: (s) => <span className="muted">{s.weight}</span> },
    { key: 'status',    header: 'وضعیت',  render: (s) => <SBadge status={s.status} /> },
  ];

return (
    <>
      <TabActions label="افزودن تخصص" onClick={() => { reset({ status: '1', weight: '0' }); setAddOpen(true); }} />
      <DataTable<SpecialtyFull> columns={columns} data={items} loading={isLoading} searchValue={search} onSearchChange={(v) => { setSearch(v); setPage(1); }} searchPlaceholder="جستجو در تخصص‌ها..." emptyMessage="هیچ تخصصی یافت نشد"
        actions={(s) => (
          <>
            <button onClick={() => openEdit(s)} className="mini-btn" title="ویرایش"><PencilIcon style={{ width: 14, height: 14 }} /></button>
            <button onClick={() => setDeleteTarget(s)} className="mini-btn danger" title="حذف"><TrashIcon style={{ width: 14, height: 14 }} /></button>
          </>
        )}
      />
      {total > 20 && <div style={{ padding: 'var(--card-pad)' }}><Pagination page={page} total={total} limit={20} onPageChange={setPage} /></div>}

<Modal open={addOpen || !!editTarget} title={editTarget ? `ویرایش — ${editTarget.name}` : 'افزودن تخصص'} size="sm" onClose={closeModal}
        footer={<><button onClick={closeModal} className="btn ghost sm">لغو</button><button form="specialty-form" type="submit" disabled={createMutation.isPending || updateMutation.isPending} className="btn primary sm">{(createMutation.isPending || updateMutation.isPending) ? 'در حال ذخیره...' : (editTarget ? 'ذخیره' : 'افزودن')}</button></>}
      >
        <form id="specialty-form" onSubmit={handleSubmit((d) => editTarget ? updateMutation.mutate({ id: editTarget.id, d }) : createMutation.mutate(d))}>
          <div className="form-row">
            <label>نام <span style={{ color: 'var(--danger)' }}>*</span></label>
            <input {...register('name')} className="input" placeholder="نام تخصص" />
            {errors.name && <p className="err-text">{errors.name.message}</p>}
          </div>
          <div className="form-row" style={{ marginTop: 12 }}>
            <label>تخصص والد</label>
            <Controller name="parent_id" control={control} render={({ field }) => (
              <SearchableSelect options={parentOptions} value={field.value ?? null} onChange={(v) => field.onChange(v as number | null)} placeholder="-- بدون والد --" isClearable noOptionsMessage="موردی یافت نشد" />
            )} />
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginTop: 12 }}>
            <div className="form-row">
              <label>ترتیب نمایش</label>
              <input {...register('weight')} type="number" dir="ltr" className="input" placeholder="0" />
            </div>
            <div className="form-row">
              <label>وضعیت</label>
              <Controller name="status" control={control} render={({ field }) => (
                <SearchableSelect options={[{ value: '1', label: 'فعال' }, { value: '0', label: 'غیرفعال' }]} value={field.value ?? '1'} onChange={(v) => field.onChange(v ?? '1')} isClearable={false} />
              )} />
            </div>
          </div>
        </form>
      </Modal>

<ConfirmDialog open={!!deleteTarget} title="حذف تخصص" message={`آیا از حذف "${deleteTarget?.name}" اطمینان دارید؟`} confirmLabel="حذف" danger loading={deleteMutation.isPending}
        onConfirm={() => deleteTarget && deleteMutation.mutate(deleteTarget)} onCancel={() => setDeleteTarget(null)} />
    </>
  );
}

// ── DoctorServices Tab ─────────────────────────────────────────────────────────

const serviceSchema = z.object({
  name:         z.string().min(1, 'نام الزامی است'),
  specialty_id: z.number().nullable().optional(),
  weight:       z.string().optional(),
  status:       z.string().optional(),
});
type ServiceForm = z.infer<typeof serviceSchema>;

function DoctorServicesTab() {
  const qc = useQueryClient();
  const [page, setPage]               = useState(1);
  const [search, setSearch]           = useState('');
  const [addOpen, setAddOpen]         = useState(false);
  const [editTarget, setEditTarget]   = useState<DoctorService | null>(null);
  const [deleteTarget, setDeleteTarget] = useState<DoctorService | null>(null);

const { data, isLoading } = useQuery({
    queryKey: ['admin-doctor-services', page, search],
    queryFn: () => api.get<PaginatedResponse<DoctorService>>(`/api/v1/admin/doctor-services?page=${page}&limit=20&search=${encodeURIComponent(search)}`),
  });

const specialtiesQuery = useQuery({
    queryKey: ['admin-specialties-select'],
    queryFn: () => api.get<PaginatedResponse<SpecialtyFull>>('/api/v1/admin/specialties?limit=100'),
    staleTime: 60_000,
  });
  const specialtyOptions = (specialtiesQuery.data?.data ?? []).map((s) => ({ value: s.id, label: s.name }));
  const specialtyMap = Object.fromEntries((specialtiesQuery.data?.data ?? []).map((s) => [s.id, s.name]));

const items = data?.data ?? [];
  const total = data?.meta?.totalRecords ?? 0;

const { register, handleSubmit, reset, control, formState: { errors } } = useForm<ServiceForm>({
    resolver: zodResolver(serviceSchema),
    defaultValues: { status: '1', weight: '0' },
  });

const closeModal = () => { setAddOpen(false); setEditTarget(null); reset({ status: '1', weight: '0' }); };

const openEdit = (s: DoctorService) => {
    setEditTarget(s);
    reset({ name: s.name, weight: String(s.weight), status: String(s.status), specialty_id: s.specialty_id ?? null });
  };

const columns: Column<DoctorService>[] = [
    { key: 'id',           header: 'شناسه',    render: (s) => <span className="muted" style={{ fontFamily: 'monospace', fontSize: 12 }}>{s.id}</span> },
    { key: 'name',         header: 'نام',      render: (s) => <b>{s.name}</b> },
    { key: 'specialty_id', header: 'تخصص',     render: (s) => s.specialty_id ? <span className="badge violet"><span className="bdot" />{specialtyMap[s.specialty_id] ?? `#${s.specialty_id}`}</span> : <span className="muted">—</span> },
    { key: 'weight',       header: 'ترتیب',    render: (s) => <span className="muted">{s.weight}</span> },
    { key: 'status',       header: 'وضعیت',    render: (s) => <SBadge status={s.status} /> },
  ];

return (
    <>
      <TabActions label="افزودن خدمت" onClick={() => { reset({ status: '1', weight: '0' }); setAddOpen(true); }} />
      <DataTable<DoctorService> columns={columns} data={items} loading={isLoading} searchValue={search} onSearchChange={(v) => { setSearch(v); setPage(1); }} searchPlaceholder="جستجو در خدمات..." emptyMessage="هیچ خدمتی یافت نشد"
        actions={(s) => (
          <>
            <button onClick={() => openEdit(s)} className="mini-btn" title="ویرایش"><PencilIcon style={{ width: 14, height: 14 }} /></button>
            <button onClick={() => setDeleteTarget(s)} className="mini-btn danger" title="حذف"><TrashIcon style={{ width: 14, height: 14 }} /></button>
          </>
        )}
      />
      {total > 20 && <div style={{ padding: 'var(--card-pad)' }}><Pagination page={page} total={total} limit={20} onPageChange={setPage} /></div>}

<Modal open={addOpen || !!editTarget} title={editTarget ? `ویرایش — ${editTarget.name}` : 'افزودن خدمت'} size="sm" onClose={closeModal}
        footer={<><button onClick={closeModal} className="btn ghost sm">لغو</button><button form="service-form" type="submit" disabled={createMutation.isPending || updateMutation.isPending} className="btn primary sm">{(createMutation.isPending || updateMutation.isPending) ? 'در حال ذخیره...' : (editTarget ? 'ذخیره' : 'افزودن')}</button></>}
      >
        <form id="service-form" onSubmit={handleSubmit((d) => editTarget ? updateMutation.mutate({ id: editTarget.id, d }) : createMutation.mutate(d))}>
          <div className="form-row">
            <label>نام <span style={{ color: 'var(--danger)' }}>*</span></label>
            <input {...register('name')} className="input" placeholder="نام خدمت" />
            {errors.name && <p className="err-text">{errors.name.message}</p>}
          </div>
          <div className="form-row" style={{ marginTop: 12 }}>
            <label>تخصص مرتبط</label>
            <Controller name="specialty_id" control={control} render={({ field }) => (
              <SearchableSelect options={specialtyOptions} value={field.value ?? null} onChange={(v) => field.onChange(v as number | null)} placeholder="-- انتخاب تخصص --" isClearable isLoading={specialtiesQuery.isLoading} noOptionsMessage="تخصصی یافت نشد" />
            )} />
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginTop: 12 }}>
            <div className="form-row">
              <label>ترتیب نمایش</label>
              <input {...register('weight')} type="number" dir="ltr" className="input" placeholder="0" />
            </div>
            <div className="form-row">
              <label>وضعیت</label>
              <Controller name="status" control={control} render={({ field }) => (
                <SearchableSelect options={[{ value: '1', label: 'فعال' }, { value: '0', label: 'غیرفعال' }]} value={field.value ?? '1'} onChange={(v) => field.onChange(v ?? '1')} isClearable={false} />
              )} />
            </div>
          </div>
        </form>
      </Modal>

<ConfirmDialog open={!!deleteTarget} title="حذف خدمت" message={`آیا از حذف "${deleteTarget?.name}" اطمینان دارید؟`} confirmLabel="حذف" danger loading={deleteMutation.isPending}
        onConfirm={() => deleteTarget && deleteMutation.mutate(deleteTarget)} onCancel={() => setDeleteTarget(null)} />
    </>
  );
}

// ── Insurances Tab ─────────────────────────────────────────────────────────────

const insuranceSchema = z.object({
  name:   z.string().min(1, 'نام الزامی است'),
  type:   z.enum(['basic', 'supplementary']),
  status: z.string().optional(),
});
type InsuranceForm = z.infer<typeof insuranceSchema>;

function InsurancesTab() {
  const qc = useQueryClient();
  const [page, setPage]               = useState(1);
  const [search, setSearch]           = useState('');
  const [addOpen, setAddOpen]         = useState(false);
  const [editTarget, setEditTarget]   = useState<Insurance | null>(null);
  const [deleteTarget, setDeleteTarget] = useState<Insurance | null>(null);
  const [logoUrl, setLogoUrl]         = useState<string | null>(null);
  const [uploadTarget, setUploadTarget] = useState<number | null>(null);

const { data, isLoading } = useQuery({
    queryKey: ['admin-insurances', page, search],
    queryFn: () => api.get<PaginatedResponse<Insurance>>(`/api/v1/admin/insurances?page=${page}&limit=20&search=${encodeURIComponent(search)}`),
  });

const items = data?.data ?? [];
  const total = data?.meta?.totalRecords ?? 0;

const { register, handleSubmit, reset, control, formState: { errors } } = useForm<InsuranceForm>({
    resolver: zodResolver(insuranceSchema),
    defaultValues: { status: '1', type: 'basic' },
  });

const closeModal = () => { setAddOpen(false); setEditTarget(null); setLogoUrl(null); reset({ status: '1', type: 'basic' }); };

const openEdit = (i: Insurance) => {
    setEditTarget(i);
    setLogoUrl(i.logo_url ?? null);
    setUploadTarget(i.id);
    reset({ name: i.name, type: i.type, status: String(i.status) });
  };

const columns: Column<Insurance>[] = [
    { key: 'id',     header: 'شناسه',  render: (i) => <span className="muted" style={{ fontFamily: 'monospace', fontSize: 12 }}>{i.id}</span> },
    { key: 'name',   header: 'نام',    render: (i) => (
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        {i.logo_url ? (
          <img src={i.logo_url} alt={i.name} style={{ width: 32, height: 32, objectFit: 'contain', borderRadius: 8, border: '1px solid var(--border)', background: 'var(--surface)', padding: 2, flexShrink: 0 }} />
        ) : (
          <div style={{ width: 32, height: 32, borderRadius: 8, border: '1px dashed var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <PhotoIcon style={{ width: 14, height: 14, color: 'var(--text-3)' }} />
          </div>
        )}
        <b>{i.name}</b>
      </div>
    )},
    { key: 'type',   header: 'نوع',    render: (i) => <span className={`badge ${i.type === 'basic' ? 'green' : 'blue'}`}><span className="bdot" />{i.type === 'basic' ? 'پایه' : 'تکمیلی'}</span> },
    { key: 'status', header: 'وضعیت',  render: (i) => <SBadge status={i.status} /> },
  ];

return (
    <>
      <TabActions label="افزودن بیمه" onClick={() => { reset({ status: '1', type: 'basic' }); setLogoUrl(null); setUploadTarget(null); setAddOpen(true); }} />
      <DataTable<Insurance> columns={columns} data={items} loading={isLoading} searchValue={search} onSearchChange={(v) => { setSearch(v); setPage(1); }} searchPlaceholder="جستجو در بیمه‌ها..." emptyMessage="هیچ بیمه‌ای یافت نشد"
        actions={(i) => (
          <>
            <button onClick={() => openEdit(i)} className="mini-btn" title="ویرایش"><PencilIcon style={{ width: 14, height: 14 }} /></button>
            <button onClick={() => setDeleteTarget(i)} className="mini-btn danger" title="حذف"><TrashIcon style={{ width: 14, height: 14 }} /></button>
          </>
        )}
      />
      {total > 20 && <div style={{ padding: 'var(--card-pad)' }}><Pagination page={page} total={total} limit={20} onPageChange={setPage} /></div>}

<Modal open={addOpen || !!editTarget} title={editTarget ? `ویرایش — ${editTarget.name}` : 'افزودن بیمه'} size="sm" onClose={closeModal}
        footer={<><button onClick={closeModal} className="btn ghost sm">لغو</button><button form="insurance-form" type="submit" disabled={createMutation.isPending || updateMutation.isPending} className="btn primary sm">{(createMutation.isPending || updateMutation.isPending) ? 'در حال ذخیره...' : (editTarget ? 'ذخیره' : 'افزودن')}</button></>}
      >
        <form id="insurance-form" onSubmit={handleSubmit((d) => editTarget ? updateMutation.mutate({ id: editTarget.id, d }) : createMutation.mutate(d))}>
          <div className="form-row">
            <label>لگو</label>
            <LogoUploadField
              value={logoUrl}
              onChange={setLogoUrl}
              uploadUrl={uploadTarget ? `/api/v1/admin/insurance/${uploadTarget}/upload-logo` : '/api/v1/admin/insurance/0/upload-logo'}
            />
          </div>
          <div className="form-row" style={{ marginTop: 12 }}>
            <label>نام <span style={{ color: 'var(--danger)' }}>*</span></label>
            <input {...register('name')} className="input" placeholder="نام بیمه" />
            {errors.name && <p className="err-text">{errors.name.message}</p>}
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginTop: 12 }}>
            <div className="form-row">
              <label>نوع <span style={{ color: 'var(--danger)' }}>*</span></label>
              <Controller name="type" control={control} render={({ field }) => (
                <SearchableSelect options={[{ value: 'basic', label: 'بیمه پایه' }, { value: 'supplementary', label: 'بیمه تکمیلی' }]} value={field.value} onChange={(v) => field.onChange(v ?? 'basic')} isClearable={false} />
              )} />
            </div>
            <div className="form-row">
              <label>وضعیت</label>
              <Controller name="status" control={control} render={({ field }) => (
                <SearchableSelect options={[{ value: '1', label: 'فعال' }, { value: '0', label: 'غیرفعال' }]} value={field.value ?? '1'} onChange={(v) => field.onChange(v ?? '1')} isClearable={false} />
              )} />
            </div>
          </div>
        </form>
      </Modal>

<ConfirmDialog open={!!deleteTarget} title="حذف بیمه" message={`آیا از حذف "${deleteTarget?.name}" اطمینان دارید؟`} confirmLabel="حذف" danger loading={deleteMutation.isPending}
        onConfirm={() => deleteTarget && deleteMutation.mutate(deleteTarget)} onCancel={() => setDeleteTarget(null)} />
    </>
  );
}

// ── Tags Tab ───────────────────────────────────────────────────────────────────

const tagSchema = z.object({
  name:   z.string().min(1, 'نام الزامی است'),
  status: z.string().optional(),
});
type TagForm = z.infer<typeof tagSchema>;

function TagsTab() {
  const qc = useQueryClient();
  const [page, setPage]               = useState(1);
  const [search, setSearch]           = useState('');
  const [addOpen, setAddOpen]         = useState(false);
  const [editTarget, setEditTarget]   = useState<Tag | null>(null);
  const [deleteTarget, setDeleteTarget] = useState<Tag | null>(null);

const { data, isLoading } = useQuery({
    queryKey: ['admin-tags', page, search],
    queryFn: () => api.get<PaginatedResponse<Tag>>(`/api/v1/admin/tags?page=${page}&limit=20&search=${encodeURIComponent(search)}`),
  });

const items = data?.data ?? [];
  const total = data?.meta?.totalRecords ?? 0;

const { register, handleSubmit, reset, formState: { errors } } = useForm<TagForm>({
    resolver: zodResolver(tagSchema),
    defaultValues: { status: '1' },
  });

const closeModal = () => { setAddOpen(false); setEditTarget(null); reset({ status: '1' }); };

const openEdit = (t: Tag) => {
    setEditTarget(t);
    reset({ name: t.name, status: String(t.status) });
  };

const columns: Column<Tag>[] = [
    { key: 'id',     header: 'شناسه',  render: (t) => <span className="muted" style={{ fontFamily: 'monospace', fontSize: 12 }}>{t.id}</span> },
    { key: 'name',   header: 'نام',    render: (t) => <span className="chip">{t.name}</span> },
    { key: 'slug',   header: 'slug',   render: (t) => <span className="muted" style={{ fontFamily: 'monospace', fontSize: 12 }}>{t.slug}</span> },
    { key: 'status', header: 'وضعیت',  render: (t) => <SBadge status={t.status} /> },
  ];

return (
    <>
      <TabActions label="افزودن تگ" onClick={() => { reset({ status: '1' }); setAddOpen(true); }} />
      <DataTable<Tag> columns={columns} data={items} loading={isLoading} searchValue={search} onSearchChange={(v) => { setSearch(v); setPage(1); }} searchPlaceholder="جستجو در تگ‌ها..." emptyMessage="هیچ تگی یافت نشد"
        actions={(t) => (
          <>
            <button onClick={() => openEdit(t)} className="mini-btn" title="ویرایش"><PencilIcon style={{ width: 14, height: 14 }} /></button>
            <button onClick={() => setDeleteTarget(t)} className="mini-btn danger" title="حذف"><TrashIcon style={{ width: 14, height: 14 }} /></button>
          </>
        )}
      />
      {total > 20 && <div style={{ padding: 'var(--card-pad)' }}><Pagination page={page} total={total} limit={20} onPageChange={setPage} /></div>}

<Modal open={addOpen || !!editTarget} title={editTarget ? `ویرایش — ${editTarget.name}` : 'افزودن تگ'} size="sm" onClose={closeModal}
        footer={<><button onClick={closeModal} className="btn ghost sm">لغو</button><button form="tag-form" type="submit" disabled={createMutation.isPending || updateMutation.isPending} className="btn primary sm">{(createMutation.isPending || updateMutation.isPending) ? 'در حال ذخیره...' : (editTarget ? 'ذخیره' : 'افزودن')}</button></>}
      >
        <form id="tag-form" onSubmit={handleSubmit((d) => editTarget ? updateMutation.mutate({ id: editTarget.id, d }) : createMutation.mutate(d))}>
          <div className="form-row">
            <label>نام <span style={{ color: 'var(--danger)' }}>*</span></label>
            <input {...register('name')} className="input" placeholder="نام تگ" />
            {errors.name && <p className="err-text">{errors.name.message}</p>}
          </div>
        </form>
      </Modal>

<ConfirmDialog open={!!deleteTarget} title="حذف تگ" message={`آیا از حذف "${deleteTarget?.name}" اطمینان دارید؟`} confirmLabel="حذف" danger loading={deleteMutation.isPending}
        onConfirm={() => deleteTarget && deleteMutation.mutate(deleteTarget)} onCancel={() => setDeleteTarget(null)} />
    </>
  );
}

// ── Main Page ──────────────────────────────────────────────────────────────────

export default function CategoriesPage() {
  const [activeTab, setActiveTab] = useState<TabKey>('provinces');
  const tab = TABS.find((t) => t.key === activeTab)!;

return (
    <div className="fade-in">
      <div className="card-title-row" style={{ marginBottom: 'var(--gap)' }}>
        <div>
          <h1 className="section-title">دسته‌بندی‌ها</h1>
          <div className="muted">{tab.label}</div>
        </div>
      </div>

<div className="card">
        {/* Tab bar */}
        <div style={{ display: 'flex', overflowX: 'auto', borderBottom: '1px solid var(--border)', padding: '0 var(--card-pad)' }}>
          {TABS.map((t) => {
            const Icon = t.icon;
            const isActive = t.key === activeTab;
            return (
              <button
                key={t.key}
                onClick={() => setActiveTab(t.key)}
                style={{
                  display: 'flex', alignItems: 'center', gap: 6,
                  padding: '14px 14px', whiteSpace: 'nowrap',
                  fontSize: 13, fontWeight: 500,
                  border: 'none', background: 'none', cursor: 'pointer',
                  borderBottom: `2px solid ${isActive ? 'var(--primary)' : 'transparent'}`,
                  color: isActive ? 'var(--primary)' : 'var(--text-2)',
                  marginBottom: -1, transition: 'color .15s',
                }}
              >
                <span style={{
                  width: 26, height: 26, borderRadius: 8, display: 'grid', placeItems: 'center',
                  background: isActive ? `oklch(0.62 0.15 ${t.hue} / 0.12)` : 'var(--surface-2)',
                  color: isActive ? `oklch(0.55 0.15 ${t.hue})` : 'var(--text-3)',
                  flexShrink: 0, transition: 'all .15s',
                }}>
                  <Icon style={{ width: 14, height: 14 }} />
                </span>
                {t.label}
              </button>
            );
          })}
        </div>

{/* Content */}
        {activeTab === 'provinces'       && <ProvincesTab />}
        {activeTab === 'cities'          && <CitiesTab />}
        {activeTab === 'specialties'     && <SpecialtiesTab />}
        {activeTab === 'doctor_services' && <DoctorServicesTab />}
        {activeTab === 'insurances'      && <InsurancesTab />}
        {activeTab === 'tags'            && <TagsTab />}
      </div>
    </div>
  );
}