import React, { useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import {
  PlusIcon, PencilIcon, TrashIcon, WrenchScrewdriverIcon, BanknotesIcon,
  ShieldCheckIcon, MagnifyingGlassIcon, EyeIcon, EyeSlashIcon,
  EllipsisHorizontalIcon, CheckCircleIcon, ClockIcon,
} from '@heroicons/react/24/outline';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { toast } from 'sonner';
import { api } from '../lib/api';
import type { ApiResponse } from '../lib/api';
import type { ServiceSection, ServiceItem, ClinicStaff } from '../types';
import { formatRial, rialToToman, tomanToRial } from '../lib/utils';
import Modal from '../components/ui/Modal';
import PriceInput from '../components/ui/PriceInput';
import ConfirmDialog from '../components/ui/ConfirmDialog';
import PageHeader from '../components/ui/PageHeader';
import ServiceTariffModal from '../components/ServiceTariffModal';
import ServiceInsuranceModal from '../components/ServiceInsuranceModal';
import SearchableSelect from '../components/ui/SearchableSelect';
import FeatureGate from '../components/ui/FeatureGate';

const sectionSchema = z.object({ name: z.string().min(1, 'نام بخش الزامی است') });
const itemSchema = z.object({
  name:                  z.string().min(1, 'نام سرویس الزامی است'),
  price_rials:           z.coerce.number().min(0, 'مبلغ نمی‌تواند منفی باشد'),
  staff_uuid:            z.string().optional(),
  insurance_covered:     z.boolean().optional(),
  insurance_price_rials: z.coerce.number().min(0).optional(),
});
type SectionForm = z.infer<typeof sectionSchema>;
type ItemForm    = z.infer<typeof itemSchema>;

const EMPTY_SECTIONS: ServiceSection[] = [];
const EMPTY_ITEMS: ServiceItem[] = [];

function Avatar({ name }: { name: string }) {
  return (
    <div style={{
      width: 26, height: 26, borderRadius: '50%',
      background: 'linear-gradient(145deg, oklch(0.62 0.15 162), oklch(0.48 0.16 162))',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontSize: 11, fontWeight: 700, color: '#fff', flexShrink: 0,
    }}>
      {name.charAt(0)}
    </div>
  );
}

function SrvRow({ label, value, strong, danger }: { label: string; value: string; strong?: boolean; danger?: boolean }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 8, padding: '3px 0' }}>
      <span style={{ fontSize: 12, color: 'var(--text-3)', flexShrink: 0 }}>{label}:</span>
      <span
        style={{
          fontSize: 14,
          fontWeight: strong ? 800 : 500,
          color: danger ? 'var(--danger)' : strong ? 'var(--primary)' : 'var(--text-2)',
          textAlign: 'left',
        }}
      >
        {value}
      </span>
    </div>
  );
}

