import { getServerT, getServerLocale } from "@/lib/i18n/server";

interface CorrectionsListProps {
  locale: string;
}

type BadgeVariant = "major" | "standard" | "clarify" | "update";

interface CorrectionEntry {
  badge: BadgeVariant;
  isMajor: boolean;
  ref: string;
  stamp: string;
  isUpdate: boolean;
  time: string;
  title: string;
  wasText: string;
  isText: string;
  isHighlight: string;
  reason: string;
  filedBy: string;
  approvedBy?: string;
  readLabel: "read_article" | "read_corrected";
}

function DiffIsCell({ text, highlight }: { text: string; highlight: string }) {
  const idx = text.indexOf(highlight);
  if (idx === -1) return <p>{text}</p>;
  const before = text.slice(0, idx);
  const after = text.slice(idx + highlight.length);
  return (
    <p>
      {before}
      <mark>{highlight}</mark>
      {after}
    </p>
  );
}

export async function CorrectionsList({ locale }: CorrectionsListProps) {
  const t = await getServerT(locale, "corrections");

  const cards: CorrectionEntry[] = [
    {
      badge: "major",
      isMajor: true,
      ref: t("cards.c1_ref"),
      stamp: t("cards.c1_stamp"),
      isUpdate: false,
      time: t("cards.c1_time"),
      title: t("cards.c1_title"),
      wasText: t("cards.c1_was"),
      isText: t("cards.c1_is"),
      isHighlight: "9:14 PM",
      reason: t("cards.c1_reason"),
      filedBy: t("cards.c1_filed_by"),
      approvedBy: t("cards.c1_approved_by"),
      readLabel: "read_corrected",
    },
    {
      badge: "standard",
      isMajor: false,
      ref: t("cards.c2_ref"),
      stamp: t("cards.c2_stamp"),
      isUpdate: false,
      time: t("cards.c2_time"),
      title: t("cards.c2_title"),
      wasText: t("cards.c2_was"),
      isText: t("cards.c2_is"),
      isHighlight: "roughly doubled",
      reason: t("cards.c2_reason"),
      filedBy: t("cards.c2_filed_by"),
      readLabel: "read_article",
    },
    {
      badge: "clarify",
      isMajor: false,
      ref: t("cards.c3_ref"),
      stamp: t("cards.c3_stamp"),
      isUpdate: false,
      time: t("cards.c3_time"),
      title: t("cards.c3_title"),
      wasText: t("cards.c3_was"),
      isText: t("cards.c3_is"),
      isHighlight: "Sarvam was the largest single recipient",
      reason: t("cards.c3_reason"),
      filedBy: t("cards.c3_filed_by"),
      readLabel: "read_article",
    },
    {
      badge: "standard",
      isMajor: false,
      ref: t("cards.c4_ref"),
      stamp: t("cards.c4_stamp"),
      isUpdate: false,
      time: t("cards.c4_time"),
      title: t("cards.c4_title"),
      wasText: t("cards.c4_was"),
      isText: t("cards.c4_is"),
      isHighlight: "third",
      reason: t("cards.c4_reason"),
      filedBy: t("cards.c4_filed_by"),
      readLabel: "read_article",
    },
    {
      badge: "update",
      isMajor: false,
      ref: t("cards.c5_ref"),
      stamp: t("cards.c5_stamp"),
      isUpdate: true,
      time: t("cards.c5_time"),
      title: t("cards.c5_title"),
      wasText: t("cards.c5_was"),
      isText: t("cards.c5_is"),
      isHighlight: "has risen to 22",
      reason: t("cards.c5_reason"),
      filedBy: t("cards.c5_filed_by"),
      readLabel: "read_article",
    },
    {
      badge: "major",
      isMajor: true,
      ref: t("cards.c6_ref"),
      stamp: t("cards.c6_stamp"),
      isUpdate: false,
      time: t("cards.c6_time"),
      title: t("cards.c6_title"),
      wasText: t("cards.c6_was"),
      isText: t("cards.c6_is"),
      isHighlight: "directed by Vasan Bala",
      reason: t("cards.c6_reason"),
      filedBy: t("cards.c6_filed_by"),
      approvedBy: t("cards.c6_approved_by"),
      readLabel: "read_article",
    },
  ];

  const badgeClass: Record<BadgeVariant, string> = {
    major: "major",
    standard: "",
    clarify: "clarify",
    update: "update",
  };

  const badgeText: Record<BadgeVariant, string> = {
    major: t("cards.badge_major"),
    standard: t("cards.badge_standard"),
    clarify: t("cards.badge_clarify"),
    update: t("cards.badge_update"),
  };

  return (
    <div className="corr-list">
      {cards.map((card, i) => (
        <article key={i} className={`corr-card${card.isMajor ? " major" : ""}`}>
          <div className="corr-head">
            <span className={`badge${badgeClass[card.badge] ? ` ${badgeClass[card.badge]}` : ""}`}>
              {badgeText[card.badge]}
            </span>
            <span className="ref">{card.ref}</span>
            <span className="sep">·</span>
            <span className="stamp">
              {t("cards.filed")} <b>{card.stamp}</b>
            </span>
            <span className="sep">·</span>
            <span>
              {card.isUpdate ? t("cards.updated_in") : t("cards.fixed_in")} {card.time}
            </span>
          </div>
          <h3>{card.title}</h3>
          <div className="diff">
            <div className="col was">
              <div className="lbl">{t("cards.was_lbl")}</div>
              <p>{card.wasText}</p>
            </div>
            <div className="col is">
              <div className="lbl">{t("cards.is_lbl")}</div>
              <DiffIsCell text={card.isText} highlight={card.isHighlight} />
            </div>
          </div>
          <p className="reason">
            <b>Reason: </b>
            {card.reason}
          </p>
          <div className="foot">
            <span className="item">
              <svg viewBox="0 0 24 24">
                <circle cx="12" cy="8" r="4" />
                <path d="M4 21a8 8 0 0 1 16 0" />
              </svg>
              {t("cards.filed_by")} <b>{card.filedBy}</b>
            </span>
            {card.approvedBy && (
              <span className="item">
                {t("cards.approved_by")} <b>{card.approvedBy}</b>
              </span>
            )}
            <a href="#" className="read">
              {t(`cards.${card.readLabel}`)}
              <svg viewBox="0 0 24 24">
                <path d="M5 12h14M13 6l6 6-6 6" />
              </svg>
            </a>
          </div>
        </article>
      ))}

      <div className="pagination">
        <button className="nav-arr" disabled>
          <svg viewBox="0 0 24 24">
            <path d="M19 12H5M11 6l-6 6 6 6" />
          </svg>
          {t("pagination.prev")}
        </button>
        <button className="pg-active">1</button>
        <button>2</button>
        <button>3</button>
        <button>4</button>
        <button className="gap">…</button>
        <button>7</button>
        <button className="nav-arr">
          {t("pagination.next")}
          <svg viewBox="0 0 24 24">
            <path d="M5 12h14M13 6l6 6-6 6" />
          </svg>
        </button>
      </div>
    </div>
  );
}