import React, { useState, useCallback, useRef } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import {
  MagnifyingGlassIcon, PlusIcon, ChevronRightIcon, PencilIcon, PhoneIcon,
  FolderOpenIcon, UsersIcon, UserPlusIcon, CheckCircleIcon,
} 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, PaginatedResponse } from '../lib/api';
import type { PatientRecord, PatientSession, ServiceSection, ServiceItem } from '../types';
import { formatDate, formatDateTime, formatRial, formatNumber } from '../lib/utils';
import DataTable, { type Column } from '../components/ui/DataTable';
import Pagination from '../components/ui/Pagination';
import Modal from '../components/ui/Modal';
import PageHeader from '../components/ui/PageHeader';
import SearchableSelect from '../components/ui/SearchableSelect';
import FeatureGate from '../components/ui/FeatureGate';

const sessionSchema = z.object({
  visit_price_rials: z.coerce.number().min(0),
  base_insurance_discount_percent: z.coerce.number().min(0).max(100),
  supplementary_discount_percent: z.coerce.number().min(0).max(100),
  payment_method: z.enum(['cash', 'card', 'insurance', 'online', 'pending']),
  notes: z.string().optional(),
});
type SessionFormData = z.infer<typeof sessionSchema>;

const PAYMENT_LABELS: Record<string, string> = {
  cash: 'نقدی', card: 'کارت', insurance: 'بیمه', online: 'آنلاین', pending: 'در انتظار',
};

const PAYMENT_BADGE: Record<string, string> = {
  cash: 'green', card: 'blue', insurance: 'purple', online: 'blue', pending: 'amber',
};

const EMPTY_RECORDS: PatientRecord[] = [];
const EMPTY_SESSIONS: PatientSession[] = [];

function calcFinalPrice(visitPrice: number, baseDiscount: number, suppDiscount: number, servicesTotal: number) {
  const afterBase = visitPrice * (1 - baseDiscount / 100);
  const afterSupp = afterBase * (1 - suppDiscount / 100);
  return Math.round(afterSupp) + servicesTotal;
}

