// ============================================================
// WELL VISIT — /api/well-visit/note (minimum-viable single-pane
// port; the vanilla tab has 4 sub-panes for byvisit / milestones /
// SSHADESS / note — each becomes its own sub-route or tab in a
// follow-up commit).
// ============================================================

import { useState } from 'react';
import { useMutation } from '@tanstack/react-query';
import { api, ApiError } from '@/lib/api';
import type { VisitNoteOk } from '@/shared/types';

export default function WellVisit() {
  const [patientAge, setPatientAge] = useState('');
  const [patientGender, setPatientGender] = useState('');
  const [visitAge, setVisitAge] = useState('');
  const [vitals, setVitals] = useState('');
  const [measurements, setMeasurements] = useState('');
  const [parentConcerns, setParentConcerns] = useState('');
  const [transcript, setTranscript] = useState('');
  const [screenings, setScreenings] = useState('');
  const [vaccines, setVaccines] = useState('');
  const [noteStyle, setNoteStyle] = useState<'full' | 'short'>('full');
  const [result, setResult] = useState<string | null>(null);

  const generate = useMutation<VisitNoteOk, Error, any>({
    mutationFn: (body) => api.post<VisitNoteOk>('/api/well-visit/note', body),
    onSuccess: (data) => setResult(data.note),
  });

  function submit(e: React.FormEvent) {
    e.preventDefault();
    setResult(null);
    generate.mutate({
      patientAge, patientGender, visitAge,
      vitals, measurements, parentConcerns,
      transcript, screenings, vaccines,
      noteStyle,
    });
  }

  const input = 'w-full rounded-md border border-input bg-background px-3 py-2 text-sm';

  return (
    <div className="max-w-4xl mx-auto p-6 space-y-4">
      <header>
        <h1 className="text-2xl font-semibold">Well Visit</h1>
        <p className="text-sm text-muted-foreground">
          Preventive-care note generation. Milestones and SSHADESS sub-tabs land in a follow-up; this first port covers the Visit Note pane.
        </p>
      </header>

      <form onSubmit={submit} className="space-y-4">
        <div className="grid grid-cols-3 gap-3">
          <label className="flex flex-col gap-1">
            <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Age</span>
            <input className={input} value={patientAge} onChange={(e) => setPatientAge(e.target.value)} />
          </label>
          <label className="flex flex-col gap-1">
            <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Gender</span>
            <select className={input} value={patientGender} onChange={(e) => setPatientGender(e.target.value)}>
              <option value="">Select</option><option>Male</option><option>Female</option>
            </select>
          </label>
          <label className="flex flex-col gap-1">
            <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Visit age</span>
            <input className={input} placeholder="e.g. 6 months" value={visitAge} onChange={(e) => setVisitAge(e.target.value)} />
          </label>
        </div>

        <div className="grid grid-cols-2 gap-3">
          <label className="flex flex-col gap-1">
            <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Vital signs</span>
            <textarea className={input + ' min-h-[60px] font-mono text-xs'} value={vitals} onChange={(e) => setVitals(e.target.value)} />
          </label>
          <label className="flex flex-col gap-1">
            <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Measurements / growth</span>
            <textarea className={input + ' min-h-[60px] font-mono text-xs'} value={measurements} onChange={(e) => setMeasurements(e.target.value)} />
          </label>
        </div>

        <label className="flex flex-col gap-1">
          <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Parent / patient concerns</span>
          <textarea className={input + ' min-h-[60px] text-sm'} value={parentConcerns} onChange={(e) => setParentConcerns(e.target.value)} />
        </label>

        <label className="flex flex-col gap-1">
          <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Transcript / dictation</span>
          <textarea className={input + ' min-h-[160px] font-mono text-sm'} value={transcript} onChange={(e) => setTranscript(e.target.value)} />
        </label>

        <div className="grid grid-cols-2 gap-3">
          <label className="flex flex-col gap-1">
            <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Screenings completed</span>
            <textarea className={input + ' min-h-[60px] text-xs'} value={screenings} onChange={(e) => setScreenings(e.target.value)} />
          </label>
          <label className="flex flex-col gap-1">
            <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Immunizations today</span>
            <textarea className={input + ' min-h-[60px] text-xs'} value={vaccines} onChange={(e) => setVaccines(e.target.value)} />
          </label>
        </div>

        <label className="flex flex-col gap-1">
          <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Note style</span>
          <select className={input} value={noteStyle} onChange={(e) => setNoteStyle(e.target.value as 'full' | 'short')}>
            <option value="full">Full encounter note</option>
            <option value="short">Brief SOAP</option>
          </select>
        </label>

        {generate.error && <div className="text-sm text-destructive">{(generate.error as ApiError).message}</div>}

        <button
          type="submit"
          disabled={generate.isPending || (!patientAge.trim() && !visitAge.trim())}
          className="rounded-md bg-primary text-primary-foreground px-4 py-2 text-sm font-medium disabled:opacity-50"
        >
          {generate.isPending ? 'Generating…' : 'Generate Well Visit Note'}
        </button>
      </form>

      {result && (
        <section className="rounded-lg border border-border bg-card">
          <header className="px-4 py-2 border-b border-border flex items-center justify-between bg-muted/40">
            <h2 className="text-sm font-semibold">Well Visit Note</h2>
            <button onClick={() => navigator.clipboard.writeText(result)} className="text-xs text-muted-foreground underline">Copy</button>
          </header>
          <div className="p-4 whitespace-pre-wrap text-sm">{result}</div>
        </section>
      )}
    </div>
  );
}