clinicpro/assets/admin/pages/PatientsListPage.tsx

import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { Link, useNavigate } from 'react-router-dom';
import {
  PlusIcon, PencilIcon, EyeIcon, MagnifyingGlassIcon, AdjustmentsHorizontalIcon,
  Squares2X2Icon, TableCellsIcon, ExclamationCircleIcon, IdentificationIcon,
  UserIcon, EllipsisHorizontalIcon,
} from '@heroicons/react/24/outline';
import { api } from '../lib/api';
import type { ApiResponse } from '../lib/api';
import type { PatientRecord } from '../types';
import { formatNumber, toDate } from '../lib/utils';
import Pagination from '../components/ui/Pagination';
import PatientTagsCell from '../components/PatientTagsCell';
import PatientsFilterModal, { type PatientFilters } from '../components/PatientsFilterModal';

// tauri /files paginates card view by 16 and table view by 12.
const CARD_PAGE_SIZE = 16;
const TABLE_PAGE_SIZE = 12;
const EMPTY: PatientRecord[] = [];

/** unix start-of-day for `from`, end-of-day for `to`, from a gregorian Y-m-d. */
function dayBound(value: string | undefined, end: boolean): number | undefined {
  if (!value) return undefined;
  const d = toDate(value);
  if (!d) return undefined;
  const secs = Math.floor(d.setHours(0, 0, 0, 0) / 1000);
  return end ? secs + 86399 : secs;
}

/** Number of filters currently applied (for the button badge). */
function countFilters(f: PatientFilters): number {
  return [f.gender, f.insurance_id, f.admitted_from, f.admitted_to, f.service_status, f.has_debt || undefined, f.tags?.length ? '1' : undefined]
    .filter(Boolean).length;
}

/**
 * A single patient card — mirrors tauri `files/list/CardView` pixel-for-pixel
 * (avatar + name + ⋮ menu header, file-number/mobile rows, tags footer).
 * The whole card navigates to the detail; the ⋮ menu offers view/edit.
 */
