"use client";

import { Select } from "@/src/shared/ui";
import { useHealthcareLookups } from "@/src/modules/healthcare/hooks/useHealthcareLookups";

export function ClinicSelect({
  value,
  onChange,
  required,
  label = "کلینیک",
}: {
  value: string;
  onChange: (v: string) => void;
  required?: boolean;
  label?: string;
}) {
  const { clinics, isLoading } = useHealthcareLookups();
  return (
    <label className="block text-sm">
      <span className="mb-1 block text-[var(--muted)]">
        {label}
        {required ? " *" : ""}
      </span>
      <Select
        value={value}
        onChange={(e) => onChange(e.target.value)}
        disabled={isLoading}
        required={required}
      >
        <option value="">انتخاب کلینیک…</option>
        {clinics.map((c) => (
          <option key={c.id} value={c.id}>
            {c.name} ({c.code})
          </option>
        ))}
      </Select>
    </label>
  );
}

export function DoctorSelect({
  value,
  onChange,
  clinicId,
  required,
  label = "پزشک",
}: {
  value: string;
  onChange: (v: string) => void;
  clinicId?: string;
  required?: boolean;
  label?: string;
}) {
  const { doctors, isLoading } = useHealthcareLookups();
  const filtered = clinicId ? doctors.filter((d) => d.clinic_id === clinicId) : doctors;
  return (
    <label className="block text-sm">
      <span className="mb-1 block text-[var(--muted)]">
        {label}
        {required ? " *" : ""}
      </span>
      <Select value={value} onChange={(e) => onChange(e.target.value)} disabled={isLoading} required={required}>
        <option value="">انتخاب پزشک…</option>
        {filtered.map((d) => (
          <option key={d.id} value={d.id}>
            {d.display_name} ({d.code})
          </option>
        ))}
      </Select>
    </label>
  );
}

export function PatientSelect({
  value,
  onChange,
  required,
  label = "بیمار",
}: {
  value: string;
  onChange: (v: string) => void;
  required?: boolean;
  label?: string;
}) {
  const { patients, isLoading } = useHealthcareLookups();
  return (
    <label className="block text-sm">
      <span className="mb-1 block text-[var(--muted)]">
        {label}
        {required ? " *" : ""}
      </span>
      <Select value={value} onChange={(e) => onChange(e.target.value)} disabled={isLoading} required={required}>
        <option value="">انتخاب بیمار…</option>
        {patients.map((p) => (
          <option key={p.id} value={p.id}>
            {p.display_name} ({p.code})
          </option>
        ))}
      </Select>
    </label>
  );
}

export function PharmacySelect({
  value,
  onChange,
  pharmacies,
  required,
  label = "داروخانه",
}: {
  value: string;
  onChange: (v: string) => void;
  pharmacies: { id: string; name: string; code: string }[];
  required?: boolean;
  label?: string;
}) {
  return (
    <label className="block text-sm">
      <span className="mb-1 block text-[var(--muted)]">
        {label}
        {required ? " *" : ""}
      </span>
      <Select value={value} onChange={(e) => onChange(e.target.value)} required={required}>
        <option value="">انتخاب داروخانه…</option>
        {pharmacies.map((p) => (
          <option key={p.id} value={p.id}>
            {p.name} ({p.code})
          </option>
        ))}
      </Select>
    </label>
  );
}
