clinicpro/assets/admin/pages/PatientDetailPage.tsx

import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { useParams, Link } from 'react-router-dom';
import {
  ChevronRightIcon, PencilIcon, ClipboardDocumentCheckIcon, DocumentTextIcon,
  CalendarDaysIcon, CreditCardIcon, BanknotesIcon, ChatBubbleLeftRightIcon,
  PhoneArrowUpRightIcon, PaperClipIcon, ClipboardDocumentListIcon,
} from '@heroicons/react/24/outline';
import { api } from '../lib/api';
import type { ApiResponse } from '../lib/api';
import type { PatientRecord } from '../types';
import { formatDate } from '../lib/utils';

type TabKey = 'services' | 'info' | 'appointments' | 'payments' | 'wallet' | 'messages' | 'callcenter' | 'attach' | 'records';

const TABS: { key: TabKey; label: string; icon: React.ElementType }[] = [
  { key: 'services',     label: 'سرویس‌ها',      icon: ClipboardDocumentCheckIcon },
  { key: 'info',         label: 'اطلاعات پرونده', icon: DocumentTextIcon },
  { key: 'appointments', label: 'نوبت‌ها',        icon: CalendarDaysIcon },
  { key: 'payments',     label: 'پرداخت‌ها',      icon: CreditCardIcon },
  { key: 'wallet',       label: 'کیف پول',        icon: BanknotesIcon },
  { key: 'messages',     label: 'پیام‌ها',        icon: ChatBubbleLeftRightIcon },
  { key: 'callcenter',   label: 'کال سنتر',       icon: PhoneArrowUpRightIcon },
  { key: 'attach',       label: 'ضمیمه',          icon: PaperClipIcon },
  { key: 'records',      label: 'پرونده پزشکی',   icon: ClipboardDocumentListIcon },
];

const GENDER_LABEL: Record<string, string> = { male: 'مرد', female: 'زن' };

function Placeholder({ label }: { label: string }) {
  return (
    <div style={{ padding: '48px 0', textAlign: 'center', color: 'var(--text-3)', fontSize: 14 }}>
      محتوای «{label}» به‌زودی تکمیل می‌شود.
    </div>
  );
}

function InfoRow({ label, value }: { label: string; value?: string | null }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', padding: '10px 0', borderTop: '1px solid var(--border)', gap: 12 }}>
      <span style={{ fontSize: 13, color: 'var(--text-3)' }}>{label}</span>
      <span style={{ fontSize: 13.5, color: 'var(--text)', fontWeight: 600, direction: 'ltr' }}>{value || '—'}</span>
    </div>
  );
}

