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,
} 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';

const LIMIT = 20;
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;
}

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

  const qs = new URLSearchParams({ page: String(page), limit: String(LIMIT) });
  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={() => setView('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={() => setView('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) * LIMIT + 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 style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))', gap: 14 }}>
          {records.map((r) => (
            <div key={r.uuid} style={{ background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r-lg)', padding: 16 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 10 }}>
                <span style={{ fontWeight: 700, fontSize: 15 }}>{r.user_name || '—'}</span>
                <PatientTagsCell record={r} />
              </div>
              <div style={{ fontSize: 12.5, color: 'var(--text-3)', display: 'flex', flexDirection: 'column', gap: 4 }}>
                <span>شماره پرونده: {r.record_number || '—'}</span>
                <span style={{ direction: 'ltr', textAlign: 'right' }}>تماس: {r.user_mobile || '—'}</span>
                <span style={{ direction: 'ltr', textAlign: 'right' }}>کد ملی: {r.user_national_code || '—'}</span>
              </div>
              <div style={{ display: 'flex', gap: 8, marginTop: 12, borderTop: '1px solid var(--border)', paddingTop: 10 }}>
                <Link to={viewHref(r)} className="btn sm ghost" style={{ flex: 1, justifyContent: 'center', color: 'var(--primary)' }}><EyeIcon style={{ width: 15 }} /> مشاهده</Link>
                <Link to={editHref(r)} className="btn sm ghost" style={{ flex: 1, justifyContent: 'center', color: 'var(--accent)' }}><PencilIcon style={{ width: 15 }} /> ویرایش</Link>
              </div>
            </div>
          ))}
        </div>
      )}

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

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