function MyPatientsPageInner() {
  const qc = useQueryClient();
  const [selectedRecord, setSelectedRecord] = useState<PatientRecord | null>(null);
  const [page, setPage] = useState(1);
  const [search, setSearch] = useState('');
  const [sessionPage, setSessionPage] = useState(1);
  const [sessionModal, setSessionModal] = useState(false);
  const [editSession, setEditSession] = useState<PatientSession | null>(null);

  const form = useForm<SessionFormData>({
    resolver: zodResolver(sessionSchema),
    defaultValues: { visit_price_rials: 0, base_insurance_discount_percent: 0, supplementary_discount_percent: 0, payment_method: 'cash' },
  });
  const watchVisit = form.watch('visit_price_rials') ?? 0;
  const watchBase  = form.watch('base_insurance_discount_percent') ?? 0;
  const watchSupp  = form.watch('supplementary_discount_percent') ?? 0;

  const [selectedServices, setSelectedServices] = useState<{ service_item_uuid: string; name: string; price_rials: number }[]>([]);
  const [sectionUuid, setSectionUuid] = useState('');
  const [itemUuid, setItemUuid] = useState('');

  const [createRecordOpen, setCreateRecordOpen] = useState(false);
  const [searchMobile, setSearchMobile] = useState('');
  const [foundUser, setFoundUser] = useState<{ uuid: string; name: string | null; mobile: string } | null>(null);
  const [searchError, setSearchError] = useState('');
  const mobileInputRef = useRef<HTMLInputElement>(null);

  const servicesTotal = selectedServices.reduce((sum, s) => sum + s.price_rials, 0);
  const finalPrice    = calcFinalPrice(Number(watchVisit), Number(watchBase), Number(watchSupp), servicesTotal);

  const limit = 20;

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

  const { data: sessionsData, isLoading: sessionsLoading } = useQuery<PaginatedResponse<PatientSession>>({
    queryKey: ['patient-sessions', selectedRecord?.uuid, sessionPage],
    queryFn: () => api.get(`/api/v1/patient/${selectedRecord!.uuid}/sessions?page=${sessionPage}&limit=20`),
    enabled: !!selectedRecord,
  });

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

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

  const records  = recordsData?.data ?? EMPTY_RECORDS;
  const sessions = sessionsData?.data ?? EMPTY_SESSIONS;
  const totalRec = recordsData?.meta?.totalRecords ?? 0;
  const totalSes = sessionsData?.meta?.totalRecords ?? 0;

  const sectionOptions = (sectionsData?.data ?? []).map((s) => ({ value: s.uuid, label: s.name }));
  const itemOptions    = (itemsData?.data ?? []).filter((i) => i.active).map((i) => ({
    value: i.uuid,
    label: `${i.name} — ${formatRial(i.price_rials)}`,
  }));

  const createSessionMut = useMutation({
    mutationFn: (body: object) => api.post(`/api/v1/patient/${selectedRecord!.uuid}/session`, body),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ['patient-sessions', selectedRecord?.uuid] });
      setSessionModal(false);
      form.reset();
      setSelectedServices([]);
      toast.success('مراجعه ثبت شد');
    },
    onError: (e: any) => toast.error(e.message),
  });

  const updateSessionMut = useMutation({
    mutationFn: ({ uuid, body }: { uuid: string; body: object }) => api.patch(`/api/v1/session/${uuid}`, body),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ['patient-sessions', selectedRecord?.uuid] });
      setEditSession(null);
      toast.success('مراجعه ویرایش شد');
    },
    onError: (e: any) => toast.error(e.message),
  });

  const searchUserMut = useMutation({
    mutationFn: (mobile: string) => api.get(`/api/v1/patient/search-user?mobile=${encodeURIComponent(mobile)}`),
    onSuccess: (res: any) => { setFoundUser(res?.data); setSearchError(''); },
    onError: () => { setFoundUser(null); setSearchError('کاربری با این شماره در سیستم یافت نشد'); },
  });

  const createRecordMut = useMutation({
    mutationFn: (userUuid: string) => api.post('/api/v1/patient', { user_uuid: userUuid }),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ['patients'] });
      setCreateRecordOpen(false);
      setSearchMobile('');
      setFoundUser(null);
      setSearchError('');
      toast.success('پرونده بیمار ایجاد شد');
    },
    onError: (e: any) => toast.error(e.message),
  });

  const handleSearchMobile = () => {
    const digits = searchMobile.replace(/\D/g, '');
    if (!/^09\d{9}$/.test(digits)) { setSearchError('شماره موبایل معتبر نیست'); return; }
    setSearchError('');
    setFoundUser(null);
    searchUserMut.mutate(digits);
  };

  const handleCreateRecordClose = () => {
    setCreateRecordOpen(false);
    setSearchMobile('');
    setFoundUser(null);
    setSearchError('');
  };

  const handleAddService = () => {
    if (!itemUuid) return;
    const found = itemsData?.data?.find((i) => i.uuid === itemUuid);
    if (!found || selectedServices.some((s) => s.service_item_uuid === found.uuid)) return;
    setSelectedServices((p) => [...p, { service_item_uuid: found.uuid, name: found.name, price_rials: found.price_rials }]);
    setItemUuid('');
  };

  const handleSubmitSession = form.handleSubmit((d) => {
    createSessionMut.mutate({ ...d, services: selectedServices.map((s) => ({ service_item_uuid: s.service_item_uuid })) });
  });

  const handleSearch = useCallback((v: string) => { setSearch(v); setPage(1); }, []);

  const recordColumns: Column<PatientRecord>[] = [
    {
      key: 'user',
      header: 'بیمار',
      render: (r) => (
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div
            className="avatar sm"
            style={{
              background: 'linear-gradient(145deg, oklch(0.62 0.15 256), oklch(0.48 0.16 256))',
              flexShrink: 0,
              fontWeight: 700,
            }}
          >
            {(r.user.fullName ?? '?').charAt(0)}
          </div>
          <div>
            <div style={{ fontWeight: 600, fontSize: 14 }}>{r.user.fullName ?? '—'}</div>
            <div style={{ fontSize: 12, color: 'var(--text-3)', display: 'flex', alignItems: 'center', gap: 4, marginTop: 2 }}>
              <PhoneIcon style={{ width: 11 }} />
              <span dir="ltr">{r.user.phone ?? '—'}</span>
            </div>
          </div>
        </div>
      ),
    },
    {
      key: 'created_at',
      header: 'تاریخ ثبت',
      render: (r) => (
        <span style={{ fontSize: 13, color: 'var(--text-3)' }}>{formatDate(r.created_at)}</span>
      ),
    },
    {
      key: 'uuid',
      header: '',
      render: (r) => (
        <button
          className="btn primary sm"
          style={{ display: 'flex', alignItems: 'center', gap: 5 }}
          onClick={() => { setSelectedRecord(r); setSessionPage(1); }}
        >
          <FolderOpenIcon style={{ width: 14 }} />
          مشاهده پرونده
        </button>
      ),
    },
  ];

  if (!selectedRecord) {
    return (
      <>
        <PageHeader
          title="پرونده بیماران"
          description="مراجعه‌کنندگان ثبت‌شده شما"
          action={
            <button className="btn primary sm" onClick={() => setCreateRecordOpen(true)}>
              <UserPlusIcon style={{ width: 16 }} />
              پرونده جدید
            </button>
          }
        />

        <div style={{ marginBottom: 16 }}>
          <div style={{
            background: 'var(--surface)',
            border: '1px solid var(--border)',
            borderRadius: 'var(--r)',
            padding: '10px 14px',
            display: 'flex',
            alignItems: 'center',
            gap: 10,
          }}>
            <MagnifyingGlassIcon style={{ width: 18, color: 'var(--text-3)', flexShrink: 0 }} />
            <input
              style={{ border: 'none', outline: 'none', background: 'transparent', flex: 1, fontSize: 14 }}
              value={search}
              onChange={(e) => handleSearch(e.target.value)}
              placeholder="جستجو بر اساس نام یا تلفن..."
            />
          </div>
        </div>

        <div className="card">
          {records.length === 0 && !isLoading ? (
            <div style={{ textAlign: 'center', padding: '60px 24px', color: 'var(--text-3)' }}>
              <UsersIcon style={{ width: 48, margin: '0 auto 16px', display: 'block', opacity: 0.4 }} />
              <div style={{ fontWeight: 600, fontSize: 15, marginBottom: 8, color: 'var(--text-2)' }}>
                {search ? 'بیماری یافت نشد' : 'هنوز بیماری ثبت نشده است'}
              </div>
              <div style={{ fontSize: 13 }}>
                {search ? 'عبارت جستجو را تغییر دهید' : 'پس از ثبت نوبت، پرونده بیمار به طور خودکار ایجاد می‌شود'}
              </div>
            </div>
          ) : (
            <>
              <DataTable columns={recordColumns} data={records} loading={isLoading} emptyMessage="بیماری ثبت نشده است" />
              <div style={{ padding: '0 16px 12px' }}>
                <Pagination page={page} total={totalRec} limit={limit} onPageChange={setPage} />
              </div>
            </>
          )}
        </div>

        {/* Modal ایجاد پرونده دستی */}
        <Modal
          open={createRecordOpen}
          onClose={handleCreateRecordClose}
          title="ایجاد پرونده بیمار"
          size="sm"
          footer={
            <>
              <button className="btn ghost sm" onClick={handleCreateRecordClose}>انصراف</button>
              <button
                className="btn primary sm"
                disabled={!foundUser || createRecordMut.isPending}
                onClick={() => foundUser && createRecordMut.mutate(foundUser.uuid)}
              >
                {createRecordMut.isPending ? 'در حال ایجاد...' : 'ایجاد پرونده'}
              </button>
            </>
          }
        >
          <div className="field">
            <label>شماره موبایل بیمار</label>
            <div style={{ display: 'flex', gap: 8 }}>
              <input
                ref={mobileInputRef}
                value={searchMobile}
                placeholder="09123456789"
                dir="ltr"
                inputMode="numeric"
                maxLength={11}
                autoFocus
                style={{ flex: 1, ...(searchError ? { borderColor: 'var(--danger)' } : {}) }}
                onChange={(e) => {
                  const digits = e.target.value.replace(/\D/g, '');
                  setSearchMobile(digits);
                  setFoundUser(null);
                  setSearchError('');
                }}
                onKeyDown={(e) => { if (e.key === 'Enter') handleSearchMobile(); }}
              />
              <button
                className="btn sm"
                onClick={handleSearchMobile}
                disabled={searchUserMut.isPending}
                style={{ flexShrink: 0 }}
              >
                {searchUserMut.isPending ? '...' : 'جستجو'}
              </button>
            </div>
            {searchError && <span className="field-error">{searchError}</span>}
          </div>

          {foundUser && (
            <div style={{
              marginTop: 16,
              display: 'flex', alignItems: 'center', gap: 12,
              padding: '12px 14px',
              background: 'var(--success-subtle, oklch(0.97 0.03 150))',
              border: '1px solid oklch(0.88 0.07 150)',
              borderRadius: 'var(--r)',
            }}>
              <CheckCircleIcon style={{ width: 20, color: 'var(--success, #16a34a)', flexShrink: 0 }} />
              <div>
                <div style={{ fontWeight: 600, fontSize: 14 }}>{foundUser.name ?? 'بدون نام'}</div>
                <div style={{ fontSize: 12.5, color: 'var(--text-3)', direction: 'ltr', marginTop: 2 }}>{foundUser.mobile}</div>
              </div>
            </div>
          )}

          <p style={{ fontSize: 12.5, color: 'var(--text-3)', marginTop: 16, lineHeight: 1.7 }}>
            بیمار باید قبلاً در سیستم ثبت‌نام کرده باشد. با شماره موبایل جستجو کنید، سپس پرونده ایجاد کنید.
          </p>
        </Modal>
      </>
    );
  }

  return (
    <>
      <PageHeader
        title={selectedRecord.user.fullName ?? 'بیمار'}
        description={`تلفن: ${selectedRecord.user.phone ?? '—'} — پرونده از ${formatDate(selectedRecord.created_at)}`}
        action={
          <div style={{ display: 'flex', gap: 8 }}>
            <button className="btn sm" onClick={() => setSelectedRecord(null)}>
              <ChevronRightIcon style={{ width: 15 }} /> بازگشت
            </button>
            <button
              className="btn primary sm"
              onClick={() => { form.reset(); setSelectedServices([]); setSessionModal(true); }}
            >
              <PlusIcon style={{ width: 15 }} /> مراجعه جدید
            </button>
          </div>
        }
      />

      {/* بنر اطلاعات بیمار */}
      <div style={{
        background: 'linear-gradient(135deg, oklch(0.52 0.22 256), oklch(0.40 0.18 256))',
        borderRadius: 'var(--r)',
        padding: '16px 20px',
        marginBottom: 16,
        display: 'flex',
        alignItems: 'center',
        gap: 16,
        color: '#fff',
      }}>
        <div style={{
          width: 48, height: 48, borderRadius: '50%',
          background: 'rgba(255,255,255,0.2)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 20, fontWeight: 700, flexShrink: 0,
        }}>
          {(selectedRecord.user.fullName ?? '?').charAt(0)}
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontWeight: 700, fontSize: 17 }}>{selectedRecord.user.fullName ?? '—'}</div>
          <div style={{ fontSize: 13, opacity: 0.85, marginTop: 2, display: 'flex', alignItems: 'center', gap: 6 }}>
            <PhoneIcon style={{ width: 13 }} />
            <span dir="ltr">{selectedRecord.user.phone ?? '—'}</span>
          </div>
        </div>
        <div style={{ textAlign: 'center', background: 'rgba(255,255,255,0.15)', borderRadius: 10, padding: '8px 16px' }}>
          <div style={{ fontSize: 22, fontWeight: 800 }}>{totalSes}</div>
          <div style={{ fontSize: 12, opacity: 0.85 }}>مراجعه</div>
        </div>
      </div>

      <div className="card">
        <div style={{ fontWeight: 600, padding: '14px 16px 10px', borderBottom: '1px solid var(--border)', fontSize: 14 }}>
          تاریخچه مراجعات
        </div>
        {sessionsLoading ? (
          <div style={{ padding: 32, textAlign: 'center', color: 'var(--text-3)' }}>در حال بارگذاری...</div>
        ) : sessions.length === 0 ? (
          <div style={{ padding: '48px 24px', textAlign: 'center', color: 'var(--text-3)' }}>
            <FolderOpenIcon style={{ width: 40, margin: '0 auto 12px', display: 'block', opacity: 0.4 }} />
            <div style={{ fontWeight: 600, marginBottom: 6, color: 'var(--text-2)' }}>مراجعه‌ای ثبت نشده است</div>
            <button
              className="btn primary sm"
              style={{ marginTop: 12 }}
              onClick={() => { form.reset(); setSelectedServices([]); setSessionModal(true); }}
            >
              <PlusIcon style={{ width: 14 }} /> ثبت اولین مراجعه
            </button>
          </div>
        ) : (
          sessions.map((s) => <SessionRow key={s.uuid} session={s} onEdit={setEditSession} />)
        )}
        {totalSes > 20 && (
          <div style={{ padding: '0 16px 12px' }}>
            <Pagination page={sessionPage} total={totalSes} limit={20} onPageChange={setSessionPage} />
          </div>
        )}
      </div>

      {/* Modal مراجعه جدید */}
      <Modal open={sessionModal} onClose={() => setSessionModal(false)} title="ثبت مراجعه جدید">
        <form onSubmit={handleSubmitSession}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }}>
              <div className="field">
                <label>قیمت ویزیت (ریال)</label>
                <input {...form.register('visit_price_rials')} type="number" min={0} dir="ltr" />
              </div>
              <div className="field">
                <label>تخفیف بیمه پایه (%)</label>
                <input {...form.register('base_insurance_discount_percent')} type="number" min={0} max={100} dir="ltr" />
              </div>
              <div className="field">
                <label>تخفیف تکمیلی (%)</label>
                <input {...form.register('supplementary_discount_percent')} type="number" min={0} max={100} dir="ltr" />
              </div>
            </div>
            <div className="field">
              <label>روش پرداخت</label>
              <select {...form.register('payment_method')}>
                {Object.entries(PAYMENT_LABELS).map(([v, l]) => (
                  <option key={v} value={v}>{l}</option>
                ))}
              </select>
            </div>
            <div className="field">
              <label>یادداشت</label>
              <textarea {...form.register('notes')} rows={2} placeholder="یادداشت پزشک..." />
            </div>

            <div style={{ borderTop: '1px solid var(--border)', paddingTop: 12 }}>
              <div style={{ fontWeight: 600, fontSize: 13, marginBottom: 10 }}>افزودن خدمات</div>
              <div style={{ display: 'flex', gap: 8, marginBottom: 10 }}>
                <div style={{ flex: 1 }}>
                  <SearchableSelect
                    options={sectionOptions}
                    value={sectionUuid}
                    onChange={(v) => { setSectionUuid(v ? String(v) : ''); setItemUuid(''); }}
                    placeholder="انتخاب بخش..."
                  />
                </div>
                <div style={{ flex: 1 }}>
                  <SearchableSelect
                    options={itemOptions}
                    value={itemUuid}
                    onChange={(v) => setItemUuid(v ? String(v) : '')}
                    placeholder="انتخاب سرویس..."
                    isDisabled={!sectionUuid}
                  />
                </div>
                <button type="button" className="btn primary sm" onClick={handleAddService} disabled={!itemUuid}>
                  <PlusIcon style={{ width: 14 }} />
                </button>
              </div>

              {selectedServices.length > 0 && (
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 10 }}>
                  {selectedServices.map((svc) => (
                    <div
                      key={svc.service_item_uuid}
                      style={{
                        display: 'inline-flex', alignItems: 'center', gap: 8,
                        background: 'var(--primary-subtle)', border: '1px solid oklch(0.85 0.06 256)',
                        borderRadius: 20, padding: '4px 10px', fontSize: 12.5,
                      }}
                    >
                      <span style={{ fontWeight: 500 }}>{svc.name}</span>
                      <span style={{ color: 'var(--primary)', fontWeight: 600 }}>{formatRial(svc.price_rials)}</span>
                      <button
                        type="button"
                        style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--danger)', padding: 0, fontSize: 14, lineHeight: 1 }}
                        onClick={() => setSelectedServices((p) => p.filter((s) => s.service_item_uuid !== svc.service_item_uuid))}
                      >×</button>
                    </div>
                  ))}
                </div>
              )}
            </div>

            <div style={{ background: 'var(--primary-subtle)', border: '1px solid oklch(0.88 0.05 256)', borderRadius: 10, padding: 14 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6, fontSize: 13, color: 'var(--text-3)' }}>
                <span>جمع خدمات</span>
                <span>{formatRial(servicesTotal)}</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontWeight: 700, fontSize: 15 }}>
                <span>مبلغ نهایی</span>
                <span style={{ color: 'var(--primary)' }}>{formatRial(finalPrice)}</span>
              </div>
            </div>

            <div style={{ display: 'flex', gap: 8 }}>
              <button type="submit" className="btn primary" disabled={createSessionMut.isPending}>
                {createSessionMut.isPending ? 'در حال ذخیره...' : 'ثبت مراجعه'}
              </button>
              <button type="button" className="btn" onClick={() => setSessionModal(false)}>انصراف</button>
            </div>
          </div>
        </form>
      </Modal>

      <EditSessionModal
        session={editSession}
        onClose={() => setEditSession(null)}
        onSave={(uuid, body) => updateSessionMut.mutate({ uuid, body })}
        loading={updateSessionMut.isPending}
      />
    </>
  );
}

