import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { CompanyMark, JobFacts } from "../components/jobs";
import { Badge, Spinner, fmtDate, scoreColor } from "../components/ui";
import { api, type Application } from "../lib/api";
import { useI18n } from "../lib/i18n";

export default function Applications() {
  const { t, lang } = useI18n();
  const [rows, setRows] = useState<Application[] | null>(null);
  useEffect(() => {
    api.get<Application[]>("/applications").then(setRows).catch(() => setRows([]));
  }, []);
  if (!rows) return <Spinner />;

  const status = (a: Application): [string, "neutral" | "good" | "warn" | "bad" | "info"] => {
    if (a.status === "in_progress") return [t("as_unfinished"), "warn"];
    if (a.status === "processing") return [t("as_processing"), "info"];
    if (a.status === "failed") return [t("st_failed"), "bad"];
    return { new: [t("as_new"), "neutral"], shortlisted: [t("as_shortlisted"), "good"], rejected: [t("as_rejected"), "bad"], hired: [t("as_hired"), "good"] }[a.review_status] as [string, "neutral"];
  };

  return (
    <div className="space-y-6">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <h1 className="text-3xl font-semibold text-ink">{t("apps_title")}</h1>
        <Link to="/app/board" className="rounded-xl bg-nile px-4 py-2.5 text-sm font-medium text-white dark:text-paper">{t("browse_jobs")}</Link>
      </div>
      {rows.length === 0 ? (
        <p className="rounded-2xl border border-dashed border-line p-8 text-center text-muted">{t("apps_empty")}</p>
      ) : (
        <ul className="space-y-3">
          {rows.map((a) => {
            const [label, tone] = status(a);
            return (
              <li key={a.id} className="flex flex-col gap-4 rounded-2xl border border-line bg-surface p-5 sm:flex-row sm:items-center">
                <CompanyMark name={a.company} />
                <div className="min-w-0 flex-1 space-y-2">
                  <div>
                    <Link to={`/apply/${a.share_token}`} className="text-lg font-semibold text-ink hover:text-nile">{a.title}</Link>
                    <p className="text-[15px] text-muted">{a.company} · {fmtDate(a.created_at, lang)}</p>
                  </div>
                  <JobFacts job={{ ...a, salary: null, deadline: null }} showDeadline={false} />
                </div>
                <div className="flex items-center gap-4 sm:flex-col sm:items-end sm:gap-2">
                  <Badge tone={tone}>{label}</Badge>
                  {a.status === "in_progress" ? (
                    <Link to={`/app/interview/${a.id}`} className="text-sm font-medium text-nile hover:underline">{t("finish_interview")}</Link>
                  ) : a.status === "completed" ? (
                    <Link to={`/app/report/${a.id}`} className="flex items-baseline gap-1.5 text-sm font-medium text-nile hover:underline">
                      <span className="font-display text-xl font-semibold tabular" style={{ color: scoreColor(a.overall_score) }}>{a.overall_score != null ? Math.round(a.overall_score) : "–"}</span>
                      {t("view_report")}
                    </Link>
                  ) : null}
                </div>
              </li>
            );
          })}
        </ul>
      )}
    </div>
  );
}