import { useMemo, useState } from 'react';
import type { Observation } from 'fhir/r4';
import { Button } from '../../../../components/ui/button.tsx';
import { Input } from '../../../../components/ui/input.tsx';
import { Label } from '../../../../components/ui/label.tsx';
import { Textarea } from '../../../../components/ui/textarea.tsx';
import { Alert, AlertDescription } from '../../../../components/ui/alert.tsx';
import { AlertCircle } from 'lucide-react';
import { ToggleGroupControl, ToggleGroupControlOption } from '../../../../components/ui/toggle-group-control.tsx';
import type { SelfReport, SelfReportSource } from '../../../../utils/selfReport';
import {
  PATIENT_MEASUREMENTS,
  findMeasurement,
  buildPatientObservations,
  buildSelfReportReading,
  buildNotedSelfReportReading,
  type PatientReadingInput,
} from './patientObservationCatalog.ts';
import './SimpleReadingForm.css';

export interface SimpleReadingFormProps {
  patientId: string;
  // Who is recording the reading (e.g. "Patient/123" or "RelatedPerson/456").
  // Defaults to the patient when omitted (direct self-entry).
  performerReference?: string;
  recentHeight?: { value: number; unitCode: string };
  initial?: PatientReadingInput;
  /** An existing reading is being changed: its recorded time is kept unless changed, and a When left blank refuses. */
  editing?: boolean;
  saving?: boolean;
  error?: string | null;
  // This opening saves nothing more (refused, unconfirmed or stopped part way); the page says why.
  ended?: boolean;
  /** The patient is adding a new reading about themself, so it may be their own report. */
  askSource?: boolean;
  /** The patient is changing their own report: it carries no note, so where it came from is always asked again. */
  reportOnly?: boolean;
  /** The answers offered; a reading copied from another record can only stay copied. */
  sources?: readonly SelfReportSource[];
  onSave: (observations: Observation[], report?: SelfReport) => void;
  onCancel: () => void;
}

// datetime-local string for "now" or from an ISO instant.
const toLocalInput = (iso?: string): string => {
  const d = iso ? new Date(iso) : new Date();
  const pad = (n: number) => String(n).padStart(2, '0');
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
};

const isLocalTime = (localValue: string): boolean =>
  localValue.trim() !== '' && !Number.isNaN(new Date(localValue).getTime());

