"use client";

import Link from "next/link";
import { useEffect, useRef } from "react";
import {
  pageTop,
  primaryButton,
  secondaryButtonDark,
  textLinkDark,
} from "@/app/components/button-styles";
import { problemaPorId } from "@/lib/jogo/problemas";
import { buildWhatsAppUrl } from "@/lib/whatsapp";
import type { Resultado } from "./contrato";

type Props = {
  resultado: Resultado;
  aoJogarDeNovo(): void;
};

export default function Relatorio({ resultado, aoJogarDeNovo }: Props) {
  const titulo = useRef<HTMLHeadingElement>(null);
  useEffect(() => {
    titulo.current?.focus();
  }, []);

  const escolhido = problemaPorId(resultado.problemaId);
  const resolvidos = resultado.resolvidos.flatMap((id) => {
    const problema = problemaPorId(id);
    return problema ? [problema] : [];
  });
  const mensagem = escolhido
    ? `Oi, Evandro. Joguei o Expediente dos Mortos e o meu problema é: ${escolhido.nome}. Podemos conversar?`
    : "";

  return (
    <section
      aria-labelledby="relatorio-titulo"
      className={`bg-[var(--ink)] px-sp-6 pb-sp-16 pt-[calc(var(--site-header-height)+var(--sp-12))] font-display text-[#f4f2ed] lg:px-sp-12 ${pageTop}`}
    >
      <div className="ds-section-shell">
        <h1
          id="relatorio-titulo"
          ref={titulo}
          tabIndex={-1}
          className="text-[clamp(32px,6vw,64px)] font-semibold leading-none tracking-[-0.04em] outline-none"
        >
          {resultado.vitoria
            ? "Problemas resolvidos"
            : "Os problemas venceram desta vez"}
        </h1>
        <p className="mt-sp-6 text-[20px] font-medium leading-[1.3]">
          Você {resultado.placar.jogador} · Drones {resultado.placar.drones}
        </p>

        {resolvidos.length > 0 ? (
          <div className="mt-sp-10">
            <h2 className="text-[24px] font-semibold leading-[1.15] tracking-[-0.02em]">
              O que você resolveu
            </h2>
            <ul className="mt-sp-4 grid gap-sp-4 md:grid-cols-2">
              {resolvidos.map((problema) => (
                <li key={problema.id} className="border border-white/25 p-sp-4">
                  <h3 className="text-[18px] font-semibold leading-[1.25]">
                    {problema.nome}
                  </h3>
                  <p className="mt-sp-1 text-[16px] leading-[1.5] text-[rgba(244,242,237,.72)]">
                    {problema.solucao}
                  </p>
                  <Link
                    href={problema.destino}
                    className={`${textLinkDark} mt-sp-2`}
                  >
                    Ver como eu resolvo isso
                    <span className="sr-only">: {problema.nome}</span>
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        ) : null}

        {escolhido ? (
          <div className="mt-sp-10 max-w-[44rem] border border-[var(--slash)] p-sp-6">
            <h2 className="text-[24px] font-semibold leading-[1.15] tracking-[-0.02em]">
              O chefão era o seu problema
            </h2>
            <p className="mt-sp-3 text-[18px] font-medium leading-[1.4]">
              {escolhido.nome}
            </p>
            <p className="mt-sp-1 text-[16px] leading-[1.5] text-[rgba(244,242,237,.72)]">
              {escolhido.solucao}
            </p>
            <div className="mt-sp-6">
              <a
                href={buildWhatsAppUrl(mensagem)}
                target="_blank"
                rel="noopener noreferrer"
                className={`${primaryButton} !bg-[var(--whatsapp)] rounded-full`}
              >
                Chamar no WhatsApp
              </a>
            </div>
          </div>
        ) : null}

        <div className="mt-sp-10">
          <button
            type="button"
            onClick={aoJogarDeNovo}
            className={secondaryButtonDark}
          >
            Jogar de novo
          </button>
        </div>
      </div>
    </section>
  );
}