'use client';

import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { AppointmentsStrip } from '@/components/treatment/AppointmentsStrip';
import { FdiToothChart } from '@/components/treatment/FdiToothChart';
import { PastTreatmentsPanel } from '@/components/treatment/PastTreatmentsPanel';
import { Checkbox } from '@/components/ui/common/Checkbox';
import { Button } from '@/components/ui/common/Button';
import { isSameLocalCalendarDay, startOfLocalDay } from '@/lib/appointmentTime';
import {
  fetchLinkedOrganizations,
  fetchMyAppointmentsForDay,
  fetchPastTreatments,
  saveTreatmentDraft,
  sendTreatmentRecord,
} from '@/lib/mocks/treatmentMockApi';
import { pickAutoAppointment } from '@/lib/treatmentSelection';
import { canEditTreatment } from '@/shared/permissions';
import type { Organization } from '@/types/organization';
import type {
  FdiToothId,
  LinkedOrganizationOption,
  PastTreatment,
  TreatmentAppointment,
  TreatmentAttachmentMeta,
  TreatmentRecordDraft,
} from '@/types/treatment';

function newRecord(): TreatmentRecordDraft {
  return {
    clientId:
      typeof crypto !== 'undefined' && 'randomUUID' in crypto
        ? crypto.randomUUID()
        : `rec-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
    teeth: [],
    comment: '',
    attachmentMetas: [],
    sendToOrganizationIds: [],
    sentAt: null,
  };
}

interface TreatmentWorkspaceProps {
  userId: string;
  currentOrganization: Organization | null;
}

export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWorkspaceProps) {
  const canEdit = canEditTreatment(currentOrganization);

  const [stripHidden, setStripHidden] = useState(false);

  const scheduleMinDate = useMemo(() => startOfLocalDay(new Date()), []);

  const [selectedDay, setSelectedDay] = useState(() => startOfLocalDay(new Date()));
  const [appointments, setAppointments] = useState<TreatmentAppointment[]>([]);
  const [apptsLoading, setApptsLoading] = useState(false);
  const [selectionLocked, setSelectionLocked] = useState(false);
  const [selectedAppointmentId, setSelectedAppointmentId] = useState<string | null>(null);

  const [history, setHistory] = useState<PastTreatment[]>([]);
  const [historyLoading, setHistoryLoading] = useState(false);

  const [orgs, setOrgs] = useState<LinkedOrganizationOption[]>([]);

  const [records, setRecords] = useState<TreatmentRecordDraft[]>(() => [newRecord()]);
  const [activeRecordId, setActiveRecordId] = useState<string>(() => records[0].clientId);

  const selectionLockedRef = useRef(selectionLocked);
  selectionLockedRef.current = selectionLocked;

  const attachmentInputRef = useRef<HTMLInputElement>(null);

  const [saveBusy, setSaveBusy] = useState(false);
  const [sendBusyId, setSendBusyId] = useState<string | null>(null);
  const [banner, setBanner] = useState<string | null>(null);

  const selectedAppointment = useMemo(
    () => appointments.find((a) => a.id === selectedAppointmentId) ?? null,
    [appointments, selectedAppointmentId],
  );

  const activeRecord = useMemo(
    () => records.find((r) => r.clientId === activeRecordId) ?? records[0],
    [records, activeRecordId],
  );

  const selectedTeethSet = useMemo(() => new Set(activeRecord.teeth), [activeRecord.teeth]);

  useEffect(() => {
    setSelectionLocked(false);
  }, [selectedDay]);

  useEffect(() => {
    let cancelled = false;
    setApptsLoading(true);
    void (async () => {
      try {
        const list = await fetchMyAppointmentsForDay(userId, selectedDay);
        if (cancelled) return;
        setAppointments(list);
        if (!selectionLockedRef.current) {
          setSelectedAppointmentId(pickAutoAppointment(list, selectedDay));
        }
      } finally {
        if (!cancelled) setApptsLoading(false);
      }
    })();
    return () => {
      cancelled = true;
    };
  }, [userId, selectedDay]);

  useEffect(() => {
    const today = startOfLocalDay(new Date());
    if (!isSameLocalCalendarDay(selectedDay, today) || selectionLocked) return;

    const id = window.setInterval(() => {
      setSelectedAppointmentId((prev) => {
        const next = pickAutoAppointment(appointments, selectedDay);
        return next ?? prev;
      });
    }, 60_000);

    return () => window.clearInterval(id);
  }, [selectedDay, appointments, selectionLocked]);

  useEffect(() => {
    let cancelled = false;
    void (async () => {
      const list = await fetchLinkedOrganizations();
      if (!cancelled) setOrgs(list);
    })();
    return () => {
      cancelled = true;
    };
  }, []);

  useEffect(() => {
    if (!selectedAppointment) {
      setHistory([]);
      return;
    }
    let cancelled = false;
    setHistoryLoading(true);
    void (async () => {
      const items = await fetchPastTreatments(selectedAppointment.patientId);
      if (!cancelled) {
        setHistory(items);
        setHistoryLoading(false);
      }
    })();
    return () => {
      cancelled = true;
    };
  }, [selectedAppointment?.patientId]);

  useEffect(() => {
    const first = newRecord();
    setRecords([first]);
    setActiveRecordId(first.clientId);
  }, [selectedAppointment?.id]);

  const fixActiveAfterRecordsChange = useCallback((next: TreatmentRecordDraft[]) => {
    setRecords(next);
    setActiveRecordId((id) => (next.some((r) => r.clientId === id) ? id : next[0].clientId));
  }, []);

  const toggleTooth = useCallback(
    (fdi: FdiToothId) => {
      if (!canEdit) return;
      setRecords((prev) =>
        prev.map((r) => {
          if (r.clientId !== activeRecordId) return r;
          const set = new Set(r.teeth);
          if (set.has(fdi)) set.delete(fdi);
          else set.add(fdi);
          return { ...r, teeth: [...set].sort() as FdiToothId[] };
        }),
      );
    },
    [activeRecordId, canEdit],
  );

  const onPickAppointment = useCallback((id: string) => {
    setSelectionLocked(true);
    setSelectedAppointmentId(id);
  }, []);

  const addAttachments = useCallback(
    (files: FileList | null) => {
      if (!files?.length || !canEdit) return;
      setRecords((prev) =>
        prev.map((r) => {
          if (r.clientId !== activeRecordId) return r;
          const added: TreatmentAttachmentMeta[] = [...r.attachmentMetas];
          for (let i = 0; i < files.length; i++) {
            const f = files[i];
            added.push({
              id: `local-${Date.now()}-${i}-${Math.random().toString(36).slice(2, 7)}`,
              fileName: f.name,
              mimeType: f.type || 'application/octet-stream',
              sizeBytes: f.size,
            });
          }
          return { ...r, attachmentMetas: added };
        }),
      );
    },
    [activeRecordId, canEdit],
  );

  const handleSaveAll = useCallback(async () => {
    if (!canEdit || !selectedAppointment) return;
    setSaveBusy(true);
    setBanner(null);
    try {
      await saveTreatmentDraft({
        appointmentId: selectedAppointment.id,
        patientId: selectedAppointment.patientId,
        records: records.map(({ clientId: _c, sentAt: _s, ...rest }) => rest),
      });
      setBanner('Treatment draft saved (mock). You can send records later.');
    } finally {
      setSaveBusy(false);
    }
  }, [canEdit, selectedAppointment, records]);

  const handleSendRecord = useCallback(
    async (record: TreatmentRecordDraft) => {
      if (!canEdit || !selectedAppointment) return;
      const targets = record.sendToOrganizationIds.filter((id) =>
        orgs.some((o) => o.id === id && o.active),
      );
      if (targets.length === 0) {
        setBanner('Choose at least one active organization to send this record.');
        return;
      }
      setSendBusyId(record.clientId);
      setBanner(null);
      try {
        await sendTreatmentRecord({
          appointmentId: selectedAppointment.id,
          patientId: selectedAppointment.patientId,
          recordClientId: record.clientId,
          organizationIds: targets,
        });
        setRecords((prev) =>
          prev.map((r) =>
            r.clientId === record.clientId ? { ...r, sentAt: new Date().toISOString() } : r,
          ),
        );
        setBanner('Record sent to selected organizations (mock).');
      } finally {
        setSendBusyId(null);
      }
    },
    [canEdit, selectedAppointment, orgs],
  );

  if (!canEdit) {
    return (
      <div className="surface-card p-6 max-w-xl">
        <h2 className="text-lg font-semibold text-text-primary">Treatment workspace</h2>
        <p className="text-sm text-text-secondary mt-2">
          Your role can view the Treatment tab, but editing clinical workflows requires{' '}
          <span className="text-text-primary font-medium">Treatment edit</span> permission.
        </p>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <header className="space-y-1">
        <h1 className="text-2xl font-semibold text-text-primary">Treatment</h1>
        <p className="text-sm text-text-secondary">
          Mocked data — appointments, history, save, and send are simulated until backend endpoints exist.
        </p>
      </header>

      <AppointmentsStrip
        stripHidden={stripHidden}
        onToggleStripHidden={() => setStripHidden((s) => !s)}
        selectedDay={selectedDay}
        onSelectDay={setSelectedDay}
        minScheduleDate={scheduleMinDate}
        appointments={appointments}
        selectedAppointmentId={selectedAppointmentId}
        onSelectAppointment={onPickAppointment}
        loading={apptsLoading}
      />

      {banner && (
        <div className="rounded-[var(--radius-md)] border border-primary/40 bg-primary-soft px-4 py-2 text-sm text-text-primary">
          {banner}
        </div>
      )}

      <div className="grid grid-cols-1 xl:grid-cols-[minmax(280px,380px)_minmax(0,1fr)] gap-6 items-start">
        <div className="space-y-4">
          {selectedAppointment ? (
            <div className="surface-card p-4 space-y-1">
              <p className="text-xs uppercase tracking-wide text-text-muted">Selected patient</p>
              <p className="text-lg font-semibold text-text-primary">
                {selectedAppointment.patientFirstName} {selectedAppointment.patientLastName}
              </p>
              <p className="text-xs text-text-secondary">
                Appointment purpose:{' '}
                <span className="capitalize text-text-primary">{selectedAppointment.purpose}</span>
              </p>
            </div>
          ) : (
            <div className="surface-card p-4 text-sm text-text-muted">
              {apptsLoading ? 'Loading appointments…' : 'Select a day with at least one appointment.'}
            </div>
          )}

          <PastTreatmentsPanel items={history} loading={historyLoading} />
        </div>

        <div className="space-y-4 min-w-0">
          <FdiToothChart
            selected={selectedTeethSet}
            onToggle={toggleTooth}
            disabled={!selectedAppointment}
          />

          <div className="surface-card p-4 space-y-4">
            <div className="flex flex-wrap items-center justify-between gap-3">
              <div>
                <h3 className="text-sm font-semibold text-text-primary">Treatment records</h3>
                <p className="text-xs text-text-muted mt-0.5">
                  Each record has its own teeth, notes, attachments, and destinations for send.
                </p>
              </div>
              <Button
                type="button"
                variant="primary"
                disabled={!selectedAppointment}
                onClick={() => {
                  const nr = newRecord();
                  fixActiveAfterRecordsChange([...records, nr]);
                  setActiveRecordId(nr.clientId);
                }}
              >
                Add record
              </Button>
            </div>

            <div className="flex flex-wrap gap-2">
              {records.map((r, idx) => (
                <button
                  key={r.clientId}
                  type="button"
                  onClick={() => setActiveRecordId(r.clientId)}
                  className={`
                    rounded-[var(--radius-md)] border px-3 py-1.5 text-sm transition-colors
                    focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/45
                    ${
                      r.clientId === activeRecordId
                        ? 'border-primary bg-primary-soft font-medium text-text-primary'
                        : 'border-border/70 text-text-secondary hover:border-border hover:bg-background-card/50'
                    }
                  `}
                >
                  Record {idx + 1}
                  {r.sentAt ? ' · sent' : ''}
                </button>
              ))}
            </div>

            {activeRecord && (
              <div className="space-y-4 border border-border/60 rounded-[var(--radius-md)] p-4 bg-background-secondary/30">
                <label className="block text-xs font-medium text-text-secondary">
                  Comments
                  <textarea
                    value={activeRecord.comment}
                    onChange={(e) => {
                      const v = e.target.value;
                      setRecords((prev) =>
                        prev.map((r) =>
                          r.clientId === activeRecordId ? { ...r, comment: v } : r,
                        ),
                      );
                    }}
                    placeholder="Write clinical notes for this record…"
                    rows={5}
                    disabled={!selectedAppointment}
                    className="mt-1.5 w-full rounded-[var(--radius-md)] border border-border bg-background-secondary/90 text-text-primary text-sm px-3 py-2 placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-primary/35 resize-y min-h-[120px]"
                  />
                </label>

                <div>
                  <p className="text-xs font-medium text-text-secondary mb-2">Attachments (mock)</p>
                  <input
                    ref={attachmentInputRef}
                    id="treatment-record-attachments"
                    type="file"
                    multiple
                    disabled={!selectedAppointment}
                    onChange={(e) => {
                      addAttachments(e.target.files);
                      e.target.value = '';
                    }}
                    className="sr-only"
                    aria-label="Attach files for this treatment record"
                  />
                  <Button
                    type="button"
                    variant="primary"
                    disabled={!selectedAppointment}
                    onClick={() => attachmentInputRef.current?.click()}
                    aria-controls="treatment-record-attachments"
                  >
                    Choose files
                  </Button>
                  {activeRecord.attachmentMetas.length > 0 && (
                    <ul className="mt-2 space-y-1 text-xs text-text-muted">
                      {activeRecord.attachmentMetas.map((f) => (
                        <li key={f.id} className="truncate">
                          {f.fileName} ({(f.sizeBytes / 1024).toFixed(1)} KB)
                        </li>
                      ))}
                    </ul>
                  )}
                </div>

                <div>
                  <p className="text-xs font-medium text-text-secondary mb-2">
                    Send this record to linked organizations
                  </p>
                  <div className="flex flex-col gap-2">
                    {orgs.map((o) => (
                      <Checkbox
                        key={o.id}
                        checked={activeRecord.sendToOrganizationIds.includes(o.id)}
                        disabled={!o.active || !selectedAppointment || Boolean(activeRecord.sentAt)}
                        onChange={(checked) => {
                          setRecords((prev) =>
                            prev.map((r) => {
                              if (r.clientId !== activeRecordId) return r;
                              const next = new Set(r.sendToOrganizationIds);
                              if (checked) next.add(o.id);
                              else next.delete(o.id);
                              return { ...r, sendToOrganizationIds: [...next] };
                            }),
                          );
                        }}
                        label={`${o.name}${o.active ? '' : ' (inactive)'}`}
                      />
                    ))}
                  </div>
                </div>

                <div className="flex flex-wrap items-center gap-3 pt-1">
                  <Button
                    type="button"
                    variant="primary"
                    disabled={!selectedAppointment || Boolean(activeRecord.sentAt) || sendBusyId === activeRecord.clientId}
                    isLoading={sendBusyId === activeRecord.clientId}
                    onClick={() => void handleSendRecord(activeRecord)}
                  >
                    Send this record
                  </Button>
                  {activeRecord.sentAt && (
                    <span className="text-xs text-text-muted">
                      Sent at {new Date(activeRecord.sentAt).toLocaleString()}
                    </span>
                  )}
                </div>
              </div>
            )}

            <div className="flex flex-wrap gap-3 pt-2 border-t border-border/60">
              <Button
                type="button"
                variant="primary"
                disabled={!selectedAppointment || saveBusy}
                isLoading={saveBusy}
                onClick={() => void handleSaveAll()}
              >
                Save treatment draft
              </Button>
              <p className="text-xs text-text-muted self-center">
                Saving stores all records locally (mock). Sending is per record and can happen after save.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}