"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import PersianDateField from "@/components/PersianDateField";

type Country = { id: string; name: string };
type Round = { id: string; name: string; number: number };

export default function MatchForm({
  countries,
  rounds,
  initial,
  matchId,
}: {
  countries: Country[];
  rounds: Round[];
  initial?: any;
  matchId?: string;
}) {
  const router = useRouter();
  const [form, setForm] = useState({
    homeTeamId: initial?.homeTeamId ?? "",
    awayTeamId: initial?.awayTeamId ?? "",
    stage: initial?.stage ?? "GROUP",
    status: initial?.status ?? "SCHEDULED",
    matchDate: initial?.matchDate ?? "",
    homeScore: initial?.homeScore ?? "",
    awayScore: initial?.awayScore ?? "",
    roundId: initial?.roundId ?? "",
  });
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();

    if (!form.matchDate) {
      setError("تاریخ و ساعت بازی را انتخاب کنید.");
      return;
    }

    setLoading(true);
    const payload = {
      ...form,
      homeScore: form.homeScore !== "" ? parseInt(String(form.homeScore), 10) : null,
      awayScore: form.awayScore !== "" ? parseInt(String(form.awayScore), 10) : null,
      roundId: form.roundId || null,
    };
    const res = await fetch(matchId ? `/api/matches/${matchId}` : "/api/matches", {
      method: matchId ? "PUT" : "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(payload),
    });
    if (res.ok) {
      router.push("/admin/matches");
      router.refresh();
    } else {
      const d = await res.json();
      setError(d.error ?? "خطا");
    }
    setLoading(false);
  }

  const stages = [
    { value: "GROUP", label: "مرحله گروهی" },
    { value: "ROUND_OF_16", label: "یک‌هشتم نهایی" },
    { value: "QUARTER_FINAL", label: "یک‌چهارم نهایی" },
    { value: "SEMI_FINAL", label: "نیمه‌نهایی" },
    { value: "THIRD_PLACE", label: "رده‌بندی" },
    { value: "FINAL", label: "فینال" },
  ];

  return (
    <form onSubmit={handleSubmit} className="bg-white rounded-2xl shadow p-6 flex flex-col gap-4">
      {error && <p className="text-red-500 text-sm bg-red-50 px-3 py-2 rounded-lg">{error}</p>}
      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
        <div>
          <label className="block text-sm font-medium mb-1">تیم میزبان</label>
          <select
            value={form.homeTeamId}
            onChange={(e) => setForm({ ...form, homeTeamId: e.target.value })}
            className="w-full border rounded-xl px-3 py-2.5 focus:outline-none focus:ring-2 focus:ring-green-500"
            required
          >
            <option value="">انتخاب کنید</option>
            {countries.map((c) => (
              <option key={c.id} value={c.id}>
                {c.name}
              </option>
            ))}
          </select>
        </div>
        <div>
          <label className="block text-sm font-medium mb-1">تیم مهمان</label>
          <select
            value={form.awayTeamId}
            onChange={(e) => setForm({ ...form, awayTeamId: e.target.value })}
            className="w-full border rounded-xl px-3 py-2.5 focus:outline-none focus:ring-2 focus:ring-green-500"
            required
          >
            <option value="">انتخاب کنید</option>
            {countries.map((c) => (
              <option key={c.id} value={c.id}>
                {c.name}
              </option>
            ))}
          </select>
        </div>
      </div>
      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
        <div>
          <label className="block text-sm font-medium mb-1">گل میزبان</label>
          <input
            type="number"
            min="0"
            value={form.homeScore}
            onChange={(e) => setForm({ ...form, homeScore: e.target.value })}
            className="w-full border rounded-xl px-3 py-2.5 focus:outline-none focus:ring-2 focus:ring-green-500"
          />
        </div>
        <div>
          <label className="block text-sm font-medium mb-1">گل مهمان</label>
          <input
            type="number"
            min="0"
            value={form.awayScore}
            onChange={(e) => setForm({ ...form, awayScore: e.target.value })}
            className="w-full border rounded-xl px-3 py-2.5 focus:outline-none focus:ring-2 focus:ring-green-500"
          />
        </div>
      </div>
      <div>
        <label className="block text-sm font-medium mb-1">مرحله</label>
        <select
          value={form.stage}
          onChange={(e) => setForm({ ...form, stage: e.target.value })}
          className="w-full border rounded-xl px-3 py-2.5 focus:outline-none focus:ring-2 focus:ring-green-500"
        >
          {stages.map((s) => (
            <option key={s.value} value={s.value}>
              {s.label}
            </option>
          ))}
        </select>
      </div>
      <div>
        <label className="block text-sm font-medium mb-1">وضعیت</label>
        <select
          value={form.status}
          onChange={(e) => setForm({ ...form, status: e.target.value })}
          className="w-full border rounded-xl px-3 py-2.5 focus:outline-none focus:ring-2 focus:ring-green-500"
        >
          <option value="SCHEDULED">برنامه‌ریزی شده</option>
          <option value="LIVE">زنده</option>
          <option value="FINISHED">پایان یافته</option>
        </select>
      </div>
      <PersianDateField
        label="تاریخ و ساعت"
        value={form.matchDate}
        onChange={(value) => setForm({ ...form, matchDate: value })}
        mode="datetime"
        required
      />
      <div>
        <label className="block text-sm font-medium mb-1">دور بازی</label>
        <select
          value={form.roundId}
          onChange={(e) => setForm({ ...form, roundId: e.target.value })}
          className="w-full border rounded-xl px-3 py-2.5 focus:outline-none focus:ring-2 focus:ring-green-500"
        >
          <option value="">بدون دور</option>
          {rounds.map((r) => (
            <option key={r.id} value={r.id}>
              دور {r.number} - {r.name}
            </option>
          ))}
        </select>
      </div>
      <button
        type="submit"
        disabled={loading}
        className="bg-green-700 text-white py-3 rounded-xl font-bold hover:bg-green-800 transition disabled:opacity-50"
      >
        {loading ? "در حال ذخیره..." : matchId ? "ذخیره تغییرات" : "افزودن بازی"}
      </button>
    </form>
  );
}