// BEGIN CHANGE: bloco reutilizavel de guild wars (paridade wars.php / guildwar.php)
"use client";

import { useState } from "react";
import Link from "next/link";
import { useI18n } from "@/i18n/LanguageProvider";
import { guildLogoUrl } from "@/lib/api";

export type WarFrag = {
  date: number;
  name: string;
  level: number;
  forAggressor: boolean;
  killers: { name: string; exists: boolean }[];
  others: boolean;
};

export type WarRow = {
  id: number;
  status: number;
  statusKey: string;
  begin: number;
  end: number;
  fragsLimit: number;
  payment: number;
  guildKills: number;
  enemyKills: number;
  guild: { id: number; name: string; logo: string };
  enemy: { id: number; name: string; logo: string };
  frags: WarFrag[];
};

function fmtTs(epoch: number) {
  if (!epoch) return "-";
  return new Date(epoch * 1000).toLocaleString();
}

export function GuildWarsList({ wars }: { wars: WarRow[] }) {
  const { t } = useI18n();
  const [open, setOpen] = useState<Record<number, boolean>>({});

  function statusLabel(key: string) {
    switch (key) {
      case "pending":
        return t.guilds.warStatusPending;
      case "active":
        return t.guilds.warStatusActive;
      case "rejected":
        return t.guilds.warStatusRejected;
      case "canceled":
        return t.guilds.warStatusCanceled;
      case "pending_end":
        return t.guilds.warStatusPendingEnd;
      case "ended":
        return t.guilds.warStatusEnded;
      default:
        return t.guilds.warStatusUnknown;
    }
  }

  if (!wars.length) {
    return <p className="text-sm text-muted">{t.guilds.warsEmpty}</p>;
  }

  return (
    <ul className="divide-y divide-border/50">
      {wars.map((w) => (
        <li key={w.id} className="px-4 py-4">
          <div className="grid grid-cols-1 items-center gap-4 sm:grid-cols-[7rem_1fr_7rem]">
            <Link
              href={`/guild/?id=${w.guild.id}`}
              className="flex flex-col items-center gap-1 text-center text-xs hover:text-brand"
            >
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={guildLogoUrl(w.guild.logo)}
                alt=""
                width={64}
                height={64}
                className="h-16 w-16 object-contain"
              />
              <span className="font-medium">{w.guild.name}</span>
            </Link>

            <div className="text-center text-sm">
              {(w.status === 1 || w.status === 4 || w.status === 5) && (
                <p className="mb-1 text-2xl font-semibold tracking-tight">
                  <span className="text-red-400">{w.guildKills}</span>
                  <span className="mx-2 text-muted">:</span>
                  <span className="text-emerald-400">{w.enemyKills}</span>
                </p>
              )}
              <p className="font-semibold">{statusLabel(w.statusKey)}</p>
              <p className="mt-1 text-xs text-muted">
                {t.guilds.warBegan}: {fmtTs(w.begin)}
                {w.end > 0 ? ` - ${t.guilds.warEnds}: ${fmtTs(w.end)}` : ""}
              </p>
              <p className="text-xs text-muted">
                {t.guilds.warFragLimit}: {w.fragsLimit}
                {w.payment > 0 ? ` - ${t.guilds.warPayment}: ${w.payment}` : ""}
              </p>
              <button
                type="button"
                className="mt-2 text-xs text-brand hover:underline"
                onClick={() => setOpen((prev) => ({ ...prev, [w.id]: !prev[w.id] }))}
              >
                {t.guilds.warsDetails}
              </button>
            </div>

            <Link
              href={`/guild/?id=${w.enemy.id}`}
              className="flex flex-col items-center gap-1 text-center text-xs hover:text-brand"
            >
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={guildLogoUrl(w.enemy.logo)}
                alt=""
                width={64}
                height={64}
                className="h-16 w-16 object-contain"
              />
              <span className="font-medium">{w.enemy.name}</span>
            </Link>
          </div>

          {open[w.id] && (
            <div className="mt-3 rounded-lg border border-border/60 bg-background/40 p-3 text-xs leading-relaxed">
              {[1, 4, 5].includes(w.status) ? (
                w.frags.length === 0 ? (
                  <p className="text-center text-muted">{t.guilds.warsNoFrags}</p>
                ) : (
                  <ul className="space-y-1">
                    {w.frags.map((f, i) => (
                      <li key={`${w.id}-${i}`}>
                        <span className="text-muted">{fmtTs(f.date)}</span>{" "}
                        <span className={f.forAggressor ? "text-red-400" : "text-emerald-400"}>
                          +
                        </span>{" "}
                        <Link href={`/character/?name=${encodeURIComponent(f.name)}`} className="font-medium hover:text-brand">
                          {f.name}
                        </Link>{" "}
                        {f.killers.length > 0 && (
                          <>
                            killed at level <b>{f.level}</b> by{" "}
                            {f.killers.map((k, ki) => (
                              <span key={k.name + ki}>
                                {ki > 0 ? (ki === f.killers.length - 1 ? " and by " : ", ") : ""}
                                {k.exists ? (
                                  <Link
                                    href={`/character/?name=${encodeURIComponent(k.name)}`}
                                    className="hover:text-brand"
                                  >
                                    {k.name}
                                  </Link>
                                ) : (
                                  k.name
                                )}
                              </span>
                            ))}
                            {f.others ? " and few others" : ""}.
                          </>
                        )}
                      </li>
                    ))}
                  </ul>
                )
              ) : (
                <p className="text-center text-muted">{t.guilds.warsNotStarted}</p>
              )}
            </div>
          )}
        </li>
      ))}
    </ul>
  );
}
// END CHANGE