import Link from "next/link";
import { notFound, redirect } from "next/navigation";
import { Timeline } from "@/components/Timeline";
import { patientLogout, setPatientLanguage } from "@/lib/actions";
import { getPatientSession } from "@/lib/auth";
import { serviceLabel, specialtyTitle, stageById } from "@/lib/catalog";
import { getCaseByToken, listByMobile } from "@/lib/cases";
import { formatDay, joinServices } from "@/lib/format";
import { text } from "@/lib/i18n";
import { buildTrack, currentStageId } from "@/lib/track";

export const metadata = { title: "پیگیری پرونده" };

export default async function TrackPage({ params }: { params: Promise<{ token: string }> }) {
  const { token } = await params;
  const record = getCaseByToken(token);
  if (!record) notFound();
  const session = await getPatientSession();
  if (!session || session.mobileKey !== record.mobile_key) redirect(`/p/${token}`);
  const lang = record.language;
  const copy = text(lang);
  const dir = lang === "en" ? "ltr" : "rtl";
  const files = listByMobile(record.mobile_key);
  const requested = joinServices(record.requested.map(serviceLabel), lang);
  const received = record.received.length
    ? joinServices(record.received.map(serviceLabel), lang)
    : copy.noneYet;
  const current = stageById(currentStageId(record.events));
  const track = buildTrack(record.events, lang, lang);

  return (
    <div className="app" lang={lang} dir={dir} data-testid="patient-track">
      <header className="top">
        <div className="brand">
          <strong>{copy.brand}</strong>
          <span>{copy.portal}</span>
        </div>
        <form action={patientLogout}>
          <input type="hidden" name="token" value={token} />
          <button className="secondary" type="submit">{copy.logout}</button>
        </form>
      </header>
      <main className="wrap stack">
        {files.length > 1 ? (
          <section className="card">
            <h2>{copy.yourFiles}</h2>
            <div className="switcher">
              {files.map((item) => (
                <Link
                  key={item.id}
                  className={item.id === record.id ? "button" : "button secondary"}
                  href={`/p/${item.public_token}/track`}
                >
                  {item.case_number} · {specialtyTitle(item.specialty_id, lang)}
                </Link>
              ))}
            </div>
          </section>
        ) : null}

        <section className="card">
          <h1>{record.first_name} {record.last_name}</h1>
          <p className="muted">{copy.caseNo}: {record.case_number}</p>
          <dl className="dates">
            <div>
              <dt>{copy.specialty}</dt>
              <dd>{specialtyTitle(record.specialty_id, lang)}</dd>
            </div>
            <div>
              <dt>{copy.requested}</dt>
              <dd>{requested}</dd>
            </div>
            <div>
              <dt>{copy.received}</dt>
              <dd>{received}</dd>
            </div>
            <div>
              <dt>{copy.current}</dt>
              <dd>{current ? current.title[lang] : copy.noneYet}</dd>
            </div>
            <div>
              <dt>{copy.residence}</dt>
              <dd>{record.city}، {record.country}</dd>
            </div>
            <div>
              <dt>{copy.mobile}</dt>
              <dd className="ltr">{record.mobile}</dd>
            </div>
            {record.summary ? (
              <div>
                <dt>{copy.description}</dt>
                <dd>{record.summary}</dd>
              </div>
            ) : null}
          </dl>
        </section>

        <section className="card">
          <h2>{copy.dates}</h2>
          <ul className="dates">
            <li><span>{copy.arrived}</span><strong>{formatDay(record.arrived_iran_on, lang) || copy.noneYet}</strong></li>
            <li><span>{copy.company}</span><strong>{formatDay(record.visited_company_on, lang) || copy.noneYet}</strong></li>
            <li>
              <span>{copy.center}</span>
              <strong>{formatDay(record.visited_center_on, lang) || copy.noneYet}</strong>
              {record.center_name ? <small>{copy.centerName}: {record.center_name}</small> : null}
            </li>
            <li><span>{copy.departed}</span><strong>{formatDay(record.departed_iran_on, lang) || copy.noneYet}</strong></li>
          </ul>
          {record.pathDates.length > 0 ? (
            <>
              <h3>{copy.otherDates}</h3>
              <ul className="dates">
                {record.pathDates.map((item) => (
                  <li key={`${item.title}-${item.eventDate}`}>
                    <span>{item.title}</span>
                    <strong>{formatDay(item.eventDate, lang)}</strong>
                  </li>
                ))}
              </ul>
            </>
          ) : null}
        </section>

        <section className="card">
          <h2>{copy.track}</h2>
          <Timeline items={track} />
        </section>

        <section className="card">
          <h2>{copy.language}</h2>
          <form action={setPatientLanguage} className="langs">
            <input type="hidden" name="token" value={token} />
            <button type="submit" name="language" value="fa" className={lang === "fa" ? undefined : "secondary"} aria-pressed={lang === "fa"}>فارسی</button>
            <button type="submit" name="language" value="en" className={lang === "en" ? undefined : "secondary"} aria-pressed={lang === "en"}>English</button>
            <button type="submit" name="language" value="ar" className={lang === "ar" ? undefined : "secondary"} aria-pressed={lang === "ar"}>العربية</button>
          </form>
        </section>
      </main>
    </div>
  );
}