function SessionRow({ session, onEdit }: { session: PatientSession; onEdit: (s: PatientSession) => void }) {
  const [open, setOpen] = useState(false);
  const badgeColor = PAYMENT_BADGE[session.payment_method] ?? 'gray';

  return (
    <div style={{
      borderBottom: '1px solid var(--border)',
      transition: 'background 0.1s',
    }}>
      <div
        style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          padding: '12px 16px', cursor: 'pointer',
        }}
        onClick={() => setOpen(!open)}
      >
        <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
          <div style={{
            width: 8, height: 8, borderRadius: '50%',
            background: open ? 'var(--primary)' : 'var(--border)',
            transition: 'background 0.15s', flexShrink: 0,
          }} />
          <span style={{ fontSize: 13, color: 'var(--text-3)' }}>{formatDateTime(session.created_at)}</span>
          <span className={`badge ${badgeColor}`}>
            {PAYMENT_LABELS[session.payment_method] ?? session.payment_method}
          </span>
          <b style={{ fontSize: 14, color: 'var(--primary)' }}>{formatRial(session.final_price_rials)}</b>
        </div>
        <button
          className="btn sm"
          onClick={(e) => { e.stopPropagation(); onEdit(session); }}
          title="ویرایش مراجعه"
        >
          <PencilIcon style={{ width: 14 }} />
        </button>
      </div>

      {open && (
        <div style={{ padding: '0 16px 14px' }}>
          <div style={{
            background: 'var(--surface)',
            border: '1px solid var(--border)',
            borderRadius: 10,
            padding: 14,
            display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12, fontSize: 13,
          }}>
            <div>
              <div style={{ color: 'var(--text-3)', marginBottom: 4, fontSize: 12 }}>قیمت ویزیت</div>
              <div style={{ fontWeight: 600 }}>{formatRial(session.visit_price_rials)}</div>
            </div>
            <div>
              <div style={{ color: 'var(--text-3)', marginBottom: 4, fontSize: 12 }}>تخفیف بیمه پایه</div>
              <div style={{ fontWeight: 600 }}>{formatNumber(parseFloat(session.base_insurance_discount_percent))}٪</div>
            </div>
            <div>
              <div style={{ color: 'var(--text-3)', marginBottom: 4, fontSize: 12 }}>جمع خدمات</div>
              <div style={{ fontWeight: 600 }}>{formatRial(session.services_total_rials)}</div>
            </div>
            {session.notes && (
              <div style={{ gridColumn: '1 / -1', borderTop: '1px solid var(--border)', paddingTop: 10, marginTop: 2 }}>
                <div style={{ color: 'var(--text-3)', marginBottom: 4, fontSize: 12 }}>یادداشت</div>
                <div style={{ lineHeight: 1.6 }}>{session.notes}</div>
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  );
}

function EditSessionModal({
  session, onClose, onSave, loading,
}: {
  session: PatientSession | null;
  onClose: () => void;
  onSave: (uuid: string, body: object) => void;
  loading: boolean;
}) {
  const [notes, setNotes]   = useState('');
  const [method, setMethod] = useState('cash');

  React.useEffect(() => {
    if (session) { setNotes(session.notes ?? ''); setMethod(session.payment_method); }
  }, [session]);

  return (
    <Modal open={!!session} onClose={onClose} title="ویرایش مراجعه">
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        <div className="field">
          <label>روش پرداخت</label>
          <select value={method} onChange={(e) => setMethod(e.target.value)}>
            {Object.entries(PAYMENT_LABELS).map(([v, l]) => (
              <option key={v} value={v}>{l}</option>
            ))}
          </select>
        </div>
        <div className="field">
          <label>یادداشت</label>
          <textarea value={notes} onChange={(e) => setNotes(e.target.value)} rows={3} />
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button
            className="btn primary"
            disabled={loading}
            onClick={() => session && onSave(session.uuid, { notes, payment_method: method })}
          >
            {loading ? 'در حال ذخیره...' : 'ذخیره'}
          </button>
          <button className="btn" onClick={onClose}>انصراف</button>
        </div>
      </div>
    </Modal>
  );
}

export default function MyPatientsPage() {
  return (
    <FeatureGate feature="patient_records">
      <MyPatientsPageInner />
    </FeatureGate>
  );
}