function ClinicServicesPageInner() {
  const qc = useQueryClient();

  const [selectedSection, setSelectedSection] = useState<ServiceSection | null>(null);
  const [sectionModal, setSectionModal] = useState<'create' | ServiceSection | null>(null);
  const [deleteSection, setDeleteSection] = useState<ServiceSection | null>(null);
  const [itemModal, setItemModal] = useState<'create' | ServiceItem | null>(null);
  const [toggleItem, setToggleItem] = useState<ServiceItem | null>(null);
  const [tariffItem, setTariffItem] = useState<ServiceItem | null>(null);
  const [insuranceItem, setInsuranceItem] = useState<ServiceItem | null>(null);
  const [search, setSearch] = useState('');
  const [showInactive, setShowInactive] = useState(true);
  const [menuOpen, setMenuOpen] = useState<string | null>(null);

  const { data: sectionsData, isLoading: sectionsLoading } = useQuery<ApiResponse<ServiceSection[]>>({
    queryKey: ['service-sections'],
    queryFn: () => api.get('/api/v1/service-sections'),
  });

  const { data: itemsData, isLoading: itemsLoading } = useQuery<ApiResponse<ServiceItem[]>>({
    queryKey: ['service-items', selectedSection?.uuid],
    queryFn: () => api.get(`/api/v1/service-items/${selectedSection!.uuid}`),
    enabled: !!selectedSection,
  });

  const { data: staffData } = useQuery<ApiResponse<ClinicStaff[]>>({
    queryKey: ['staff'],
    queryFn: () => api.get('/api/v1/staff'),
  });

  const sections = sectionsData?.data ?? EMPTY_SECTIONS;
  const allItems = itemsData?.data ?? EMPTY_ITEMS;
  const allStaff = staffData?.data ?? [];

  const editingStaff = itemModal && typeof itemModal === 'object' ? itemModal.staff : null;
  const staffOptions = allStaff
    .filter((s) => s.active || s.uuid === editingStaff?.uuid)
    .map((s) => ({
      value: s.uuid,
      label: s.active ? s.full_name : `${s.full_name} (غیرفعال)`,
    }));

  const items = allItems.filter((it) => {
    if (!showInactive && !it.active) return false;
    if (search.trim() && !it.name.includes(search.trim())) return false;
    return true;
  });
  const activeCount = allItems.filter((i) => i.active).length;

  const sectionForm = useForm<SectionForm>({ resolver: zodResolver(sectionSchema) });
  const itemForm    = useForm<ItemForm>({ resolver: zodResolver(itemSchema) });

  const createSection = useMutation({
    mutationFn: (body: SectionForm) => api.post('/api/v1/service-section', body),
    onSuccess: () => { qc.invalidateQueries({ queryKey: ['service-sections'] }); setSectionModal(null); sectionForm.reset(); toast.success('بخش ایجاد شد'); },
    onError: (e: any) => toast.error(e.message),
  });

  const editSection = useMutation({
    mutationFn: ({ uuid, body }: { uuid: string; body: SectionForm }) =>
      api.patch(`/api/v1/service-section/${uuid}`, body),
    onSuccess: () => { qc.invalidateQueries({ queryKey: ['service-sections'] }); setSectionModal(null); toast.success('بخش ویرایش شد'); },
    onError: (e: any) => toast.error(e.message),
  });

  const delSection = useMutation({
    mutationFn: (uuid: string) => api.delete(`/api/v1/service-section/${uuid}`),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ['service-sections'] });
      if (selectedSection?.uuid === deleteSection?.uuid) setSelectedSection(null);
      setDeleteSection(null);
      toast.success('بخش حذف شد');
    },
    onError: (e: any) => { toast.error(e.message); setDeleteSection(null); },
  });

  const createItem = useMutation({
    mutationFn: (body: ItemForm & { section_uuid: string }) => api.post('/api/v1/service-item', {
      ...body,
      price_rials: tomanToRial(body.price_rials),
      insurance_price_rials: tomanToRial(body.insurance_price_rials ?? 0),
    }),
    onSuccess: () => { qc.invalidateQueries({ queryKey: ['service-items', selectedSection?.uuid] }); setItemModal(null); itemForm.reset(); toast.success('سرویس ایجاد شد'); },
    onError: (e: any) => toast.error(e.message),
  });

  const editItem = useMutation({
    mutationFn: ({ uuid, body }: { uuid: string; body: ItemForm }) =>
      api.patch(`/api/v1/service-item/${uuid}`, {
        ...body,
        price_rials: tomanToRial(body.price_rials),
        insurance_price_rials: tomanToRial(body.insurance_price_rials ?? 0),
      }),
    onSuccess: () => { qc.invalidateQueries({ queryKey: ['service-items', selectedSection?.uuid] }); setItemModal(null); toast.success('سرویس ویرایش شد'); },
    onError: (e: any) => toast.error(e.message),
  });

  const toggleActive = useMutation({
    mutationFn: ({ uuid, active }: { uuid: string; active: boolean }) =>
      api.patch(`/api/v1/service-item/${uuid}`, { active }),
    onSuccess: (_d, v) => {
      qc.invalidateQueries({ queryKey: ['service-items', selectedSection?.uuid] });
      setToggleItem(null);
      toast.success(v.active ? 'سرویس فعال شد' : 'سرویس غیرفعال شد');
    },
    onError: (e: any) => { toast.error(e.message); setToggleItem(null); },
  });

  const openEditSection = (s: ServiceSection) => {
    sectionForm.reset({ name: s.name });
    setSectionModal(s);
  };

  const openEditItem = (item: ServiceItem) => {
    itemForm.reset({
      name: item.name,
      price_rials: rialToToman(item.price_rials),
      staff_uuid: item.staff?.uuid ?? '',
      insurance_covered: item.insurance_covered ?? false,
      insurance_price_rials: rialToToman(item.insurance_price_rials ?? 0),
    });
    setItemModal(item);
  };

  const openCreateItem = () => {
    itemForm.reset({ name: '', price_rials: 0, staff_uuid: '', insurance_covered: false, insurance_price_rials: 0 });
    setItemModal('create');
  };

  return (
    <>
      <PageHeader title="سرویس‌های کلینیک" description="بخش‌ها، سرویس‌ها، تعرفه و پوشش بیمه را مدیریت کنید" />

      <div style={{ display: 'grid', gridTemplateColumns: '288px 1fr', gap: 18, alignItems: 'start' }}>
        {/* ───────── ستون بخش‌ها ───────── */}
        <div className="card" style={{ overflow: 'hidden' }}>
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            padding: '14px 16px', borderBottom: '1px solid var(--border)',
          }}>
            <b style={{ fontSize: 14 }}>بخش‌ها</b>
            <button
              className="btn primary sm"
              style={{ display: 'flex', alignItems: 'center', gap: 4 }}
              onClick={() => { sectionForm.reset({ name: '' }); setSectionModal('create'); }}
            >
              <PlusIcon style={{ width: 14 }} /> جدید
            </button>
          </div>

          <div style={{ padding: 8, display: 'flex', flexDirection: 'column', gap: 4 }}>
            {sectionsLoading ? (
              <div style={{ color: 'var(--text-3)', fontSize: 13, padding: '12px 8px' }}>در حال بارگذاری...</div>
            ) : sections.length === 0 ? (
              <div style={{ padding: '32px 16px', textAlign: 'center', color: 'var(--text-3)' }}>
                <WrenchScrewdriverIcon style={{ width: 30, margin: '0 auto 10px', display: 'block', opacity: 0.4 }} />
                <div style={{ fontSize: 13 }}>بخشی ثبت نشده است</div>
              </div>
            ) : (
              sections.map((s) => {
                const isActive = selectedSection?.uuid === s.uuid;
                return (
                  <div
                    key={s.uuid}
                    className="srv-section-row"
                    style={{
                      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                      padding: '9px 10px', cursor: 'pointer', borderRadius: 9,
                      background: isActive ? 'var(--primary-subtle)' : 'transparent',
                      transition: 'background 0.15s',
                    }}
                    onClick={() => setSelectedSection(s)}
                  >
                    <div style={{ display: 'flex', alignItems: 'center', gap: 9, minWidth: 0 }}>
                      <WrenchScrewdriverIcon style={{
                        width: 16, flexShrink: 0,
                        color: isActive ? 'var(--primary)' : 'var(--text-3)',
                      }} />
                      <span style={{
                        fontSize: 13.5, fontWeight: isActive ? 600 : 500,
                        color: isActive ? 'var(--primary)' : 'var(--text-1)',
                        whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
                      }}>
                        {s.name}
                      </span>
                    </div>
                    <div className="srv-section-actions" style={{ display: 'flex', gap: 2, flexShrink: 0 }} onClick={(e) => e.stopPropagation()}>
                      <button className="btn sm ghost" onClick={() => openEditSection(s)} title="ویرایش">
                        <PencilIcon style={{ width: 13 }} />
                      </button>
                      <button className="btn sm ghost" onClick={() => setDeleteSection(s)} title="حذف">
                        <TrashIcon style={{ width: 13 }} />
                      </button>
                    </div>
                  </div>
                );
              })
            )}
          </div>
        </div>

        {/* ───────── ستون سرویس‌ها ───────── */}
        <div className="card" style={{ overflow: 'hidden' }}>
          {!selectedSection ? (
            <div style={{
              border: '2px dashed var(--border)', borderRadius: 12,
              margin: 18, padding: '64px 0', textAlign: 'center', color: 'var(--text-3)',
            }}>
              <WrenchScrewdriverIcon style={{ width: 42, margin: '0 auto 14px', display: 'block', opacity: 0.35 }} />
              <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-2)' }}>یک بخش انتخاب کنید</div>
              <div style={{ fontSize: 13, marginTop: 4 }}>تا سرویس‌های آن را مشاهده و مدیریت کنید</div>
            </div>
          ) : (
            <>
              <div style={{
                display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12,
                padding: '14px 16px', borderBottom: '1px solid var(--border)', flexWrap: 'wrap',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <b style={{ fontSize: 14 }}>{selectedSection.name}</b>
                  {!itemsLoading && (
                    <span className="badge gray" style={{ fontSize: 11 }}>
                      {activeCount} فعال{allItems.length > activeCount ? ` / ${allItems.length}` : ''}
                    </span>
                  )}
                </div>

                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <div style={{ position: 'relative' }}>
                    <MagnifyingGlassIcon style={{ width: 15, position: 'absolute', insetInlineStart: 9, top: '50%', transform: 'translateY(-50%)', color: 'var(--text-3)', pointerEvents: 'none' }} />
                    <input
                      className="input"
                      placeholder="جستجوی سرویس"
                      value={search}
                      onChange={(e) => setSearch(e.target.value)}
                      style={{ width: 180, paddingInlineStart: 30, height: 34 }}
                    />
                  </div>
                  <button
                    className="btn sm ghost"
                    onClick={() => setShowInactive((v) => !v)}
                    title={showInactive ? 'پنهان‌کردن غیرفعال‌ها' : 'نمایش غیرفعال‌ها'}
                  >
                    {showInactive ? <EyeIcon style={{ width: 15 }} /> : <EyeSlashIcon style={{ width: 15 }} />}
                  </button>
                  <button className="btn primary sm" style={{ display: 'flex', alignItems: 'center', gap: 4 }} onClick={openCreateItem}>
                    <PlusIcon style={{ width: 14 }} /> سرویس جدید
                  </button>
                </div>
              </div>

              {itemsLoading ? (
                <div style={{ color: 'var(--text-3)', fontSize: 13, padding: 16 }}>در حال بارگذاری...</div>
              ) : items.length === 0 ? (
                <div style={{ padding: '52px 0', textAlign: 'center', color: 'var(--text-3)' }}>
                  <PlusIcon style={{ width: 32, margin: '0 auto 12px', display: 'block', opacity: 0.35 }} />
                  <div style={{ fontWeight: 600, color: 'var(--text-2)', marginBottom: 4 }}>
                    {allItems.length === 0 ? 'سرویسی در این بخش وجود ندارد' : 'سرویسی با این فیلتر یافت نشد'}
                  </div>
                  {allItems.length === 0 && (
                    <button className="btn primary sm" style={{ marginTop: 12 }} onClick={openCreateItem}>
                      افزودن سرویس
                    </button>
                  )}
                </div>
              ) : (
                <div style={{ padding: 16, display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(268px, 1fr))', gap: 16 }}>
                  {items.map((item) => {
                    const done = item.active;
                    const menuItemStyle: React.CSSProperties = {
                      display: 'flex', alignItems: 'center', gap: 8, width: '100%',
                      padding: '8px 10px', borderRadius: 8, border: 'none', cursor: 'pointer',
                      background: 'transparent', color: 'var(--text-2)', fontSize: 13,
                      fontFamily: 'inherit', textAlign: 'start', whiteSpace: 'nowrap',
                    };
                    return (
                    <div
                      key={item.uuid}
                      style={{
                        position: 'relative',
                        background: 'var(--surface)',
                        borderRadius: 8,
                        boxShadow: '0 1px 24.8px rgba(204,204,204,0.18)',
                        border: '1px solid var(--border)',
                        padding: 12,
                        opacity: item.active ? 1 : 0.72,
                      }}
                    >
                      {/* ⋮ منوی عملیات — چپ‌بالا (مطابق فیگما) */}
                      <button
                        className="btn sm ghost"
                        style={{ position: 'absolute', top: 6, left: 6, padding: 4, zIndex: 2 }}
                        onClick={() => setMenuOpen(menuOpen === item.uuid ? null : item.uuid)}
                        title="عملیات"
                      >
                        <EllipsisHorizontalIcon style={{ width: 20 }} />
                      </button>
                      {menuOpen === item.uuid && (
                        <>
                          <div style={{ position: 'fixed', inset: 0, zIndex: 40 }} onClick={() => setMenuOpen(null)} />
                          <div
                            style={{
                              position: 'absolute', top: 34, left: 6, zIndex: 41,
                              background: 'var(--surface)', border: '1px solid var(--border)',
                              borderRadius: 'var(--r-sm)', boxShadow: 'var(--shadow)', padding: 6, minWidth: 176,
                              display: 'flex', flexDirection: 'column', gap: 2,
                            }}
                          >
                            <button style={menuItemStyle} onClick={() => { setMenuOpen(null); openEditItem(item); }}>
                              <PencilIcon style={{ width: 15 }} /> ویرایش
                            </button>
                            <button style={menuItemStyle} onClick={() => { setMenuOpen(null); setTariffItem(item); }}>
                              <BanknotesIcon style={{ width: 15 }} /> تعرفه‌های سالانه
                            </button>
                            <button style={menuItemStyle} onClick={() => { setMenuOpen(null); setInsuranceItem(item); }}>
                              <ShieldCheckIcon style={{ width: 15 }} /> پوشش بیمه
                            </button>
                            <button style={menuItemStyle} onClick={() => { setMenuOpen(null); setToggleItem(item); }}>
                              {item.active ? <EyeSlashIcon style={{ width: 15 }} /> : <EyeIcon style={{ width: 15 }} />}
                              {item.active ? ' غیرفعال‌کردن' : ' فعال‌کردن'}
                            </button>
                          </div>
                        </>
                      )}

                      {/* هدر: آیکن وضعیت (راست) + نام و بخش */}
                      <div style={{ position: 'relative', minHeight: 40, paddingRight: 48, paddingLeft: 28 }}>
                        <div
                          style={{
                            position: 'absolute', top: 0, right: 0,
                            width: 36, height: 36, borderRadius: 8, display: 'grid', placeItems: 'center',
                            background: done ? 'var(--success-bg)' : 'var(--warning-bg)',
                            color: done ? 'var(--success)' : 'var(--warning)',
                          }}
                        >
                          {done ? <CheckCircleIcon style={{ width: 20 }} /> : <ClockIcon style={{ width: 20 }} />}
                        </div>
                        <div style={{ textAlign: 'right' }}>
                          <div style={{ fontWeight: 700, fontSize: 14, color: 'var(--text)', lineHeight: 1.5 }}>{item.name}</div>
                          {selectedSection && (
                            <div style={{ fontSize: 12, color: 'var(--text-2)', marginTop: 4 }}>{selectedSection.name}</div>
                          )}
                        </div>
                      </div>

                      <div style={{ height: 1, background: 'var(--border)', margin: '12px 0' }} />

                      <SrvRow label="پرسنل مسئول" value={item.staff ? item.staff.full_name : 'بدون پرسنل'} />
                      <SrvRow label="پوشش بیمه" value={item.insurance_covered ? 'دارد' : 'ندارد'} />

                      <div style={{ height: 1, background: 'var(--border)', margin: '12px 0' }} />

                      <SrvRow label="هزینه" value={formatRial(item.price_rials)} strong />
                      {item.insurance_covered && item.insurance_price_rials != null && (
                        <SrvRow label="سهم بیمار (بیمه)" value={formatRial(item.insurance_price_rials)} />
                      )}

                      <button className="cp-btn-primary" style={{ width: '100%', marginTop: 12 }} onClick={() => openEditItem(item)}>
                        ویرایش سرویس
                      </button>
                    </div>
                    );
                  })}
                </div>
              )}
            </>
          )}
        </div>
      </div>

      {/* ───────── Modal بخش ───────── */}
      <Modal
        open={sectionModal !== null}
        onClose={() => setSectionModal(null)}
        title={sectionModal === 'create' ? 'بخش جدید' : 'ویرایش بخش'}
      >
        <form onSubmit={sectionForm.handleSubmit((d) => {
          if (sectionModal === 'create') createSection.mutate(d);
          else if (sectionModal !== null && typeof sectionModal === 'object') editSection.mutate({ uuid: sectionModal.uuid, body: d });
        })}>
          <div className="field">
            <label>نام بخش *</label>
            <input {...sectionForm.register('name')} placeholder="مثلاً: تزریقات" autoFocus />
            {sectionForm.formState.errors.name && (
              <span className="field-error">{sectionForm.formState.errors.name.message}</span>
            )}
          </div>
          <div style={{ display: 'flex', gap: 8, marginTop: 18 }}>
            <button type="submit" className="btn primary" disabled={createSection.isPending || editSection.isPending}>ذخیره</button>
            <button type="button" className="btn" onClick={() => setSectionModal(null)}>انصراف</button>
          </div>
        </form>
      </Modal>

      {/* ───────── Modal سرویس ───────── */}
      <Modal
        open={itemModal !== null}
        onClose={() => setItemModal(null)}
        title={itemModal === 'create' ? 'سرویس جدید' : 'ویرایش سرویس'}
        size="md"
        footer={
          <>
            <button type="button" className="btn" onClick={() => setItemModal(null)}>انصراف</button>
            <button type="submit" form="service-item-form" className="btn primary" disabled={createItem.isPending || editItem.isPending}>
              {createItem.isPending || editItem.isPending ? 'در حال ذخیره...' : 'ذخیره سرویس'}
            </button>
          </>
        }
      >
        <form
          id="service-item-form"
          onSubmit={itemForm.handleSubmit((d) => {
            if (itemModal === 'create' && selectedSection) {
              createItem.mutate({ ...d, section_uuid: selectedSection.uuid });
            } else if (itemModal !== null && typeof itemModal === 'object') {
              editItem.mutate({ uuid: itemModal.uuid, body: d });
            }
          })}
          style={{ display: 'flex', flexDirection: 'column', gap: 20 }}
        >
          {/* اطلاعات پایه */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <div>
              <label className="field-label">نام سرویس *</label>
              <div className="field" style={itemForm.formState.errors.name ? { borderColor: 'var(--danger)' } : undefined}>
                <input {...itemForm.register('name')} placeholder="مثلاً: سرم ۵۰۰cc" autoFocus />
              </div>
              {itemForm.formState.errors.name && (
                <span className="field-error">{itemForm.formState.errors.name.message}</span>
              )}
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              <div>
                <label className="field-label">قیمت پایه (تومان) *</label>
                <div className="field">
                  <PriceInput
                    value={itemForm.watch('price_rials') ?? 0}
                    onChange={(v) => itemForm.setValue('price_rials', v)}
                    placeholder="۸۵,۰۰۰"
                    min={0}
                  />
                </div>
                {itemForm.formState.errors.price_rials && (
                  <span className="field-error">{itemForm.formState.errors.price_rials.message}</span>
                )}
              </div>
              <div>
                <label className="field-label">پرسنل مسئول</label>
                <SearchableSelect
                  options={staffOptions}
                  value={itemForm.watch('staff_uuid') ?? ''}
                  onChange={(v) => itemForm.setValue('staff_uuid', v != null ? String(v) : '')}
                  placeholder="انتخاب (اختیاری)"
                  noOptionsMessage="پرسنلی ثبت نشده"
                  height={42}
                  isClearable
                />
              </div>
            </div>
          </div>

          {/* بیمه */}
          <div style={{
            border: '1px solid var(--border)', borderRadius: 'var(--r)',
            background: 'var(--surface-2)', overflow: 'hidden',
          }}>
            <label style={{
              display: 'flex', alignItems: 'center', gap: 11, cursor: 'pointer',
              padding: '13px 16px',
            }}>
              <ShieldCheckIcon style={{ width: 18, color: 'var(--primary)', flexShrink: 0 }} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13.5, fontWeight: 600 }}>این خدمت شامل بیمه می‌شود</div>
                <div style={{ fontSize: 11.5, color: 'var(--text-3)', marginTop: 2 }}>نشانه‌ی سریع برای فهرست سرویس‌ها</div>
              </div>
              <span className="switch">
                <input
                  type="checkbox"
                  checked={itemForm.watch('insurance_covered') ?? false}
                  onChange={(e) => itemForm.setValue('insurance_covered', e.target.checked)}
                />
                <span className="switch-track"><span className="switch-thumb" /></span>
              </span>
            </label>

            {itemForm.watch('insurance_covered') && (
              <div style={{ padding: '0 16px 16px', borderTop: '1px solid var(--border)', paddingTop: 14 }}>
                <label className="field-label">قیمت تقریبی با بیمه (تومان)</label>
                <div className="field" style={{ background: 'var(--surface)' }}>
                  <PriceInput
                    value={itemForm.watch('insurance_price_rials') ?? 0}
                    onChange={(v) => itemForm.setValue('insurance_price_rials', v)}
                    placeholder="سهم تقریبی بیمار"
                    min={0}
                  />
                </div>
                <div style={{
                  fontSize: 11.5, color: 'var(--text-3)', lineHeight: 1.75, marginTop: 10,
                  display: 'flex', gap: 6,
                }}>
                  <ShieldCheckIcon style={{ width: 14, flexShrink: 0, marginTop: 2, color: 'var(--text-3)' }} />
                  <span>برای محاسبه‌ی دقیق سهم بیمار و ساخت مطالبات، پوشش هر بیمه‌گر را از دکمه‌ی «پوشش بیمه» در فهرست سرویس‌ها تنظیم کنید.</span>
                </div>
              </div>
            )}
          </div>
        </form>
      </Modal>

      <ServiceTariffModal item={tariffItem} onClose={() => setTariffItem(null)} />

      <ServiceInsuranceModal item={insuranceItem} onClose={() => setInsuranceItem(null)} />

      {/* Confirm حذف بخش */}
      <ConfirmDialog
        open={!!deleteSection}
        title="حذف بخش"
        message={`آیا مطمئن هستید که می‌خواهید بخش «${deleteSection?.name}» و همه‌ی سرویس‌های آن را حذف کنید؟`}
        confirmLabel="حذف"
        onConfirm={() => deleteSection && delSection.mutate(deleteSection.uuid)}
        onCancel={() => setDeleteSection(null)}
        loading={delSection.isPending}
      />

      {/* Confirm فعال/غیرفعال سرویس */}
      <ConfirmDialog
        open={!!toggleItem}
        title={toggleItem?.active ? 'غیرفعال‌کردن سرویس' : 'فعال‌کردن سرویس'}
        message={
          toggleItem?.active
            ? `سرویس «${toggleItem?.name}» غیرفعال می‌شود و در پذیرش جدید نمایش داده نمی‌شود. سوابق قبلی حفظ می‌مانند.`
            : `سرویس «${toggleItem?.name}» دوباره فعال و قابل انتخاب می‌شود.`
        }
        confirmLabel={toggleItem?.active ? 'غیرفعال کن' : 'فعال کن'}
        onConfirm={() => toggleItem && toggleActive.mutate({ uuid: toggleItem.uuid, active: !toggleItem.active })}
        onCancel={() => setToggleItem(null)}
        loading={toggleActive.isPending}
      />
    </>
  );
}

export default function ClinicServicesPage() {
  return (
    <FeatureGate feature="services">
      <ClinicServicesPageInner />
    </FeatureGate>
  );
}
