import { useEffect, useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { api } from '../lib/api';
import type { ApiResponse } from '../lib/api';
import Modal from './ui/Modal';
import PersianDateInput from './ui/PersianDateInput';
import SearchableSelect from './ui/SearchableSelect';

export interface PatientFilters {
  gender?: string;         // male | female
  insurance_id?: string;
  admitted_from?: string;  // gregorian Y-m-d
  admitted_to?: string;
  service_status?: string; // pending | completed
  has_debt?: boolean;
  tags?: string[];         // tenant-tag uuids
}

interface TenantTag { uuid: string; name: string; color: string }
interface PricingInsurance { insurance_id: number; insurance_name: string; type: string }

const EMPTY: PatientFilters = {};

function Segmented({ value, onChange, options }: { value: string | undefined; onChange: (v: string) => void; options: { label: string; value: string }[] }) {
  return (
    <div style={{ display: 'inline-flex', border: '1px solid var(--border)', borderRadius: 'var(--r-sm)', overflow: 'hidden' }}>
      {options.map((o) => {
        const active = (value ?? '') === o.value;
        return (
          <button
            key={o.value}
            type="button"
            onClick={() => onChange(o.value)}
            style={{
              padding: '7px 14px', border: 'none', cursor: 'pointer', fontSize: 13,
              background: active ? 'var(--primary-soft)' : 'var(--surface)',
              color: active ? 'var(--primary)' : 'var(--text-2)',
            }}
          >
            {o.label}
          </button>
        );
      })}
    </div>
  );
}

/** فیلترها — advanced patient-list filter modal, ported from tauri FilesFilterModal. */
export default function PatientsFilterModal({ open, onClose, value, onApply }: {
  open: boolean; onClose: () => void; value: PatientFilters; onApply: (f: PatientFilters) => void;
}) {
  const [f, setF] = useState<PatientFilters>(value);
  useEffect(() => { if (open) setF(value); }, [open, value]);

  const { data: tagsData } = useQuery<ApiResponse<TenantTag[]>>({
    queryKey: ['tenant-tags'], queryFn: () => api.get('/api/v1/tenant-tags'), enabled: open,
  });
  const tags = tagsData?.data ?? [];

  const { data: pricingData } = useQuery<ApiResponse<{ insurances: PricingInsurance[] }>>({
    queryKey: ['insurance-pricing'], queryFn: () => api.get('/api/v1/insurance-pricing'), enabled: open,
  });
  const insurances = (pricingData?.data?.insurances ?? []).filter((i) => i.type === 'basic');

  const set = <K extends keyof PatientFilters>(k: K, v: PatientFilters[K]) => setF((p) => ({ ...p, [k]: v }));
  const toggleTag = (uuid: string) => {
    const cur = f.tags ?? [];
    set('tags', cur.includes(uuid) ? cur.filter((u) => u !== uuid) : [...cur, uuid]);
  };

  const label: React.CSSProperties = { fontSize: 13, fontWeight: 700, color: 'var(--text-2)', marginBottom: 8, display: 'block' };
  const selectedTags = f.tags ?? [];

  return (
    <Modal open={open} onClose={onClose} title="فیلترها" size="md" footer={
      <>
        <button className="btn ghost sm" onClick={() => setF(EMPTY)} style={{ color: 'var(--accent)' }}>حذف همه</button>
        <button className="btn primary sm" onClick={() => onApply(f)}>اعمال تغییرات</button>
      </>
    }>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
        <div>
          <label style={label}>تاریخ پذیرش</label>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ flex: 1 }}><PersianDateInput value={f.admitted_from ?? ''} onChange={(v) => set('admitted_from', v)} placeholder="از تاریخ" /></div>
            <span style={{ fontSize: 13, color: 'var(--text-3)' }}>تا</span>
            <div style={{ flex: 1 }}><PersianDateInput value={f.admitted_to ?? ''} onChange={(v) => set('admitted_to', v)} placeholder="تا تاریخ" /></div>
          </div>
        </div>

        <div>
          <label style={label}>نوع بیمه</label>
          <SearchableSelect
            options={insurances.map((i) => ({ value: String(i.insurance_id), label: i.insurance_name }))}
            value={f.insurance_id ?? null}
            onChange={(v) => set('insurance_id', v ? String(v) : undefined)}
            placeholder="همه بیمه‌ها"
            isClearable
            height={38}
          />
        </div>

        <div>
          <label style={label}>وضعیت سرویس</label>
          <Segmented
            value={f.service_status ?? ''}
            onChange={(v) => set('service_status', v || undefined)}
            options={[{ label: 'همه', value: '' }, { label: 'تکمیل نشده', value: 'pending' }, { label: 'تکمیل شده', value: 'completed' }]}
          />
        </div>

        <div>
          <label style={label}>وضعیت پرونده</label>
          <label className="switch" title="فقط پرونده‌های دارای بدهی" style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
            <input type="checkbox" checked={!!f.has_debt} onChange={(e) => set('has_debt', e.target.checked)} aria-label="فقط پرونده‌های دارای بدهی" />
            <span className="switch-track"><span className="switch-thumb" /></span>
            <span style={{ fontSize: 13, color: 'var(--text-2)' }}>فقط پرونده‌های دارای بدهی</span>
          </label>
        </div>

        <div>
          <label style={label}>جنسیت بیمار</label>
          <Segmented
            value={f.gender ?? ''}
            onChange={(v) => set('gender', v || undefined)}
            options={[{ label: 'هر دو', value: '' }, { label: 'آقا', value: 'male' }, { label: 'خانم', value: 'female' }]}
          />
        </div>

        <div>
          <label style={label}>برچسب</label>
          {tags.length === 0 ? (
            <span style={{ fontSize: 12.5, color: 'var(--text-3)' }}>برچسبی تعریف نشده است.</span>
          ) : (
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
              {tags.map((t) => {
                const on = selectedTags.includes(t.uuid);
                return (
                  <button
                    key={t.uuid} type="button" onClick={() => toggleTag(t.uuid)}
                    style={{
                      fontSize: 12, height: 26, padding: '0 10px', borderRadius: 999, cursor: 'pointer',
                      border: '1px solid var(--border)',
                      background: on ? t.color : 'var(--surface-2)', color: on ? 'var(--on-primary)' : 'var(--text-2)',
                    }}
                  >
                    {t.name}
                  </button>
                );
              })}
            </div>
          )}
        </div>
      </div>
    </Modal>
  );
}