/** پرونده — the tabbed patient case-file (Figma "جزئیات پرونده"). */
export default function PatientDetailPage() {
  const { uuid } = useParams<{ uuid: string }>();
  const [tab, setTab] = useState<TabKey>('services');

  const { data, isLoading } = useQuery<ApiResponse<PatientRecord>>({
    queryKey: ['patient', uuid],
    queryFn: () => api.get(`/api/v1/patient/${uuid}`),
    enabled: !!uuid,
  });
  const record = data?.data;
  const profile: any = record?.profile ?? {};

  const sessionsQ = useQuery<ApiResponse<any[]>>({
    queryKey: ['patient-sessions', uuid],
    queryFn: () => api.get(`/api/v1/patient/${uuid}/sessions`),
    enabled: !!uuid && tab === 'services',
  });
  const appointmentsQ = useQuery<ApiResponse<any[]>>({
    queryKey: ['patient-appointments', uuid],
    queryFn: () => api.get(`/api/v1/patient/${uuid}/appointments`),
    enabled: !!uuid && tab === 'appointments',
  });

  return (
    <div className="fade-in" style={{ maxWidth: 1060, margin: '0 auto' }}>
      {/* header */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap', marginBottom: 18 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <Link to="/admin/patients" className="btn sm ghost" style={{ color: 'var(--text-2)' }}><ChevronRightIcon style={{ width: 16 }} /> بازگشت</Link>
          <div style={{ fontSize: 15, fontWeight: 700 }}>{record?.user_name || 'پرونده'}</div>
          {record?.record_number && <span className="badge gray" style={{ fontSize: 11 }}>#{record.record_number}</span>}
        </div>
        <Link to={`/admin/patients/${uuid}/edit`} className="btn sm ghost" style={{ color: 'var(--accent)' }}><PencilIcon style={{ width: 15 }} /> ویرایش</Link>
      </div>

      {/* tab bar */}
      <div style={{ display: 'flex', gap: 4, overflowX: 'auto', borderBottom: '1px solid var(--border)', marginBottom: 18 }}>
        {TABS.map((t) => {
          const on = t.key === tab;
          const Icon = t.icon;
          return (
            <button key={t.key} onClick={() => setTab(t.key)} style={{
              display: 'inline-flex', alignItems: 'center', gap: 6, whiteSpace: 'nowrap',
              padding: '10px 14px', border: 'none', background: 'none', cursor: 'pointer',
              fontFamily: 'inherit', fontSize: 13.5, fontWeight: on ? 700 : 500,
              color: on ? 'var(--primary)' : 'var(--text-2)',
              borderBottom: `2px solid ${on ? 'var(--primary)' : 'transparent'}`,
            }}>
              <Icon style={{ width: 16 }} /> {t.label}
            </button>
          );
        })}
      </div>

      {/* tab content */}
      {isLoading ? (
        <div style={{ padding: 24, color: 'var(--text-3)', fontSize: 13 }}>در حال بارگذاری...</div>
      ) : tab === 'info' ? (
        <div style={{ background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r-lg)', padding: 20, maxWidth: 620 }}>
          <InfoRow label="شماره پرونده" value={record?.record_number} />
          <InfoRow label="نام مراجعه‌کننده" value={record?.user_name} />
          <InfoRow label="کد ملی" value={record?.user_national_code} />
          <InfoRow label="شماره تماس" value={record?.user_mobile} />
          <InfoRow label="جنسیت" value={profile.gender ? GENDER_LABEL[profile.gender] : null} />
          <InfoRow label="تاریخ تولد" value={profile.date_of_birth ? formatDate(profile.date_of_birth) : null} />
          <InfoRow label="نحوه آشنایی" value={profile.referral_source} />
          <InfoRow label="آدرس" value={profile.address} />
          <InfoRow label="توضیحات" value={profile.description} />
        </div>
      ) : tab === 'services' ? (
        <TabList q={sessionsQ} emptyLabel="سرویسی ثبت نشده است"
          row={(s) => ({ title: s.section_name || s.name || 'سرویس', meta: s.created_at ? formatDate(s.created_at) : '', badge: s.status })} />
      ) : tab === 'appointments' ? (
        <TabList q={appointmentsQ} emptyLabel="نوبتی ثبت نشده است"
          row={(a) => ({ title: a.service_name || a.doctor_name || 'نوبت', meta: a.date ? formatDate(a.date) : (a.starts_at ? formatDate(a.starts_at) : ''), badge: a.status_label || a.status })} />
      ) : (
        <Placeholder label={TABS.find((t) => t.key === tab)!.label} />
      )}
    </div>
  );
}

function TabList({ q, emptyLabel, row }: {
  q: { data?: ApiResponse<any[]>; isLoading: boolean };
  emptyLabel: string;
  row: (item: any) => { title: string; meta?: string; badge?: string };
}) {
  if (q.isLoading) return <div style={{ padding: 16, color: 'var(--text-3)', fontSize: 13 }}>در حال بارگذاری...</div>;
  const items = q.data?.data ?? [];
  if (items.length === 0) return <div style={{ padding: '40px 0', textAlign: 'center', color: 'var(--text-3)', fontSize: 14 }}>{emptyLabel}</div>;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
      {items.map((item, i) => {
        const r = row(item);
        return (
          <div key={item.uuid ?? i} style={{ background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r-lg)', padding: '14px 16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 10 }}>
            <div>
              <div style={{ fontWeight: 600, fontSize: 14 }}>{r.title}</div>
              {r.meta && <div style={{ fontSize: 12.5, color: 'var(--text-3)', marginTop: 2 }}>{r.meta}</div>}
            </div>
            {r.badge && <span className="badge gray" style={{ fontSize: 11 }}>{r.badge}</span>}
          </div>
        );
      })}
    </div>
  );
}