import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { Link, useNavigate } from 'react-router-dom';
import {
  PencilIcon, EyeIcon, 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';
import {
  SearchHeaderP, TurnsFilter, PatientsGridView, PatientsCategoryView, AddTurn,
} from '../components/icons/FilesToolbarIcons';

// 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).
 */
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, error } = 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}`;

  // نمایش جدولی/کارتی — دو دکمه با آیکون SVG سفارشی (عین tauri ViewModeToggle).
  const viewToggle = (
    <div className="flex border border-[#E0E0E0] dark:border-[#404040] rounded-[4px] overflow-hidden shrink-0">
      <button type="button" aria-label="نمایش جدولی" onClick={() => switchView('table')} style={{ padding: 8, border: 'none', cursor: 'pointer', display: 'grid', placeItems: 'center', background: view === 'table' ? '#f4f5fd' : 'transparent' }}>
        <PatientsGridView color={view === 'table' ? '#5559ce' : '#616161'} />
      </button>
      <button type="button" aria-label="نمایش کارتی" onClick={() => switchView('card')} style={{ padding: 8, border: 'none', cursor: 'pointer', display: 'grid', placeItems: 'center', background: view === 'card' ? '#f4f5fd' : 'transparent' }}>
        <PatientsCategoryView color={view === 'card' ? '#5559ce' : '#616161'} />
      </button>
    </div>
  );

  return (
    <div className="fade-in">
      {/* Head — تیتر تنها (tauri files/head) */}
      <p className="text-[#525252] dark:text-[#D7D8ED] text-[16px] md:text-[18px] lg:text-[20px] font-bold">پرونده‌ها</p>

      {/* Inputs — ردیف کنترل‌ها (tauri files/inputs) */}
      <div className="my-[16px] md:my-[20px] lg:my-[24px]">
        <div className="flex flex-col lg:flex-row items-stretch lg:items-center gap-[16px] lg:gap-[20px]">
          {/* جستجو + سوییچ نما */}
          <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-3 flex-1 w-full">
            <div className="w-full md:w-[442px]">
              <div className="flex items-center rounded-[6px] border border-[#EFEFEF] dark:border-[#35343D] bg-[#FAFAFA] dark:bg-[#222433]" style={{ height: 48, paddingInline: 4 }}>
                <input
                  dir="rtl"
                  value={search}
                  onChange={(e) => { setSearch(e.target.value); setPage(1); }}
                  placeholder="کد ملی، شماره پرونده یا نام مراجعه کننده را وارد کنید..."
                  className="text-[#525252] dark:text-[#D7D8ED]"
                  style={{ flex: 1, minWidth: 0, background: 'transparent', border: 'none', outline: 'none', fontSize: 13, textAlign: 'left' }}
                />
                <span style={{ width: 40, height: 40, marginInlineEnd: -4, flexShrink: 0, borderRadius: 6, background: '#5559CE', display: 'grid', placeItems: 'center' }}>
                  <SearchHeaderP color="white" />
                </span>
              </div>
            </div>
            {viewToggle}
          </div>

          {/* فیلتر + تشکیل پرونده */}
          <div className="flex items-center w-full lg:w-auto justify-between lg:justify-end" style={{ gap: 12 }}>
            <button
              type="button" aria-label="فیلترها" onClick={() => setFilterOpen(true)}
              className="flex items-center justify-center rounded-[4px] cursor-pointer"
              style={{ width: 62, height: 48, border: '1px solid #5559ce', background: 'transparent', position: 'relative' }}
            >
              <TurnsFilter color="#5559ce" />
              {activeFilters > 0 && (
                <span style={{ position: 'absolute', top: -6, insetInlineEnd: -6, minWidth: 16, height: 16, padding: '0 4px', borderRadius: 999, background: '#5559ce', color: '#fff', fontSize: 10, display: 'grid', placeItems: 'center' }}>{formatNumber(activeFilters)}</span>
              )}
            </button>
            <button
              type="button" onClick={() => navigate('/admin/patients/new')}
              className="flex items-center justify-center gap-2 rounded-[4px] cursor-pointer"
              style={{ height: 48, minWidth: 137, background: '#5559ce', border: 'none', padding: '0 16px' }}
            >
              <AddTurn color="#fff" />
              <span style={{ color: '#fff', fontSize: 14 }}>تشکیل پرونده</span>
            </button>
          </div>
        </div>
      </div>

      {isLoading ? (
        <div style={{ padding: 24, color: 'var(--text-3)', fontSize: 13 }}>در حال بارگذاری...</div>
      ) : error ? (
        /* «دسترسی ندارید» با «بیماری یافت نشد» یکی نیست — پیام سرور را نشان بده. */
        <div className="card" style={{ padding: '60px 0', textAlign: 'center' }}>
          <IdentificationIcon style={{ width: 52, margin: '0 auto 14px', display: 'block', opacity: 0.3, color: 'var(--danger)' }} />
          <div style={{ fontSize: 14, color: 'var(--danger)' }}>
            {(error as any)?.message || 'دسترسی به پرونده‌ها امکان‌پذیر نیست'}
          </div>
          <div style={{ fontSize: 13, color: 'var(--text-3)', marginTop: 8 }}>
            اگر به‌تازگی محیط کاری‌تان تغییر کرده، از منوی بالا محیط درست را انتخاب کنید.
          </div>
        </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>
  );
}