clinicpro/assets/admin/pages/ServiceDetailPage.tsx

import { useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import {
  BanknotesIcon, ShieldCheckIcon, ClockIcon, UsersIcon, PencilIcon,
  CalendarDaysIcon, WrenchScrewdriverIcon, CubeIcon,
} from '@heroicons/react/24/outline';
import { toast } from 'sonner';
import { api } from '../lib/api';
import type { ApiResponse } from '../lib/api';
import type { ServiceItem } from '../types';
import { formatRial, formatNumber, formatYear, formatDateTime } from '../lib/utils';
import PageHeader from '../components/ui/PageHeader';
import FeatureGate from '../components/ui/FeatureGate';
import ConfirmDialog from '../components/ui/ConfirmDialog';
import ServiceTariffModal from '../components/ServiceTariffModal';
import ServiceInsuranceModal from '../components/ServiceInsuranceModal';
import ServiceItemFormModal from '../components/ServiceItemFormModal';

interface Tariff {
  uuid: string;
  year: number;
  price_rials: number;
  is_active: boolean;
}

interface TariffList {
  current_year: number;
  default_price_rials: number;
  data: Tariff[];
}

interface TenantInsurance {
  uuid: string;
  insurance_name: string | null;
  insurance_kind: 'basic' | 'supplementary' | null;
  coverage_percent: number;
}

interface CoverageRow {
  service_item_uuid: string | null;
  covered: boolean;
  coverage_percent: number | null;
  franchise_rials: number | null;
  ceiling_rials: number | null;
}

const TABS = [
  { id: 'info',      label: 'اطلاعات سرویس' },
  { id: 'tariffs',   label: 'تعرفه‌ها' },
  { id: 'insurance', label: 'بیمه‌ها' },
] as const;
type TabId = typeof TABS[number]['id'];

const KIND = {
  basic:         { label: 'پایه',   cls: 'blue' },
  supplementary: { label: 'تکمیلی', cls: 'violet' },
} as const;

function Row({ icon, label, children }: { icon: React.ReactNode; label: string; children: React.ReactNode }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      gap: 12, padding: '11px 0', borderBottom: '1px solid var(--border)',
    }}>
      <span style={{ fontSize: 12.5, color: 'var(--text-3)', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
        {icon} {label}
      </span>
      <span style={{ fontSize: 13.5, color: 'var(--text-2)', textAlign: 'left', minWidth: 0 }}>{children}</span>
    </div>
  );
}

function InfoTab({ item }: { item: ServiceItem }) {
  const members = item.staff_members ?? (item.staff ? [item.staff] : []);

  return (
    <div className="card card-pad">
      <Row icon={<BanknotesIcon style={{ width: 15 }} />} label="قیمت پایه">
        <b style={{ color: 'var(--primary)', fontSize: 14 }}>{formatRial(item.price_rials)}</b>
      </Row>
      <Row icon={<WrenchScrewdriverIcon style={{ width: 15 }} />} label="بخش">
        {item.section_name ?? '—'}
      </Row>
      <Row icon={<ClockIcon style={{ width: 15 }} />} label="زمان متوسط">
        {item.duration_minutes
          ? <span className="badge blue" style={{ fontSize: 11 }}>{formatNumber(Number(item.duration_minutes))} دقیقه</span>
          : '—'}
      </Row>
      <Row icon={<CalendarDaysIcon style={{ width: 15 }} />} label="نمایش در نوبت‌دهی">
        {item.bookable
          ? <span className="badge green" style={{ fontSize: 11 }}>فعال</span>
          : <span className="badge gray" style={{ fontSize: 11 }}>غیرفعال</span>}
      </Row>
      <Row icon={<ShieldCheckIcon style={{ width: 15 }} />} label="پوشش بیمه">
        {item.insurance_covered
          ? <span className="badge green" style={{ fontSize: 11 }}>تحت پوشش</span>
          : '—'}
      </Row>
      <Row icon={<UsersIcon style={{ width: 15 }} />} label="پرسنل مسئول">
        {members.length > 0 ? (
          <span style={{ display: 'flex', flexWrap: 'wrap', gap: 4, justifyContent: 'flex-end' }}>
            {members.map((m) => (
              <span key={m.uuid} style={{
                fontSize: 12, color: 'var(--text-2)', background: 'var(--surface-2)',
                border: '1px solid var(--border)', borderRadius: 999, padding: '3px 10px', whiteSpace: 'nowrap',
              }}>{m.full_name}</span>
            ))}
          </span>
        ) : '—'}
      </Row>
      <Row icon={<CalendarDaysIcon style={{ width: 15 }} />} label="تاریخ ایجاد">
        {item.created_at ? formatDateTime(item.created_at) : '—'}
      </Row>
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, padding: '11px 0',
      }}>
        <span style={{ fontSize: 12.5, color: 'var(--text-3)', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          <CalendarDaysIcon style={{ width: 15 }} /> آخرین ویرایش
        </span>
        <span style={{ fontSize: 13.5, color: 'var(--text-2)' }}>
          {item.updated_at ? formatDateTime(item.updated_at) : '—'}
        </span>
      </div>
    </div>
  );
}

