"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";

type Step = "pisanie" | "podglad" | "wyslane";

export default function KonsultujemyPage() {
  const router = useRouter();
  const [input, setInput] = useState("");
  const [improved, setImproved] = useState("");
  const [keywords, setKeywords] = useState<string[]>([]);
  const [step, setStep] = useState<Step>("pisanie");
  const [loading, setLoading] = useState(false);
  const [editing, setEditing] = useState(false);
  const [accessOk, setAccessOk] = useState<boolean | null>(null);
  const [aiError, setAiError] = useState<string | null>(null);
  const [dupMessage, setDupMessage] = useState<string | null>(null);

  async function ensureActiveAccess(): Promise<boolean> {
    try {
      const res = await fetch("/api/kod", { cache: "no-store" });
      const data = await res.json();
      if (!data?.active) {
        setAccessOk(false);
        router.push("/kod");
        return false;
      }
      setAccessOk(true);
      return true;
    } catch {
      setAccessOk(false);
      router.push("/kod");
      return false;
    }
  }

  useEffect(() => {
    let cancelled = false;
    ensureActiveAccess().catch(() => {});
    const interval = window.setInterval(() => {
      if (cancelled) return;
      ensureActiveAccess().catch(() => {});
    }, 15000);

    return () => {
      cancelled = true;
      window.clearInterval(interval);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [router]);

  async function handleDalej() {
    if (input.trim().length < 3) return;
    const hasAccess = await ensureActiveAccess();
    if (!hasAccess) return;
    setLoading(true);
    setAiError(null);
    try {
      const res = await fetch("/api/propozycje/ai", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ input }),
      });
      const data = await res.json();
      if (!res.ok || data?.limitReached) {
        setAiError(data?.message || "Limit pytan AI zostal wykorzystany.");
        return;
      }
      setImproved(data.suggestion || input);
      setKeywords(Array.isArray(data.keywords) ? data.keywords : []);
      setStep("podglad");
      setEditing(false);
    } catch {
      setImproved(input);
      setKeywords([]);
      setStep("podglad");
    } finally {
      setLoading(false);
    }
  }

  async function handleWyslij() {
    try {
      const hasAccess = await ensureActiveAccess();
      if (!hasAccess) return;
      const res = await fetch("/api/propozycje", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          content: improved,
          originalInput: input,
          keywords,
        }),
      });
      const data = await res.json();
      if (!res.ok) {
        if (data?.needCode || res.status === 401 || res.status === 403) {
          setAccessOk(false);
          router.push("/kod");
          return;
        }
        alert(data?.error || data?.message || "Nie udalo sie wyslac propozycji.");
        return;
      }
      setDupMessage(data?.duplicate ? data?.message : null);
      setStep("wyslane");
    } catch {
      alert("Nie udalo sie wyslac propozycji.");
    }
  }

  function handleReset() {
    setInput("");
    setImproved("");
    setKeywords([]);
    setAiError(null);
    setDupMessage(null);
    setStep("pisanie");
    setEditing(false);
  }

  if (accessOk === false) {
    return null;
  }

  return (
    <div className="mx-auto max-w-2xl py-8 px-4">
      <Link href="/" className="inline-flex items-center gap-1 text-sm text-gray-500 hover:text-gray-900 mb-4">
        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
        </svg>
        Powrot do menu
      </Link>

      <h1 className="text-2xl sm:text-3xl font-bold mb-2">Konsultujemy</h1>
      <p className="mb-6 text-gray-600">
        Wpisz temat, ktory Twoim zdaniem powinien byc skonsultowany z mieszkancami.
      </p>

      {step === "pisanie" && (
        <div>
          <label className="text-sm font-medium text-gray-700 mb-2 block">
            Twoje slowa
          </label>
          <textarea
            value={input}
            onChange={(e) => setInput(e.target.value)}
            placeholder="Opisz temat wlasnymi slowami — my pomozemy Ci go sformulowac..."
            className="w-full p-4 border rounded-xl mb-4 outline-none focus:ring-2 focus:ring-gray-900 resize-none"
            rows={4}
          />
          {aiError && (
            <p className="text-sm text-red-600 mb-3">{aiError}</p>
          )}
          <button
            onClick={handleDalej}
            disabled={loading || input.trim().length < 3}
            className="w-full rounded-full bg-gray-900 px-5 py-3 text-sm font-medium text-white hover:opacity-90 disabled:opacity-40"
          >
            {loading ? "Przetwarzam..." : "Dalej"}
          </button>
        </div>
      )}

      {step === "podglad" && (
        <div>
          {/* Oryginalny tekst */}
          <div className="mb-4">
            <label className="text-sm font-medium text-gray-500 mb-1 block">
              Twoje slowa
            </label>
            <div className="p-3 bg-gray-50 border rounded-xl text-gray-600 text-sm">
              {input}
            </div>
          </div>

          {/* Poprawiona wersja */}
          <div className="mb-4">
            <label className="text-sm font-medium text-gray-700 mb-1 block">
              Propozycja do konsultacji
            </label>
            {editing ? (
              <textarea
                value={improved}
                onChange={(e) => setImproved(e.target.value)}
                className="w-full p-4 border-2 border-blue-400 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 resize-none"
                rows={5}
                autoFocus
              />
            ) : (
              <div className="p-4 bg-white border-2 border-gray-200 rounded-xl text-gray-900 whitespace-pre-line leading-relaxed">
                {improved}
              </div>
            )}
          </div>

          {/* Slowa kluczowe */}
          {keywords.length > 0 && (
            <div className="mb-4">
              <label className="text-sm font-medium text-gray-500 mb-2 block">
                Slowa kluczowe
              </label>
              <div className="flex flex-wrap gap-2">
                {keywords.map((kw) => (
                  <span
                    key={kw}
                    className="inline-block bg-gray-100 text-gray-700 text-xs font-medium px-3 py-1 rounded-full"
                  >
                    {kw}
                  </span>
                ))}
              </div>
            </div>
          )}

          {/* Przyciski */}
          <div className="flex gap-3">
            <button
              onClick={() => setEditing(!editing)}
              className="flex-1 rounded-full border px-5 py-3 text-sm font-medium hover:bg-gray-50"
            >
              {editing ? "Gotowe" : "Popraw"}
            </button>
            <button
              onClick={handleWyslij}
              className="flex-1 rounded-full bg-gray-900 px-5 py-3 text-sm font-medium text-white hover:opacity-90"
            >
              Wyslij do moderatora
            </button>
          </div>
        </div>
      )}

      {step === "wyslane" && (
        <div className="rounded-2xl border p-6 text-center">
          <p className="text-lg font-semibold text-green-700 mb-2">
            Dziekujemy!
          </p>
          <p className="text-gray-600 mb-4">
            Twoja propozycja zostala przeslana do moderatora.
          </p>
          {dupMessage && (
            <p className="text-sm text-amber-700 bg-amber-50 border border-amber-200 rounded-xl px-3 py-2 mb-4">
              {dupMessage}
            </p>
          )}
          <div className="flex gap-3 justify-center">
            <button
              onClick={handleReset}
              className="rounded-full border px-5 py-2 text-sm font-medium hover:bg-gray-50"
            >
              Zglos kolejny temat
            </button>
            <Link
              href="/"
              className="rounded-full border px-5 py-2 text-sm font-medium hover:bg-gray-50"
            >
              Strona glowna
            </Link>
          </div>
        </div>
      )}
    </div>
  );
}