import { useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";

// Ahora incluye ingreso de resultados y tabla de posiciones
export default function FixtureCalculator() {
  const zonaNorte = [
    "ADA Jaén","Pirata FC","Comerciantes FC","CNI","Mannucci","UCV","San Marcos","Llacuabamba","Unión Comercio"
  ];
  const zonaSur = [
    "Alianza Universidad","Unión Minas","Sport Huancayo II","Cantolao","Universidad San Martín","Ayacucho FC","Santos FC","Deportivo Binacional","EGB"
  ];

  const [fixtures, setFixtures] = useState([]);

  const generarCalendario = (equipos) => {
    const n = equipos.length;
    const lista = [...equipos];
    const tieneBye = n % 2 !== 0;
    if (tieneBye) lista.push("DESCANSA");

    let rounds = [];
    const total = lista.length;

    for (let r = 0; r < total - 1; r++) {
      let fecha = [];
      for (let i = 0; i < total / 2; i++) {
        const local = lista[i];
        const visita = lista[total - 1 - i];
        if (local !== "DESCANSA" && visita !== "DESCANSA") {
          fecha.push(`${local} vs ${visita}`);
        }
      }
      rounds.push({ ida: fecha, vuelta: fecha.map(p => p.split(" vs ").reverse().join(" vs ")) });
      lista.splice(1, 0, lista.pop());
    }
    return rounds;
  };
  };

  const handleGenerar = () => {
    const norte = generarCalendario(zonaNorte);
    const sur = generarCalendario(zonaSur);
    setFixtures({ norte, sur });
  };

  // --- NUEVOS ESTADOS PARA TABLAS ---
  const [resultados, setResultados] = useState({ norte: {}, sur: {} });
  const [tablas, setTablas] = useState({ norte: {}, sur: {} });

  const registrarResultado = (zona, fechaIdx, partidoIdx, golesLocal, golesVisita, local, visita) => {
    const key = `${fechaIdx}-${partidoIdx}`;
    const nuevos = { ...resultados[zona], [key]: { golesLocal, golesVisita, local, visita } };
    setResultados({ ...resultados, [zona]: nuevos });
    recalcularTabla(zona, nuevos);
  };

  const recalcularTabla = (zona, res) => {
    const tabla = {};
    const equipos = zona === "norte" ? zonaNorte : zonaSur;
    equipos.forEach(e => (tabla[e] = { pts: 0, gf: 0, gc: 0, dg: 0 }));

    Object.values(res).forEach(r => {
      tabla[r.local].gf += r.golesLocal;
      tabla[r.local].gc += r.golesVisita;
      tabla[r.local].dg = tabla[r.local].gf - tabla[r.local].gc;

      tabla[r.visita].gf += r.golesVisita;
      tabla[r.visita].gc += r.golesLocal;
      tabla[r.visita].dg = tabla[r.visita].gf - tabla[r.visita].gc;

      if (r.golesLocal > r.golesVisita) tabla[r.local].pts += 3;
      else if (r.golesLocal < r.golesVisita) tabla[r.visita].pts += 3;
      else { tabla[r.local].pts++; tabla[r.visita].pts++; }
    });

    setTablas({ ...tablas, [zona]: tabla });
  };

  return (
    <div className="p-6 grid gap-6 max-w-4xl mx-auto">
      <h1 className="text-3xl font-bold text-center">Calculadora de Partidos</h1>

      <Card className="rounded-2xl shadow p-4">
        <CardContent>
          <h2 className="text-xl font-semibold mb-2">Zonas</h2>
          <div className="grid grid-cols-2 gap-4">
            <div>
              <h3 className="font-bold">Zona Norte</h3>
              <ul className="list-disc ml-5 text-sm">
                {zonaNorte.map((e) => <li key={e}>{e}</li>)}
              </ul>
            </div>
            <div>
              <h3 className="font-bold">Zona Sur</h3>
              <ul className="list-disc ml-5 text-sm">
                {zonaSur.map((e) => <li key={e}>{e}</li>)}
              </ul>
            </div>
          </div>
        </CardContent>
      </Card>

      <Button onClick={handleGenerar} className="rounded-2xl p-4 text-lg">Generar Partidos Ida y Vuelta</Button>

      {fixtures.norte && (
        <Card className="rounded-2xl shadow p-4">
          <CardContent>
            <h2 className="text-xl font-semibold mb-4">Fixture – Zona Norte</h2>
            {fixtures.norte.map((f, i) => (
              <div key={i} className="mb-4 p-3 border rounded-xl">
                <h3 className="font-bold">Fecha {i + 1} (Ida)</h3>
                <ul className="list-disc ml-5 text-sm">
                  {f.ida.map((p, idx) => <li key={idx}>{p}</li>)}
                </ul>
                <h3 className="font-bold mt-2">Fecha {i + 1} (Vuelta)</h3>
                <ul className="list-disc ml-5 text-sm">
                  {f.vuelta.map((p, idx) => <li key={idx}>{p}</li>)}
                </ul>
              </div>
            ))}

            <h2 className="text-xl font-semibold mb-4 mt-8">Fixture – Zona Sur</h2>
            {fixtures.sur.map((f, i) => (
              <div key={i} className="mb-4 p-3 border rounded-xl">
                <h3 className="font-bold">Fecha {i + 1} (Ida)</h3>
                <ul className="list-disc ml-5 text-sm">
                  {f.ida.map((p, idx) => <li key={idx}>{p}</li>)}
                </ul>
                <h3 className="font-bold mt-2">Fecha {i + 1} (Vuelta)</h3>
                <ul className="list-disc ml-5 text-sm">
                  {f.vuelta.map((p, idx) => <li key={idx}>{p}</li>)}
                </ul>
              </div>
            ))}
          </CardContent>
        </Card>
      )}
    </div>
  );
}