function TariffsTab({ item, onManage }: { item: ServiceItem; onManage: () => void }) {
  const { data, isLoading } = useQuery<ApiResponse<TariffList>>({
    queryKey: ['service-tariffs', item.uuid],
    queryFn: () => api.get(`/api/v1/service-items/${item.uuid}/tariffs`),
  });

  const list = data?.data;
  const tariffs = list?.data ?? [];

  return (
    <div className="card card-pad">
      <div className="card-title-row">
        <div>
          <b style={{ fontSize: 14 }}>تعرفه‌های سالانه</b>
          <div className="muted" style={{ fontSize: 12 }}>
            قیمت هر سال شمسی؛ قیمت سال جاری مبنای صورتحساب است.
          </div>
        </div>
        <button className="btn primary sm" onClick={onManage}>مدیریت تعرفه‌ها</button>
      </div>

      {isLoading ? (
        <div className="muted" style={{ fontSize: 13, padding: '12px 0' }}>در حال بارگذاری...</div>
      ) : tariffs.length === 0 ? (
        <div className="empty" style={{ padding: '28px 0' }}>
          <BanknotesIcon style={{ width: 30, height: 30 }} />
          <p className="muted">تعرفه‌ای ثبت نشده است</p>
        </div>
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 12 }}>
          {tariffs.map((t) => (
            <div key={t.uuid} style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10,
              padding: '10px 12px', borderRadius: 'var(--r-sm)',
              border: '1px solid var(--border)',
              background: t.year === list?.current_year ? 'var(--primary-soft)' : 'var(--surface)',
            }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 13 }}>
                <b>{formatYear(t.year)}</b>
                {t.year === list?.current_year && <span className="badge green" style={{ fontSize: 10 }}>سال جاری</span>}
                {!t.is_active && <span className="badge gray" style={{ fontSize: 10 }}>غیرفعال</span>}
              </span>
              <b style={{ fontSize: 13.5, color: 'var(--primary)' }}>{formatRial(t.price_rials)}</b>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

function InsuranceTab({ item, onManage }: { item: ServiceItem; onManage: () => void }) {
  const { data: contractsData, isLoading } = useQuery<{ data: { data: TenantInsurance[] } }>({
    queryKey: ['tenant-insurances'],
    queryFn: () => api.get('/api/v1/billing/tenant-insurances'),
  });

  const contracts = (contractsData as any)?.data?.data as TenantInsurance[] | undefined ?? [];

  return (
    <div className="card card-pad">
      <div className="card-title-row">
        <div>
          <b style={{ fontSize: 14 }}>بیمه‌های مرتبط</b>
          <div className="muted" style={{ fontSize: 12 }}>
            درصد پوشش، فرانشیز و سقف هر بیمه‌گر برای این خدمت.
          </div>
        </div>
        <button className="btn primary sm" onClick={onManage}>مدیریت پوشش</button>
      </div>

      {isLoading ? (
        <div className="muted" style={{ fontSize: 13, padding: '12px 0' }}>در حال بارگذاری...</div>
      ) : contracts.length === 0 ? (
        <div className="empty" style={{ padding: '28px 0' }}>
          <ShieldCheckIcon style={{ width: 30, height: 30 }} />
          <p className="muted">قرارداد بیمه‌ی فعالی ندارید</p>
        </div>
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 12 }}>
          {contracts.map((c) => (
            <ContractCoverageRow key={c.uuid} contract={c} itemUuid={item.uuid} />
          ))}
        </div>
      )}
    </div>
  );
}

function ContractCoverageRow({ contract, itemUuid }: { contract: TenantInsurance; itemUuid: string }) {
  const { data } = useQuery<{ data: { data: CoverageRow[] } }>({
    queryKey: ['service-coverage', contract.uuid],
    queryFn: () => api.get(`/api/v1/billing/tenant-insurances/${contract.uuid}/service-coverage`),
  });

  const row = ((data as any)?.data?.data as CoverageRow[] | undefined)
    ?.find((r) => r.service_item_uuid === itemUuid);
  const kind = contract.insurance_kind ? KIND[contract.insurance_kind] : null;
  const percent = row?.coverage_percent ?? contract.coverage_percent;

  return (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10,
      padding: '10px 12px', borderRadius: 'var(--r-sm)', border: '1px solid var(--border)',
    }}>
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 13, minWidth: 0 }}>
        <ShieldCheckIcon style={{ width: 15, color: 'var(--primary)', flexShrink: 0 }} />
        <b style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
          {contract.insurance_name ?? 'بیمه'}
        </b>
        {kind && <span className={`badge ${kind.cls}`} style={{ fontSize: 10 }}>{kind.label}</span>}
      </span>
      {row && !row.covered ? (
        <span style={{ fontSize: 12, color: 'var(--text-3)' }}>بدون پوشش</span>
      ) : (
        <span style={{ fontSize: 12.5, color: 'var(--text-2)', display: 'inline-flex', gap: 10, whiteSpace: 'nowrap' }}>
          <span>پوشش {formatNumber(percent)}٪</span>
          {row?.franchise_rials ? <span>فرانشیز {formatRial(row.franchise_rials)}</span> : null}
          {row?.ceiling_rials ? <span>سقف {formatRial(row.ceiling_rials)}</span> : null}
          {!row && <span className="muted">(ارث از قرارداد)</span>}
        </span>
      )}
    </div>
  );
}

