// BEGIN CHANGE: pagina de enquetes (z_polls) ? exige login
"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { useI18n } from "@/i18n/LanguageProvider";
import { useAuth } from "@/auth/AuthProvider";
import { Navbar } from "@/components/Navbar";
import { Footer } from "@/components/Footer";
import { apiUrl } from "@/lib/api";

type Answer = {
  answerId: number;
  answer: string;
  votes: number;
  percent: number;
};

type Poll = {
  id: number;
  question: string;
  start: number;
  end: number;
  votesAll: number;
  active: boolean;
  answers: Answer[];
  minLevel: number;
  canVote: boolean;
  alreadyVoted: boolean;
  hasLevel: boolean;
};

export default function PollsPage() {
  const { t } = useI18n();
  const { ready, token } = useAuth();
  const [status, setStatus] = useState<"loading" | "ok" | "error" | "needlogin">("loading");
  const [active, setActive] = useState<Poll[]>([]);
  const [closed, setClosed] = useState<Poll[]>([]);
  const [selected, setSelected] = useState<Poll | null>(null);
  const [choice, setChoice] = useState<number>(0);
  const [busy, setBusy] = useState(false);
  const [msg, setMsg] = useState("");

  function loadList() {
    if (!token) return;
    setStatus("loading");
    fetch(apiUrl("polls.php"), { headers: { Authorization: `Bearer ${token}` } })
      .then((r) => {
        if (r.status === 401) {
          setStatus("needlogin");
          return null;
        }
        if (!r.ok) throw new Error("http");
        return r.json();
      })
      .then((json) => {
        if (!json) return;
        setActive(json.active ?? []);
        setClosed(json.closed ?? []);
        setStatus("ok");
      })
      .catch(() => setStatus("error"));
  }

  function openPoll(id: number) {
    if (!token) return;
    setMsg("");
    setChoice(0);
    fetch(apiUrl(`polls.php?id=${id}`), {
      headers: { Authorization: `Bearer ${token}` },
    })
      .then((r) => r.json())
      .then((json) => {
        if (json.poll) setSelected(json.poll as Poll);
      })
      .catch(() => setMsg(t.polls.voteFailed));
  }

  useEffect(() => {
    if (!ready) return;
    if (!token) {
      setStatus("needlogin");
      return;
    }
    loadList();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [ready, token]);

  async function vote() {
    if (!token || !selected || !choice || busy) return;
    setBusy(true);
    setMsg("");
    try {
      const r = await fetch(apiUrl("polls.php"), {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`,
        },
        body: JSON.stringify({
          action: "vote",
          pollId: selected.id,
          answerId: choice,
        }),
      });
      const json = await r.json().catch(() => ({}));
      if (!r.ok) {
        setMsg(json.error || t.polls.voteFailed);
        return;
      }
      setSelected(json.poll as Poll);
      setMsg(t.polls.voteOk);
      loadList();
    } catch {
      setMsg(t.polls.voteFailed);
    } finally {
      setBusy(false);
    }
  }

  function fmt(ts: number) {
    return new Date(ts * 1000).toLocaleDateString();
  }

  return (
    <div className="flex min-h-screen flex-col">
      <Navbar />
      <main className="mx-auto w-full max-w-3xl flex-1 px-6 py-14">
        <h1 className="text-3xl font-semibold tracking-tight">{t.polls.title}</h1>
        <p className="mt-2 text-muted">{t.polls.subtitle}</p>

        {status === "needlogin" && (
          <div className="mt-8 rounded-xl border border-border bg-panel p-6 text-sm">
            <p>{t.polls.needLogin}</p>
            <Link href="/login" className="mt-3 inline-block text-brand hover:underline">
              {t.nav.items.login}
            </Link>
          </div>
        )}

        {status === "loading" && <p className="mt-8 text-muted">{t.common.loading}</p>}
        {status === "error" && <p className="mt-8 text-muted">{t.common.error}</p>}

        {status === "ok" && !selected && (
          <div className="mt-8 space-y-8">
            <section>
              <h2 className="text-lg font-semibold">{t.polls.activeTitle}</h2>
              {active.length === 0 && <p className="mt-3 text-sm text-muted">{t.polls.emptyActive}</p>}
              <ul className="mt-3 divide-y divide-border/50 rounded-xl border border-border bg-panel">
                {active.map((p) => (
                  <li key={p.id}>
                    <button
                      type="button"
                      className="flex w-full items-center justify-between px-4 py-3 text-left text-sm hover:bg-brand/5"
                      onClick={() => openPoll(p.id)}
                    >
                      <span className="font-medium">{p.question}</span>
                      <span className="text-xs text-muted">{fmt(p.end)}</span>
                    </button>
                  </li>
                ))}
              </ul>
            </section>
            <section>
              <h2 className="text-lg font-semibold">{t.polls.closedTitle}</h2>
              {closed.length === 0 && <p className="mt-3 text-sm text-muted">{t.polls.emptyClosed}</p>}
              <ul className="mt-3 divide-y divide-border/50 rounded-xl border border-border bg-panel">
                {closed.map((p) => (
                  <li key={p.id}>
                    <button
                      type="button"
                      className="flex w-full items-center justify-between px-4 py-3 text-left text-sm hover:bg-brand/5"
                      onClick={() => openPoll(p.id)}
                    >
                      <span className="font-medium">{p.question}</span>
                      <span className="text-xs text-muted">{fmt(p.end)}</span>
                    </button>
                  </li>
                ))}
              </ul>
            </section>
          </div>
        )}

        {status === "ok" && selected && (
          <div className="mt-8">
            <button
              type="button"
              className="text-sm text-muted hover:text-brand"
              onClick={() => {
                setSelected(null);
                setMsg("");
              }}
            >
              &larr; {t.polls.backList}
            </button>
            <h2 className="mt-4 text-xl font-semibold">{selected.question}</h2>
            <p className="mt-1 text-xs text-muted">
              {t.polls.started}: {fmt(selected.start)} - {t.polls.ends}: {fmt(selected.end)} -{" "}
              {t.polls.totalVotes}: {selected.votesAll}
            </p>
            {msg && <p className="mt-3 text-sm text-brand">{msg}</p>}

            {selected.canVote && (
              <div className="mt-6 rounded-xl border border-border bg-panel p-4">
                <p className="mb-3 text-sm font-medium">{t.polls.vote}</p>
                <ul className="space-y-2">
                  {selected.answers.map((a) => (
                    <li key={a.answerId}>
                      <label className="flex cursor-pointer items-center gap-2 text-sm">
                        <input
                          type="radio"
                          name="answer"
                          checked={choice === a.answerId}
                          onChange={() => setChoice(a.answerId)}
                        />
                        {a.answer}
                      </label>
                    </li>
                  ))}
                </ul>
                <button
                  type="button"
                  disabled={busy || !choice}
                  className="mt-4 rounded bg-brand px-4 py-2 text-sm text-white disabled:opacity-50"
                  onClick={vote}
                >
                  {t.polls.submit}
                </button>
              </div>
            )}

            {!selected.canVote && selected.active && (
              <p className="mt-4 text-sm text-muted">
                {selected.alreadyVoted
                  ? t.polls.alreadyVoted
                  : !selected.hasLevel
                    ? t.polls.needLevel.replace("{n}", String(selected.minLevel))
                    : ""}
              </p>
            )}

            <div className="mt-6 rounded-xl border border-border bg-panel p-4">
              <p className="mb-3 text-sm font-medium">{t.polls.results}</p>
              <ul className="space-y-3">
                {selected.answers.map((a) => (
                  <li key={a.answerId} className="text-sm">
                    <div className="mb-1 flex justify-between gap-2">
                      <span>{a.answer}</span>
                      <span className="text-muted">
                        {a.votes} ({a.percent}%)
                      </span>
                    </div>
                    <div className="h-2 overflow-hidden rounded bg-border/40">
                      <div
                        className="h-full bg-brand/80 transition-all"
                        style={{ width: `${Math.min(100, a.percent)}%` }}
                      />
                    </div>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        )}
      </main>
      <Footer />
    </div>
  );
}
// END CHANGE