import { useState } from "react";
import { api } from "../api/client";
import { useSession } from "../session/SessionContext";
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, failed } = useToday();
  const { session } = useSession();
  const [connecting, setConnecting] = useState(false);
  const [connectFailed, setConnectFailed] = useState(false);
  const connect = async () => {
    if (!session || connecting) return;
    setConnecting(true);
    setConnectFailed(false);
    try {
      await api.connectDoctor(session.token);
      navigate("/today");
    } catch {
      setConnectFailed(true);
      setConnecting(false);
    }
  };

  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>

        {(failed || connectFailed) && <Notice tone="danger">{ru.common.networkError}</Notice>}
        {!plan ? (!failed && <div className="loader" aria-label="Загрузка" />) : !plan.has_doctor ? (
          <div className="stack stack--sm">
            <Notice>{t.noDoctor}</Notice>
            <button type="button" className="btn btn--primary" disabled={connecting} onClick={() => void connect()}>
              {connecting ? t.connecting : t.connect}
            </button>
          </div>
        ) : (
          <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>
  );
}