function ServiceDetailPageInner() {
  const { uuid } = useParams<{ uuid: string }>();
  const navigate = useNavigate();
  const qc = useQueryClient();

  const [tab, setTab] = useState<TabId>('info');
  const [editOpen, setEditOpen] = useState(false);
  const [tariffOpen, setTariffOpen] = useState(false);
  const [insuranceOpen, setInsuranceOpen] = useState(false);
  const [toggleOpen, setToggleOpen] = useState(false);

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

  const item = data?.data;

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

  if (isLoading) {
    return <div style={{ color: 'var(--text-3)', fontSize: 13, padding: 16 }}>در حال بارگذاری...</div>;
  }

  if (isError || !item) {
    return (
      <div className="card" style={{ padding: '52px 0', textAlign: 'center' }}>
        <CubeIcon style={{ width: 34, margin: '0 auto 12px', display: 'block', opacity: 0.35 }} />
        <div style={{ fontWeight: 600, color: 'var(--text-2)', marginBottom: 12 }}>سرویس یافت نشد</div>
        <button className="btn primary sm" onClick={() => navigate('/admin/clinic-services')}>بازگشت به سرویس‌ها</button>
      </div>
    );
  }

  return (
    <div className="fade-in">
      <PageHeader
        title={item.name}
        breadcrumbs={[
          { label: 'سرویس‌ها', to: '/admin/clinic-services' },
          ...(item.section_name ? [{ label: item.section_name }] : []),
          { label: item.name },
        ]}
        action={
          <div style={{ display: 'flex', gap: 8 }}>
            <button className="btn sm" onClick={() => setToggleOpen(true)}>
              {item.active ? 'غیرفعال‌کردن' : 'فعال‌کردن'}
            </button>
            <button className="btn primary sm" onClick={() => setEditOpen(true)}>
              <PencilIcon style={{ width: 15 }} /> ویرایش
            </button>
          </div>
        }
      />

      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 'var(--gap)' }}>
        <span className={`badge ${item.active ? 'green' : 'gray'}`} style={{ fontSize: 11 }}>
          <span className="bdot" />{item.active ? 'فعال' : 'غیرفعال'}
        </span>
      </div>

      <div className="seg" style={{ marginBottom: 'var(--gap)', overflowX: 'auto', flexWrap: 'nowrap' }}>
        {TABS.map((t) => (
          <button
            key={t.id}
            className={tab === t.id ? 'active' : ''}
            style={{ whiteSpace: 'nowrap' }}
            onClick={() => setTab(t.id)}
          >
            {t.label}
          </button>
        ))}
      </div>

      {tab === 'info'      && <InfoTab item={item} />}
      {tab === 'tariffs'   && <TariffsTab item={item} onManage={() => setTariffOpen(true)} />}
      {tab === 'insurance' && <InsuranceTab item={item} onManage={() => setInsuranceOpen(true)} />}

      <ServiceItemFormModal
        item={editOpen ? item : null}
        sectionUuid={item.section_uuid ?? null}
        onClose={() => setEditOpen(false)}
        onManageInsurance={() => setInsuranceOpen(true)}
      />
      <ServiceTariffModal item={tariffOpen ? item : null} onClose={() => setTariffOpen(false)} />
      <ServiceInsuranceModal item={insuranceOpen ? item : null} onClose={() => setInsuranceOpen(false)} />

      <ConfirmDialog
        open={toggleOpen}
        title={item.active ? 'غیرفعال‌کردن سرویس' : 'فعال‌کردن سرویس'}
        message={
          item.active
            ? `سرویس «${item.name}» غیرفعال می‌شود و در پذیرش جدید نمایش داده نمی‌شود. سوابق قبلی حفظ می‌مانند.`
            : `سرویس «${item.name}» دوباره فعال و قابل انتخاب می‌شود.`
        }
        confirmLabel={item.active ? 'غیرفعال کن' : 'فعال کن'}
        onConfirm={() => toggleActive.mutate()}
        onCancel={() => setToggleOpen(false)}
        loading={toggleActive.isPending}
      />
    </div>
  );
}

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