"use client";
import React, { useEffect, useState } from "react";

type Meet = { id: string; name: string; date?: string; location?: string; signupUrl?: string };
type Event = { title: string; date?: string; location?: string; signupUrl?: string; signups?: boolean | "soon" };

export function ListView() {
   const [meets, setMeets] = useState<Meet[]>([]);
   const [future, setFuture] = useState<Event[]>([]);

  useEffect(() => {
    (async () => {
      const res = await fetch("/api/openpowerlifting/meets");
      const data = await res.json();
      setMeets(data.meets ?? []);
      const f = await fetch("/api/content?path=pt/competicoes/future.json");
      try {
        const json = await f.json();
        setFuture(json.events ?? []);
      } catch {}
    })();
  }, []);

  return (
    <section aria-labelledby="list-title">
      <h2 id="list-title" className="text-xl font-semibold">Lista de Competições</h2>
      
      {future.length > 0 && (
        <div className="mt-6">
          <h3 className="text-lg font-semibold text-green-700 mb-3">Próximas Competições</h3>
          <ul className="space-y-2">
            {future.map((m) => (
              <li key={`future-${m.title}`} className="border-l-4 border-l-green-500 bg-green-50 p-3">
                <strong>{m.title}</strong>
                {m.date && <span className="ml-2 text-gray-700">{m.date}</span>}
                {m.location && <span className="ml-2 text-gray-700">— {m.location}</span>}
                {m.signups === true && (
                  <button
                    onClick={() => window.open(m.signupUrl, '_blank')}
                    className="ml-3 px-3 py-1 bg-green-600 text-white rounded hover:bg-green-700 transition-colors"
                  >
                    Inscrição
                  </button>
                )}
                {m.signups === false && (
                  <div className="ml-3 inline-block">
                    <button
                      onClick={() => alert('As inscrições para esta competição estão encerradas')}
                      className="px-3 py-1 bg-red-300 text-red-700 rounded cursor-not-allowed opacity-70"
                      title="As inscrições estão encerradas"
                    >
                      Inscrição
                    </button>
                    <span className="ml-2 text-sm text-red-600">(Encerradas)</span>
                  </div>
                )}
                {m.signups === "soon" && (
                  <div className="ml-3 inline-block">
                    <button
                      onClick={() => alert('As inscrições para esta competição abrem em breve')}
                      className="px-3 py-1 bg-yellow-300 text-yellow-700 rounded cursor-not-allowed opacity-70"
                      title="As inscrições abrem em breve"
                    >
                      Inscrição
                    </button>
                    <span className="ml-2 text-sm text-yellow-600">(Em breve)</span>
                  </div>
                )}
              </li>
            ))}
          </ul>
        </div>
      )}

      {meets.length > 0 && (
        <div className="mt-6">
          <h3 className="text-lg font-semibold text-gray-600 mb-3">Competições Passadas</h3>
          <ul className="space-y-2">
            {meets.map((m) => (
              <li key={m.id} className="border-l-4 border-l-gray-300 bg-gray-50 p-3">
                <strong className="text-gray-700">{m.name}</strong>
                {m.date && <span className="ml-2 text-gray-600">{m.date}</span>}
                {m.location && <span className="ml-2 text-gray-600">— {m.location}</span>}
              </li>
            ))}
          </ul>
        </div>
      )}
    </section>
  );
}