const SimpleReadingForm = ({ patientId, performerReference, recentHeight, initial, editing, saving, error, ended, askSource, reportOnly, sources, onSave, onCancel }: SimpleReadingFormProps) => {
  const [key, setKey] = useState<string>(initial?.measurementKey ?? PATIENT_MEASUREMENTS[0].key);
  const measurement = useMemo(() => findMeasurement(key)!, [key]);
  const [unitCode, setUnitCode] = useState<string>(initial?.unitCode ?? measurement.units[0].code);
  const [value, setValue] = useState<string>(initial?.value != null ? String(initial.value) : '');
  const [systolic, setSystolic] = useState<string>(initial?.systolic != null ? String(initial.systolic) : '');
  const [diastolic, setDiastolic] = useState<string>(initial?.diastolic != null ? String(initial.diastolic) : '');
  // An edit shows the recorded time (blank when none was recorded), and sends it back exactly as stored unless changed.
  const recorded = editing ? initial?.effectiveDateTime || undefined : undefined;
  const recordedShown = recorded ? toLocalInput(recorded) : '';
  const [when, setWhen] = useState<string>(editing ? recordedShown : toLocalInput(initial?.effectiveDateTime));
  const whenMissing = !!editing && !isLocalTime(when);
  const [note, setNote] = useState<string>(initial?.note ?? '');
  const [touched, setTouched] = useState(false);
  // Asked, never assumed. A note cannot ride on a patient's own report, so a noted reading is saved the ordinary way.
  const [source, setSource] = useState<SelfReportSource>();
  const asksSource = !!askSource && (!!reportOnly || note.trim() === '');
  const offers = (answer: SelfReportSource) => !sources || sources.includes(answer);

  const onPickMeasurement = (nextKey: string) => {
    setKey(nextKey);
    const next = findMeasurement(nextKey)!;
    setUnitCode(next.units[0].code);
    setValue('');
    setSystolic('');
    setDiastolic('');
  };

  const num = (s: string): number | undefined => {
    const n = Number(s);
    return s.trim() !== '' && !Number.isNaN(n) ? n : undefined;
  };

  // Bounds (min/max) are calibrated to each measurement's default unit only. Only warn when
  // the reading is expressed in that default unit - a non-default unit (e.g. °C instead of
  // °F) would otherwise trip a false "unusual" warning without any per-unit conversion.
  const outOfRange = (n?: number): boolean =>
    n != null && measurement.min != null && measurement.max != null && (n < measurement.min || n > measurement.max);

  const isBp = measurement.inputType === 'bp';
  const valid = isBp ? num(systolic) != null && num(diastolic) != null : num(value) != null;
  const isDefaultUnit = unitCode === measurement.units[0].code;
  const bpOutOfRange = isBp && (outOfRange(num(systolic)) || outOfRange(num(diastolic)));
  const singleOutOfRange = !isBp && isDefaultUnit && outOfRange(num(value));

  // datetime-local can be cleared to '' by the user; never let that crash the save - fall
  // back to "now" instead of blocking submit.
  const toEffectiveIso = (localValue: string): string => {
    const d = new Date(localValue);
    return localValue.trim() !== '' && !Number.isNaN(d.getTime()) ? d.toISOString() : new Date().toISOString();
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setTouched(true);
    if (!valid || whenMissing || (asksSource && !source)) return;
    const input: PatientReadingInput = {
      measurementKey: key,
      effectiveDateTime: recorded && when === recordedShown ? recorded : toEffectiveIso(when),
      note,
      ...(isBp
        ? { systolic: num(systolic), diastolic: num(diastolic) }
        : { unitCode, value: num(value), ...(key === 'weight' && recentHeight && !reportOnly ? { knownHeight: recentHeight } : {}) }),
    };
    // A new reading with the patient's note goes by the same route, carrying the note and no answer about its source.
    const report = asksSource && source
      ? buildSelfReportReading(input, source)
      : askSource && !reportOnly && !editing ? buildNotedSelfReportReading(input) : undefined;
    onSave(buildPatientObservations(input, patientId, performerReference), report);
  };

  return (
    <form className="simple-reading-form" onSubmit={handleSubmit}>
      {error && (
        <Alert variant="destructive">
          <AlertCircle className="h-4 w-4" />
          <AlertDescription>{error}</AlertDescription>
        </Alert>
      )}

      <div className="simple-reading-form__row">
        <Label htmlFor="measurement-select">What did you measure?</Label>
        <select
          id="measurement-select"
          data-testid="measurement-select"
          className="border rounded p-2"
          value={key}
          onChange={(e) => onPickMeasurement(e.target.value)}
        >
          {PATIENT_MEASUREMENTS.map((m) => (
            <option key={m.key} value={m.key}>{m.label}</option>
          ))}
        </select>
      </div>

      {isBp ? (
        <div className="simple-reading-form__value-row">
          <div className="simple-reading-form__row">
            <Label htmlFor="systolic">Top number (systolic)</Label>
            <Input id="systolic" data-testid="systolic-input" inputMode="numeric" value={systolic} onChange={(e) => setSystolic(e.target.value)} />
          </div>
          <div className="simple-reading-form__row">
            <Label htmlFor="diastolic">Bottom number (diastolic)</Label>
            <Input id="diastolic" data-testid="diastolic-input" inputMode="numeric" value={diastolic} onChange={(e) => setDiastolic(e.target.value)} />
          </div>
          <span className="simple-reading-form__unit">mmHg</span>
        </div>
      ) : (
        <div className="simple-reading-form__value-row">
          <div className="simple-reading-form__row simple-reading-form__row--grow">
            <Label htmlFor="value">Reading</Label>
            <Input id="value" data-testid="value-input" inputMode="decimal" value={value} onChange={(e) => setValue(e.target.value)} />
          </div>
          {measurement.units.length > 1 ? (
            <select
              aria-label={`${measurement.label} unit`}
              data-testid="unit-select"
              className="simple-reading-form__unit border rounded p-2"
              value={unitCode}
              onChange={(e) => setUnitCode(e.target.value)}
            >
              {measurement.units.map((u) => (
                <option key={u.code} value={u.code}>{u.display}</option>
              ))}
            </select>
          ) : (
            <span className="simple-reading-form__unit">{measurement.units[0].display}</span>
          )}
        </div>
      )}

      {touched && !valid && (
        <p className="simple-reading-form__hint">Enter a number{isBp ? ' for both top and bottom.' : '.'}</p>
      )}
      {(bpOutOfRange || singleOutOfRange) && (
        <p className="simple-reading-form__hint">That looks unusual — double-check the number.</p>
      )}

      <div className="simple-reading-form__row">
        <Label htmlFor="when">When</Label>
        <Input id="when" type="datetime-local" value={when} onChange={(e) => setWhen(e.target.value)}
          aria-invalid={touched && whenMissing ? true : undefined} aria-describedby={touched && whenMissing ? 'when-hint' : undefined} />
        {touched && whenMissing && (
          <p id="when-hint" className="simple-reading-form__hint">Enter when this reading was taken.</p>
        )}
      </div>

      {!reportOnly && (
        <div className="simple-reading-form__row">
          <Label htmlFor="note">Note (optional)</Label>
          <Textarea id="note" value={note} onChange={(e) => setNote(e.target.value)} />
        </div>
      )}

      {asksSource && (
        <div className="simple-reading-form__row">
          <ToggleGroupControl label="Where does this reading come from?" value={source} isBlock disabled={saving}
            onChange={(next) => setSource(next as SelfReportSource)}>
            {offers('my-own-report') && <ToggleGroupControlOption value="my-own-report" label="I took it myself" />}
            {offers('from-another-record') && <ToggleGroupControlOption value="from-another-record" label="From another record" />}
          </ToggleGroupControl>
          {touched && !source && <p className="simple-reading-form__hint">Say where this reading comes from.</p>}
        </div>
      )}
      {askSource && !asksSource && (
        <p className="simple-reading-form__hint">A reading with a note is saved as an ordinary record, without where it came from.</p>
      )}

      <div className="simple-reading-form__actions">
        <Button type="button" variant="outline" onClick={onCancel} disabled={saving}>Cancel</Button>
        <Button type="submit" className="btn btn-blue" disabled={saving || ended || (asksSource && !source)}>{saving ? 'Saving…' : 'Save reading'}</Button>
      </div>
    </form>
  );
};

export default SimpleReadingForm;