import { useNavigate } from "react-router-dom";

import { AppShell, Notice } from "../components/AppShell";
import { Icon, type IconName } from "../components/Icon";
import { ru } from "../content/ru";
import { useDialog } from "../dialog/DialogContext";
import { humanDate, useToday } from "./useToday";

// F1 / F2 · Врач: следующий визит и связь с врачом (действия выполняет движок диалога)
export function Doctor() {
  const t = ru.doctor;
  const navigate = useNavigate();
  const dialog = useDialog();
  const { plan } = useToday();

  const go = (button: string, label: string) =>
    void dialog.send({ type: "button", button }, label).then((ok) => ok && navigate("/flow"));

  const actions: { button: string; label: string; icon: IconName }[] = [
    { button: "menu:contact_doctor", label: t.write, icon: "message" },
    { button: "menu:visit", label: t.earlier, icon: "calendar" },
    { button: "safety_plan", label: t.plan, icon: "shield" },
  ];

  return (
    <AppShell>
      <div className="stack">
        <header className="head">
          <h1 className="h1">{t.title}</h1>
        </header>

        {plan && !plan.has_doctor ? (
          <Notice>{t.noDoctor}</Notice>
        ) : (
          <div className="cols">
            <section className="card-list" aria-label={t.visit}>
              <div className="card-list__row">
                <span className="tile-icon tile-icon--blue">
                  <Icon name="calendar" />
                </span>
                <span>
                  <span className="row-card__sub">{t.visit}</span>
                  <span className="row-card__title">{plan?.next_visit ? humanDate(plan.next_visit) : t.visitNone}</span>
                </span>
              </div>
              <div className="card-list__row">
                <span className="tile-icon tile-icon--blue">
                  <Icon name="doctor" />
                </span>
                <span className="row-card__title">{t.attending}</span>
              </div>
            </section>

            <div className="stack stack--sm">
              {actions.map((a) => (
                <button key={a.button} type="button" className="row-card" onClick={() => go(a.button, a.label)} disabled={dialog.busy}>
                  <span className="tile-icon">
                    <Icon name={a.icon} />
                  </span>
                  <span className="row-card__text">
                    <span className="row-card__title">{a.label}</span>
                  </span>
                  <Icon name="chevronRight" />
                </button>
              ))}
            </div>
            <Notice>{t.writeNote}</Notice>
          </div>
        )}
      </div>
    </AppShell>
  );
}