function PatientCard({ r, onView, onEdit }: { r: PatientRecord; onView: () => void; onEdit: () => void }) {
  const [menu, setMenu] = useState(false);
  return (
    <div
      className="bg-white dark:bg-[#222433] rounded-[6px] p-[14px] border border-[#EDEDED] dark:border-[#35343D] shadow-sm transition-all duration-300 hover:shadow-md hover:-translate-y-1 cursor-pointer"
      onClick={(e) => { if ((e.target as HTMLElement).closest('.more-square-icon')) return; onView(); }}
    >
      {/* نام بیمار */}
      <div className="flex items-center justify-between gap-[6px] mb-[12px] pb-[8px] border-b border-[#E0E0E0] dark:border-[#404040]">
        <div className="flex items-center gap-[6px] flex-1 min-w-0">
          <span style={{ width: 28, height: 28, borderRadius: '50%', background: 'var(--primary-soft)', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
            <UserIcon style={{ width: 16, color: 'var(--primary)' }} />
          </span>
          <h3 className="text-[#525252] dark:text-[#D7D8ED] text-[14px] font-semibold truncate">{r.user_name || '—'}</h3>
        </div>
        <div className="flex-shrink-0 more-square-icon" style={{ position: 'relative' }}>
          <button
            type="button" aria-label="عملیات" onClick={(e) => { e.stopPropagation(); setMenu((v) => !v); }}
            style={{ display: 'grid', placeItems: 'center', width: 25, height: 25, border: 'none', background: 'none', cursor: 'pointer', color: 'var(--text-3)' }}
          >
            <EllipsisHorizontalIcon style={{ width: 20 }} />
          </button>
          {menu && (
            <>
              <div style={{ position: 'fixed', inset: 0, zIndex: 60 }} onClick={(e) => { e.stopPropagation(); setMenu(false); }} />
              <div style={{ position: 'absolute', top: 28, insetInlineStart: 0, zIndex: 61, minWidth: 130, background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r-sm)', boxShadow: 'var(--shadow)', padding: 6, display: 'flex', flexDirection: 'column', gap: 2 }}>
                <button type="button" className="btn sm ghost" style={{ justifyContent: 'flex-start', color: 'var(--primary)' }} onClick={(e) => { e.stopPropagation(); setMenu(false); onView(); }}><EyeIcon style={{ width: 15 }} /> مشاهده</button>
                <button type="button" className="btn sm ghost" style={{ justifyContent: 'flex-start', color: 'var(--accent)' }} onClick={(e) => { e.stopPropagation(); setMenu(false); onEdit(); }}><PencilIcon style={{ width: 15 }} /> ویرایش</button>
              </div>
            </>
          )}
        </div>
      </div>

      <div className="mb-[12px] my-4" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {/* شماره پرونده */}
        <div className="flex items-start justify-between text-[15px]">
          <span className="text-[#616161] dark:text-[#A1A1A1] font-medium min-w-[65px]">شماره پرونده:</span>
          <span className="text-[#525252] dark:text-[#D7D8ED] truncate">{r.record_number || '—'}</span>
        </div>
        {/* شماره موبایل */}
        <div className="flex items-start justify-between text-[15px]">
          <span className="text-[#616161] dark:text-[#A1A1A1] font-medium min-w-[65px]">موبایل:</span>
          <span className="text-[#525252] dark:text-[#D7D8ED] truncate" dir="ltr">{r.user_mobile || '—'}</span>
        </div>
      </div>

      {/* فوتر: برچسب‌ها */}
      <div
        className="flex items-center pt-[8px] justify-end gap-[8px] border-t border-[#E0E0E0] dark:border-[#404040]"
        onClick={(e) => e.stopPropagation()}
      >
        <span className="text-[#616161] dark:text-[#A1A1A1] text-[14px] min-w-[65px]">برچسب‌ها:</span>
        <div className="flex-1 flex justify-end"><PatientTagsCell record={r} /></div>
      </div>
    </div>
  );
}

/** پرونده‌ها — patient records list. Ported from tauri /files (default card view). */
export default function PatientsListPage() {
  const navigate = useNavigate();
  const [page, setPage] = useState(1);
  const [search, setSearch] = useState('');
  const [view, setView] = useState<'table' | 'card'>('card');
  const [filterOpen, setFilterOpen] = useState(false);
  const [filters, setFilters] = useState<PatientFilters>({});

  const pageSize = view === 'card' ? CARD_PAGE_SIZE : TABLE_PAGE_SIZE;
  const switchView = (v: 'table' | 'card') => { setView(v); setPage(1); };

  const qs = new URLSearchParams({ page: String(page), limit: String(pageSize) });
  if (search) qs.set('search', search);
  if (filters.gender)         qs.set('gender', filters.gender);
  if (filters.insurance_id)   qs.set('insurance_id', filters.insurance_id);
  if (filters.service_status) qs.set('service_status', filters.service_status);
  if (filters.has_debt)       qs.set('has_debt', '1');
  if (filters.tags?.length)   qs.set('tags', filters.tags.join(','));
  const af = dayBound(filters.admitted_from, false);
  const at = dayBound(filters.admitted_to, true);
  if (af) qs.set('admitted_from', String(af));
  if (at) qs.set('admitted_to', String(at));

  const { data, isLoading } = useQuery<ApiResponse<PatientRecord[]> & { meta?: { totalRecords: number } }>({
    queryKey: ['patients', qs.toString()],
    queryFn: () => api.get(`/api/v1/patients?${qs.toString()}`),
  });

  const activeFilters = countFilters(filters);
  const records = data?.data ?? EMPTY;
  const total   = data?.meta?.totalRecords ?? 0;

  const editHref = (r: PatientRecord) => `/admin/patients/${r.uuid}/edit`;
  const viewHref = (r: PatientRecord) => `/admin/patients/${r.uuid}`;

  return (
    <div className="fade-in" style={{ maxWidth: 1160, margin: '0 auto' }}>
      {/* Header */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap', marginBottom: 20 }}>
        <h1 className="section-title">پرونده‌ها</h1>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
          <div style={{ position: 'relative' }}>
            <MagnifyingGlassIcon style={{ width: 16, position: 'absolute', insetInlineStart: 10, top: '50%', transform: 'translateY(-50%)', color: 'var(--text-3)', pointerEvents: 'none' }} />
            <input
              className="cp-input" placeholder="کد ملی، شماره پرونده یا نام مراجعه کننده را وارد کنید..."
              value={search} onChange={(e) => { setSearch(e.target.value); setPage(1); }}
              style={{ width: 320, maxWidth: '60vw', height: 40, paddingInlineStart: 34 }}
            />
          </div>
          {/* view toggle */}
          <div style={{ display: 'flex', border: '1px solid var(--border)', borderRadius: 'var(--r-sm)', overflow: 'hidden' }}>
            <button aria-label="نمایش کارتی" onClick={() => switchView('card')} style={{ padding: '8px 10px', border: 'none', cursor: 'pointer', background: view === 'card' ? 'var(--primary-soft)' : 'var(--surface)', color: view === 'card' ? 'var(--primary)' : 'var(--text-3)' }}>
              <Squares2X2Icon style={{ width: 18 }} />
            </button>
            <button aria-label="نمایش جدولی" onClick={() => switchView('table')} style={{ padding: '8px 10px', border: 'none', cursor: 'pointer', background: view === 'table' ? 'var(--primary-soft)' : 'var(--surface)', color: view === 'table' ? 'var(--primary)' : 'var(--text-3)' }}>
              <TableCellsIcon style={{ width: 18 }} />
            </button>
          </div>
          <button className="btn" aria-label="فیلترها" onClick={() => setFilterOpen(true)} style={{ height: 40, position: 'relative', width: 44, padding: 0, display: 'grid', placeItems: 'center', color: activeFilters ? 'var(--primary)' : undefined }}>
            <AdjustmentsHorizontalIcon style={{ width: 18 }} />
            {activeFilters > 0 && (
              <span style={{ position: 'absolute', top: -6, insetInlineEnd: -6, minWidth: 16, height: 16, padding: '0 4px', borderRadius: 999, background: 'var(--primary)', color: '#fff', fontSize: 10, display: 'grid', placeItems: 'center' }}>{formatNumber(activeFilters)}</span>
            )}
          </button>
          <button className="btn primary" style={{ height: 40 }} onClick={() => navigate('/admin/patients/new')}>
            <PlusIcon style={{ width: 16 }} /> تشکیل پرونده
          </button>
        </div>
      </div>

      {isLoading ? (
        <div style={{ padding: 24, color: 'var(--text-3)', fontSize: 13 }}>در حال بارگذاری...</div>
      ) : records.length === 0 ? (
        <div className="card" style={{ padding: '60px 0', textAlign: 'center', color: 'var(--text-3)' }}>
          <IdentificationIcon style={{ width: 52, margin: '0 auto 14px', display: 'block', opacity: 0.3 }} />
          <div style={{ fontSize: 14, color: 'var(--text-2)' }}>بیماری یافت نشد</div>
        </div>
      ) : view === 'table' ? (
        <div style={{ background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r-lg)', overflow: 'auto' }}>
          <table style={{ width: '100%', borderCollapse: 'collapse', minWidth: 760 }}>
            <thead>
              <tr style={{ background: 'var(--surface-2)', color: 'var(--text-2)', fontSize: 13 }}>
                {['ردیف', 'مراجعه کننده', 'برچسب ها', 'شماره پرونده', 'شماره تماس', 'کد ملی', 'عملیات'].map((h) => (
                  <th key={h} style={{ padding: '12px 14px', textAlign: 'center', fontWeight: 600, whiteSpace: 'nowrap' }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {records.map((r, i) => (
                <tr key={r.uuid} style={{ borderTop: '1px solid var(--border)', fontSize: 13.5, textAlign: 'center' }}>
                  <td style={{ padding: '12px 14px', color: 'var(--text-3)' }}>{formatNumber((page - 1) * pageSize + i + 1)}</td>
                  <td style={{ padding: '12px 14px' }}>
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontWeight: 600 }}>
                      {r.user_name || '—'}
                      {!r.user_national_code && <ExclamationCircleIcon style={{ width: 16, color: 'var(--danger)' }} />}
                    </span>
                  </td>
                  <td style={{ padding: '12px 14px' }}>
                    <PatientTagsCell record={r} />
                  </td>
                  <td style={{ padding: '12px 14px' }}>{r.record_number || '—'}</td>
                  <td style={{ padding: '12px 14px', direction: 'ltr' }}>{r.user_mobile || '—'}</td>
                  <td style={{ padding: '12px 14px', direction: 'ltr' }}>{r.user_national_code || '—'}</td>
                  <td style={{ padding: '12px 14px' }}>
                    <span style={{ display: 'inline-flex', gap: 8, justifyContent: 'center' }}>
                      <Link to={viewHref(r)} aria-label="مشاهده" style={{ color: 'var(--primary)' }}><EyeIcon style={{ width: 18 }} /></Link>
                      <Link to={editHref(r)} aria-label="ویرایش" style={{ color: 'var(--accent)' }}><PencilIcon style={{ width: 18 }} /></Link>
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      ) : (
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-[12px] mt-[16px]">
          {records.map((r) => (
            <PatientCard key={r.uuid} r={r} onView={() => navigate(viewHref(r))} onEdit={() => navigate(editHref(r))} />
          ))}
        </div>
      )}

      <div style={{ marginTop: 20, display: 'flex', justifyContent: 'center' }}>
        <Pagination page={page} total={total} limit={pageSize} onPageChange={setPage} />
      </div>

      <PatientsFilterModal
        open={filterOpen}
        value={filters}
        onClose={() => setFilterOpen(false)}
        onApply={(f) => { setFilters(f); setPage(1); setFilterOpen(false); }}
      />
    </div>
  );
}