"use client";

import { useEffect, useState } from "react";
import { useParams } from "next/navigation";
import { ArrowLeft, Plus, Trash2, Save, MessageSquare, Loader2, Sparkles, ToggleLeft, ToggleRight, Search } from "lucide-react";
import Link from "next/link";

interface CannedResponse {
  id: string;
  trigger: string;
  response: string;
  exactMatch: boolean;
  active: boolean;
}

const uid = () => Math.random().toString(36).slice(2, 9);

export default function ResponsesPage() {
  const { botId } = useParams<{ botId: string }>();
  const [responses, setResponses] = useState<CannedResponse[]>([]);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [saved, setSaved] = useState(false);
  const [search, setSearch] = useState("");
  const [aiLoading, setAiLoading] = useState(false);

  useEffect(() => {
    fetch(`/api/bots/${botId}/canned`).then(r => r.json()).then(d => {
      setResponses(d.responses ?? []);
      setLoading(false);
    });
  }, [botId]);

  async function handleSave() {
    setSaving(true);
    await fetch(`/api/bots/${botId}/canned`, {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ responses }),
    });
    setSaving(false); setSaved(true);
    setTimeout(() => setSaved(false), 2500);
  }

  function addNew() {
    setResponses(prev => [...prev, { id: uid(), trigger: "", response: "", exactMatch: false, active: true }]);
  }

  function update(id: string, field: keyof CannedResponse, value: string | boolean) {
    setResponses(prev => prev.map(r => r.id === id ? { ...r, [field]: value } : r));
  }

  function remove(id: string) {
    setResponses(prev => prev.filter(r => r.id !== id));
  }

  async function aiSuggest() {
    setAiLoading(true);
    try {
      const res = await fetch(`/api/bots/${botId}/knowledge`).then(r => r.json());
      const context = res.content ?? "";
      const r2 = await fetch("/api/ai/generate-canned", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ context }),
      });
      const data = await r2.json();
      if (data.responses) {
        setResponses(prev => [...prev, ...data.responses.map((r: Omit<CannedResponse, "id" | "active">) => ({ ...r, id: uid(), active: true }))]);
      }
    } catch {}
    setAiLoading(false);
  }

  const filtered = responses.filter(r =>
    !search || r.trigger.toLowerCase().includes(search.toLowerCase()) || r.response.toLowerCase().includes(search.toLowerCase())
  );

  return (
    <div className="p-8 bg-dots min-h-full">
      <div className="max-w-4xl mx-auto">
        {/* Header */}
        <div className="flex items-center gap-4 mb-6 animate-fade-up">
          <Link href={`/bots/${botId}`} className="text-slate-600 hover:text-slate-300 transition-colors">
            <ArrowLeft className="w-5 h-5" />
          </Link>
          <div className="flex-1">
            <h1 className="text-2xl font-black text-white">Raspunsuri predefinite</h1>
            <p className="text-slate-500 text-sm mt-0.5">Botul raspunde instant la aceste intrebari fara sa apeleze la AI</p>
          </div>
          <div className="flex items-center gap-2">
            <button onClick={aiSuggest} disabled={aiLoading}
              className="flex items-center gap-2 text-sm bg-indigo-500/15 hover:bg-indigo-500/25 border border-indigo-500/25 text-indigo-300 px-4 py-2.5 rounded-xl font-semibold transition-all disabled:opacity-50">
              {aiLoading ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Sparkles className="w-3.5 h-3.5" />}
              Sugereaza cu AI
            </button>
            <button onClick={handleSave} disabled={saving}
              className="btn-glow flex items-center gap-2 bg-gradient-to-r from-indigo-600 to-violet-600 text-white px-5 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-indigo-500/20 disabled:opacity-50">
              <Save className="w-4 h-4" />
              {saving ? "Se salveaza..." : saved ? "✓ Salvat!" : "Salveaza"}
            </button>
          </div>
        </div>

        {/* Info banner */}
        <div className="rounded-2xl border border-indigo-500/20 p-4 mb-5 animate-fade-up" style={{ animationDelay: "60ms", background: "rgba(99,102,241,0.06)" }}>
          <div className="flex items-start gap-3">
            <div className="w-8 h-8 bg-indigo-500/15 rounded-xl flex items-center justify-center shrink-0">
              <MessageSquare className="w-4 h-4 text-indigo-400" />
            </div>
            <div>
              <p className="text-sm font-semibold text-white">Cum functioneaza?</p>
              <p className="text-xs text-slate-400 mt-0.5 leading-relaxed">
                Cand un client trimite un mesaj care contine cuvantul/expresia din <span className="text-indigo-300 font-medium">Trigger</span>, botul raspunde instant cu textul predefinit — fara sa consume credite AI. Potrivit pentru ore de program, preturi fixe, adresa, etc.
              </p>
            </div>
          </div>
        </div>

        {/* Search + Add */}
        <div className="flex gap-3 mb-4 animate-fade-up" style={{ animationDelay: "120ms" }}>
          <div className="flex-1 relative">
            <Search className="w-4 h-4 text-slate-600 absolute left-3 top-1/2 -translate-y-1/2" />
            <input
              value={search}
              onChange={e => setSearch(e.target.value)}
              placeholder="Cauta in raspunsuri..."
              className="w-full pl-9 pr-4 py-2.5 rounded-xl text-sm text-white placeholder-slate-600 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 border border-white/[0.07] focus:border-indigo-500/50 transition-all"
              style={{ background: "var(--bg-card)" }}
            />
          </div>
          <button onClick={addNew}
            className="flex items-center gap-2 bg-white/[0.05] hover:bg-white/[0.08] border border-white/[0.08] text-white px-4 py-2.5 rounded-xl text-sm font-semibold transition-all">
            <Plus className="w-4 h-4 text-indigo-400" /> Adauga manual
          </button>
        </div>

        {/* List */}
        {loading ? (
          <div className="rounded-2xl border border-white/[0.07] p-8 text-center" style={{ background: "var(--bg-card)" }}>
            <Loader2 className="w-5 h-5 animate-spin mx-auto mb-2 text-indigo-400" />
            <p className="text-sm text-slate-500">Se incarca...</p>
          </div>
        ) : filtered.length === 0 && !search ? (
          <div className="rounded-2xl border border-dashed border-white/[0.1] p-12 text-center animate-fade-up">
            <MessageSquare className="w-10 h-10 text-slate-700 mx-auto mb-3" />
            <p className="text-white font-semibold mb-1">Niciun raspuns predefinit</p>
            <p className="text-slate-500 text-sm mb-5">Adauga raspunsuri pentru intrebarile cele mai frecvente.</p>
            <div className="flex justify-center gap-3">
              <button onClick={addNew}
                className="flex items-center gap-2 bg-gradient-to-r from-indigo-600 to-violet-600 text-white px-5 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-indigo-500/25">
                <Plus className="w-4 h-4" /> Adauga manual
              </button>
              <button onClick={aiSuggest} disabled={aiLoading}
                className="flex items-center gap-2 border border-indigo-500/30 text-indigo-300 px-5 py-2.5 rounded-xl text-sm font-semibold transition-all">
                <Sparkles className="w-4 h-4" /> Genereaza cu AI
              </button>
            </div>
          </div>
        ) : (
          <div className="space-y-3">
            {/* Column headers */}
            <div className="grid grid-cols-[1fr_1.5fr_120px_40px] gap-3 px-4 text-xs font-semibold text-slate-600 uppercase tracking-wider">
              <span>Trigger (cuvant cheie)</span>
              <span>Raspuns</span>
              <span>Tip potrivire</span>
              <span />
            </div>

            {filtered.map((r, i) => (
              <div key={r.id}
                className={`rounded-2xl border transition-all duration-200 animate-fade-up ${r.active ? "border-white/[0.07]" : "border-white/[0.04] opacity-60"}`}
                style={{ background: "var(--bg-card)", animationDelay: `${i * 40}ms` }}>
                <div className="grid grid-cols-[1fr_1.5fr_120px_40px] gap-3 p-4 items-start">
                  {/* Trigger */}
                  <div>
                    <input
                      value={r.trigger}
                      onChange={e => update(r.id, "trigger", e.target.value)}
                      placeholder="ex: program, pret, adresa..."
                      className="w-full rounded-xl px-3 py-2 text-sm text-white placeholder-slate-600 focus:outline-none focus:ring-1 focus:ring-indigo-500/50 border border-white/[0.07] transition-all"
                      style={{ background: "var(--bg-panel)" }}
                    />
                  </div>
                  {/* Response */}
                  <div>
                    <textarea
                      value={r.response}
                      onChange={e => update(r.id, "response", e.target.value)}
                      placeholder="Raspunsul complet care va fi trimis..."
                      rows={2}
                      className="w-full rounded-xl px-3 py-2 text-sm text-white placeholder-slate-600 focus:outline-none focus:ring-1 focus:ring-indigo-500/50 border border-white/[0.07] transition-all resize-none"
                      style={{ background: "var(--bg-panel)" }}
                    />
                  </div>
                  {/* Match type + toggle */}
                  <div className="flex flex-col gap-2">
                    <button
                      onClick={() => update(r.id, "exactMatch", !r.exactMatch)}
                      className={`flex items-center gap-1.5 text-xs px-2.5 py-1.5 rounded-lg border transition-all font-medium ${
                        r.exactMatch
                          ? "bg-violet-500/15 border-violet-500/30 text-violet-300"
                          : "bg-white/[0.04] border-white/[0.08] text-slate-500"
                      }`}>
                      {r.exactMatch ? "Exact" : "Contine"}
                    </button>
                    <button
                      onClick={() => update(r.id, "active", !r.active)}
                      className={`flex items-center gap-1.5 text-xs px-2.5 py-1.5 rounded-lg border transition-all font-medium ${
                        r.active
                          ? "bg-emerald-500/15 border-emerald-500/30 text-emerald-400"
                          : "bg-white/[0.04] border-white/[0.08] text-slate-500"
                      }`}>
                      {r.active ? <ToggleRight className="w-3.5 h-3.5" /> : <ToggleLeft className="w-3.5 h-3.5" />}
                      {r.active ? "Activ" : "Inactiv"}
                    </button>
                  </div>
                  {/* Delete */}
                  <div className="flex items-center justify-center">
                    <button onClick={() => remove(r.id)} className="text-slate-700 hover:text-red-400 transition-colors p-1">
                      <Trash2 className="w-4 h-4" />
                    </button>
                  </div>
                </div>
              </div>
            ))}

            {search && filtered.length === 0 && (
              <div className="text-center py-8 text-slate-500 text-sm">
                Niciun rezultat pentru „{search}"
              </div>
            )}
          </div>
        )}

        {responses.length > 0 && (
          <div className="mt-4 text-xs text-slate-600 text-center">
            {responses.filter(r => r.active).length} raspunsuri active din {responses.length} total
          </div>
        )}
      </div>
    </div>
  );
}