"use client";

import { useEffect, useState, useCallback } from "react";
import { useParams } from "next/navigation";
import { Save, BookOpen, ArrowLeft, FlaskConical, Plus, Trash2, ChevronDown, ChevronUp, Sparkles, Loader2, Code2, LayoutTemplate, MessageSquare, Phone, Clock, Tag, HelpCircle, AlignLeft } from "lucide-react";
import Link from "next/link";

// ─── Types ───────────────────────────────────────────────────────────────────
interface Section {
  id: string;
  type: "info" | "schedule" | "services" | "faq" | "contact" | "policies" | "custom";
  title: string;
  open: boolean;
  data: Record<string, string | FAQItem[] | ServiceItem[]>;
}
interface FAQItem   { q: string; a: string }
interface ServiceItem { name: string; price: string; desc: string }

const SECTION_META: Record<string, { icon: React.ElementType; color: string; label: string }> = {
  info:     { icon: AlignLeft,    color: "indigo",  label: "Informatii generale" },
  schedule: { icon: Clock,        color: "blue",    label: "Program & locatie" },
  services: { icon: Tag,          color: "violet",  label: "Servicii & preturi" },
  faq:      { icon: HelpCircle,   color: "emerald", label: "Intrebari frecvente" },
  contact:  { icon: Phone,        color: "cyan",    label: "Contact" },
  policies: { icon: BookOpen,     color: "amber",   label: "Politici (retur, anulare...)" },
  custom:   { icon: MessageSquare,color: "slate",   label: "Sectiune libera" },
};

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

function defaultSection(type: Section["type"]): Section {
  const data: Record<string, string | FAQItem[] | ServiceItem[]> = {};
  if (type === "info")     { data.name = ""; data.activity = ""; data.description = ""; }
  if (type === "schedule") { data.weekdays = ""; data.weekend = ""; data.address = ""; }
  if (type === "services") { data.items = [] as ServiceItem[]; }
  if (type === "faq")      { data.items = [] as FAQItem[]; }
  if (type === "contact")  { data.phone = ""; data.email = ""; data.whatsapp = ""; data.website = ""; }
  if (type === "policies") { data.text = ""; }
  if (type === "custom")   { data.title = ""; data.text = ""; }
  return { id: uid(), type, title: SECTION_META[type].label, open: true, data };
}

// ─── Section → plain text compiler ───────────────────────────────────────────
function compileSection(s: Section): string {
  const lines: string[] = [`[${s.title.toUpperCase()}]`];
  if (s.type === "info") {
    if (s.data.name)        lines.push(`Firma/Brand: ${s.data.name}`);
    if (s.data.activity)    lines.push(`Activitate: ${s.data.activity}`);
    if (s.data.description) lines.push(`\n${s.data.description}`);
  }
  if (s.type === "schedule") {
    if (s.data.weekdays) lines.push(`Luni-Vineri: ${s.data.weekdays}`);
    if (s.data.weekend)  lines.push(`Sambata-Duminica: ${s.data.weekend}`);
    if (s.data.address)  lines.push(`Adresa: ${s.data.address}`);
  }
  if (s.type === "services") {
    const items = (s.data.items as ServiceItem[]) || [];
    items.forEach(i => {
      if (i.name) {
        let line = `- ${i.name}`;
        if (i.price) line += `: ${i.price}`;
        if (i.desc)  line += ` (${i.desc})`;
        lines.push(line);
      }
    });
  }
  if (s.type === "faq") {
    const items = (s.data.items as FAQItem[]) || [];
    items.forEach(i => {
      if (i.q) { lines.push(`\nÎntrebare: ${i.q}`); lines.push(`Răspuns: ${i.a}`); }
    });
  }
  if (s.type === "contact") {
    if (s.data.phone)    lines.push(`Telefon: ${s.data.phone}`);
    if (s.data.whatsapp) lines.push(`WhatsApp: ${s.data.whatsapp}`);
    if (s.data.email)    lines.push(`Email: ${s.data.email}`);
    if (s.data.website)  lines.push(`Website: ${s.data.website}`);
  }
  if (s.type === "policies" || s.type === "custom") {
    if (s.data.text) lines.push(s.data.text as string);
  }
  return lines.join("\n");
}

function compileSections(sections: Section[]): string {
  return sections.map(compileSection).join("\n\n");
}

// ─── INPUT HELPERS ────────────────────────────────────────────────────────────
function Field({ label, value, onChange, placeholder, multiline = false }: { label: string; value: string; onChange: (v: string) => void; placeholder?: string; multiline?: boolean }) {
  const cls = "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] focus:border-indigo-500/40 transition-all";
  const style = { background: "var(--bg-base)" };
  return (
    <div>
      <label className="block text-xs font-medium text-slate-400 mb-1">{label}</label>
      {multiline
        ? <textarea value={value} onChange={e => onChange(e.target.value)} placeholder={placeholder} rows={3} className={`${cls} resize-none`} style={style} />
        : <input value={value} onChange={e => onChange(e.target.value)} placeholder={placeholder} className={cls} style={style} />
      }
    </div>
  );
}

const MAX_CHARS = 15000;

export default function KnowledgePage() {
  const { botId } = useParams<{ botId: string }>();
  const [tab, setTab]         = useState<"builder" | "raw">("builder");
  const [sections, setSections] = useState<Section[]>([]);
  const [rawText, setRawText] = useState("");
  const [loading, setLoading] = useState(true);
  const [saving, setSaving]   = useState(false);
  const [saved, setSaved]     = useState(false);
  const [aiSectionId, setAiSectionId] = useState<string | null>(null);

  useEffect(() => {
    fetch(`/api/bots/${botId}/knowledge`).then(r => r.json()).then(d => {
      const content = d.content ?? "";
      setRawText(content);
      // if nothing saved yet, start with default sections
      if (!content.trim()) {
        setSections([defaultSection("info"), defaultSection("schedule"), defaultSection("services"), defaultSection("faq"), defaultSection("contact")]);
      } else {
        // raw text exists — show raw tab by default
        setTab("raw");
      }
      setLoading(false);
    });
  }, [botId]);

  const compiledContent = useCallback(() => {
    return tab === "builder" ? compileSections(sections) : rawText;
  }, [tab, sections, rawText]);

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

  // ─── Section mutation helpers ───
  function updateSectionData(id: string, key: string, value: string | FAQItem[] | ServiceItem[]) {
    setSections(prev => prev.map(s => s.id === id ? { ...s, data: { ...s.data, [key]: value } } : s));
  }
  function toggleSection(id: string) {
    setSections(prev => prev.map(s => s.id === id ? { ...s, open: !s.open } : s));
  }
  function removeSection(id: string) {
    setSections(prev => prev.filter(s => s.id !== id));
  }
  function addSection(type: Section["type"]) {
    setSections(prev => [...prev, defaultSection(type)]);
  }
  function updateSectionTitle(id: string, title: string) {
    setSections(prev => prev.map(s => s.id === id ? { ...s, title } : s));
  }

  // ─── AI generate for FAQ ───
  async function aiGenerateFAQ(sectionId: string) {
    const compiled = compiledContent();
    if (!compiled.trim()) return;
    setAiSectionId(sectionId);
    try {
      const res = await fetch("/api/ai/generate-faq", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ context: compiled }),
      });
      const data = await res.json();
      if (data.faqs) {
        updateSectionData(sectionId, "items", data.faqs as FAQItem[]);
      }
    } catch {}
    setAiSectionId(null);
  }

  const charCount = compiledContent().length;
  const pct = Math.min(100, Math.round((charCount / MAX_CHARS) * 100));

  return (
    <div className="p-8 bg-dots min-h-full">
      <div className="max-w-5xl 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">Baza de cunostinte</h1>
            <p className="text-slate-500 text-sm mt-0.5">Tot ce stie botul tau despre afacerea ta</p>
          </div>
          <button
            onClick={handleSave}
            disabled={saving || loading}
            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>

        {/* Tabs */}
        <div className="flex items-center gap-1 p-1 rounded-xl border border-white/[0.06] mb-6 w-fit animate-fade-up" style={{ animationDelay: "60ms", background: "var(--bg-card)" }}>
          {([["builder", LayoutTemplate, "Builder vizual"], ["raw", Code2, "Editor raw"]] as const).map(([t, Icon, label]) => (
            <button key={t} onClick={() => setTab(t as "builder" | "raw")}
              className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-semibold transition-all ${
                tab === t ? "bg-indigo-600 text-white shadow-lg" : "text-slate-500 hover:text-white"
              }`}>
              <Icon className="w-3.5 h-3.5" />{label}
            </button>
          ))}
        </div>

        <div className="grid grid-cols-[1fr_280px] gap-5">
          {/* ─── MAIN COLUMN ─── */}
          <div className="space-y-3">
            {tab === "builder" ? (
              <>
                {loading ? (
                  <div className="rounded-2xl border border-white/[0.07] p-8 text-center text-slate-500 text-sm" style={{ background: "var(--bg-card)" }}>
                    <Loader2 className="w-5 h-5 animate-spin mx-auto mb-2 text-indigo-400" />
                    Se incarca...
                  </div>
                ) : sections.length === 0 ? (
                  <div className="rounded-2xl border border-dashed border-white/[0.1] p-12 text-center animate-fade-up">
                    <BookOpen className="w-8 h-8 text-slate-600 mx-auto mb-3" />
                    <p className="text-slate-500 text-sm">Nicio sectiune inca. Adauga una din panoul din dreapta.</p>
                  </div>
                ) : (
                  sections.map((section, idx) => {
                    const meta = SECTION_META[section.type];
                    const Icon = meta.icon;
                    return (
                      <div key={section.id}
                        className="rounded-2xl border border-white/[0.07] overflow-hidden animate-fade-up"
                        style={{ background: "var(--bg-card)", animationDelay: `${idx * 50}ms` }}>
                        {/* Section header */}
                        <div
                          className="flex items-center gap-3 px-4 py-3 cursor-pointer hover:bg-white/[0.02] transition-colors"
                          onClick={() => toggleSection(section.id)}>
                          <div className={`w-7 h-7 rounded-lg bg-${meta.color}-500/10 border border-${meta.color}-500/20 flex items-center justify-center shrink-0`}>
                            <Icon className={`w-3.5 h-3.5 text-${meta.color}-400`} />
                          </div>
                          <input
                            value={section.title}
                            onChange={e => { e.stopPropagation(); updateSectionTitle(section.id, e.target.value); }}
                            onClick={e => e.stopPropagation()}
                            className="flex-1 bg-transparent text-sm font-semibold text-white focus:outline-none focus:ring-1 focus:ring-indigo-500/30 rounded px-1"
                          />
                          <button onClick={e => { e.stopPropagation(); removeSection(section.id); }}
                            className="text-slate-700 hover:text-red-400 transition-colors p-1 rounded">
                            <Trash2 className="w-3.5 h-3.5" />
                          </button>
                          {section.open ? <ChevronUp className="w-4 h-4 text-slate-600 shrink-0" /> : <ChevronDown className="w-4 h-4 text-slate-600 shrink-0" />}
                        </div>

                        {/* Section body */}
                        {section.open && (
                          <div className="px-4 pb-4 pt-2 border-t border-white/[0.05] space-y-3">
                            {section.type === "info" && (
                              <>
                                <Field label="Numele firmei / brandului" value={section.data.name as string} onChange={v => updateSectionData(section.id, "name", v)} placeholder="ex: La Mama Restaurant" />
                                <Field label="Activitate / domeniu" value={section.data.activity as string} onChange={v => updateSectionData(section.id, "activity", v)} placeholder="ex: Restaurant traditional romanesc" />
                                <Field label="Descriere generala" value={section.data.description as string} onChange={v => updateSectionData(section.id, "description", v)} placeholder="Descriere libera..." multiline />
                              </>
                            )}
                            {section.type === "schedule" && (
                              <>
                                <Field label="Program Luni-Vineri" value={section.data.weekdays as string} onChange={v => updateSectionData(section.id, "weekdays", v)} placeholder="ex: 09:00 - 22:00" />
                                <Field label="Program Sambata-Duminica" value={section.data.weekend as string} onChange={v => updateSectionData(section.id, "weekend", v)} placeholder="ex: 10:00 - 23:00 / Inchis" />
                                <Field label="Adresa" value={section.data.address as string} onChange={v => updateSectionData(section.id, "address", v)} placeholder="ex: Str. Exemplu nr. 1, Bucuresti" />
                              </>
                            )}
                            {section.type === "contact" && (
                              <>
                                <div className="grid grid-cols-2 gap-3">
                                  <Field label="Telefon" value={section.data.phone as string} onChange={v => updateSectionData(section.id, "phone", v)} placeholder="0722 000 000" />
                                  <Field label="WhatsApp" value={section.data.whatsapp as string} onChange={v => updateSectionData(section.id, "whatsapp", v)} placeholder="0722 000 000" />
                                  <Field label="Email" value={section.data.email as string} onChange={v => updateSectionData(section.id, "email", v)} placeholder="contact@firma.ro" />
                                  <Field label="Website" value={section.data.website as string} onChange={v => updateSectionData(section.id, "website", v)} placeholder="www.firma.ro" />
                                </div>
                              </>
                            )}
                            {section.type === "services" && (
                              <>
                                {((section.data.items as ServiceItem[]) || []).map((item, i) => (
                                  <div key={i} className="flex gap-2 items-start">
                                    <div className="flex-1 grid grid-cols-3 gap-2">
                                      <input value={item.name} onChange={e => {
                                        const items = [...(section.data.items as ServiceItem[])];
                                        items[i] = { ...items[i], name: e.target.value };
                                        updateSectionData(section.id, "items", items);
                                      }} placeholder="Serviciu" className="rounded-xl px-3 py-2 text-sm text-white placeholder-slate-600 bg-[var(--bg-base)] border border-white/[0.07] focus:outline-none focus:ring-1 focus:ring-indigo-500/50" />
                                      <input value={item.price} onChange={e => {
                                        const items = [...(section.data.items as ServiceItem[])];
                                        items[i] = { ...items[i], price: e.target.value };
                                        updateSectionData(section.id, "items", items);
                                      }} placeholder="Pret (RON)" className="rounded-xl px-3 py-2 text-sm text-white placeholder-slate-600 bg-[var(--bg-base)] border border-white/[0.07] focus:outline-none focus:ring-1 focus:ring-indigo-500/50" />
                                      <input value={item.desc} onChange={e => {
                                        const items = [...(section.data.items as ServiceItem[])];
                                        items[i] = { ...items[i], desc: e.target.value };
                                        updateSectionData(section.id, "items", items);
                                      }} placeholder="Detalii (opt)" className="rounded-xl px-3 py-2 text-sm text-white placeholder-slate-600 bg-[var(--bg-base)] border border-white/[0.07] focus:outline-none focus:ring-1 focus:ring-indigo-500/50" />
                                    </div>
                                    <button onClick={() => {
                                      const items = (section.data.items as ServiceItem[]).filter((_, j) => j !== i);
                                      updateSectionData(section.id, "items", items);
                                    }} className="text-slate-700 hover:text-red-400 transition-colors p-2 mt-0.5">
                                      <Trash2 className="w-3.5 h-3.5" />
                                    </button>
                                  </div>
                                ))}
                                <button onClick={() => updateSectionData(section.id, "items", [...(section.data.items as ServiceItem[]), { name: "", price: "", desc: "" }])}
                                  className="flex items-center gap-2 text-xs text-indigo-400 hover:text-indigo-300 border border-dashed border-indigo-500/30 hover:border-indigo-500/50 rounded-xl px-3 py-2 transition-all w-full justify-center">
                                  <Plus className="w-3.5 h-3.5" /> Adauga serviciu
                                </button>
                              </>
                            )}
                            {section.type === "faq" && (
                              <>
                                {((section.data.items as FAQItem[]) || []).map((item, i) => (
                                  <div key={i} className="rounded-xl border border-white/[0.06] p-3 space-y-2" style={{ background: "var(--bg-base)" }}>
                                    <div className="flex items-center gap-2">
                                      <span className="text-xs text-emerald-400 font-bold uppercase tracking-wider w-16 shrink-0">Intrebare</span>
                                      <input value={item.q} onChange={e => {
                                        const items = [...(section.data.items as FAQItem[])];
                                        items[i] = { ...items[i], q: e.target.value };
                                        updateSectionData(section.id, "items", items);
                                      }} placeholder="ex: Care sunt orele de functionare?" className="flex-1 bg-transparent text-sm text-white placeholder-slate-600 focus:outline-none border-b border-white/[0.05] py-0.5" />
                                      <button onClick={() => {
                                        const items = (section.data.items as FAQItem[]).filter((_, j) => j !== i);
                                        updateSectionData(section.id, "items", items);
                                      }} className="text-slate-700 hover:text-red-400 transition-colors shrink-0">
                                        <Trash2 className="w-3.5 h-3.5" />
                                      </button>
                                    </div>
                                    <div className="flex items-start gap-2">
                                      <span className="text-xs text-indigo-400 font-bold uppercase tracking-wider w-16 shrink-0 mt-1">Raspuns</span>
                                      <textarea value={item.a} onChange={e => {
                                        const items = [...(section.data.items as FAQItem[])];
                                        items[i] = { ...items[i], a: e.target.value };
                                        updateSectionData(section.id, "items", items);
                                      }} placeholder="ex: Suntem deschisi luni-vineri 09:00-18:00." rows={2} className="flex-1 bg-transparent text-sm text-white placeholder-slate-600 focus:outline-none resize-none" />
                                    </div>
                                  </div>
                                ))}
                                <div className="flex gap-2">
                                  <button onClick={() => updateSectionData(section.id, "items", [...(section.data.items as FAQItem[]), { q: "", a: "" }])}
                                    className="flex-1 flex items-center gap-2 justify-center text-xs text-indigo-400 hover:text-indigo-300 border border-dashed border-indigo-500/30 hover:border-indigo-500/50 rounded-xl px-3 py-2 transition-all">
                                    <Plus className="w-3.5 h-3.5" /> Adauga intrebare
                                  </button>
                                  <button onClick={() => aiGenerateFAQ(section.id)} disabled={aiSectionId === section.id}
                                    className="flex items-center gap-2 text-xs text-emerald-400 hover:text-emerald-300 border border-dashed border-emerald-500/30 hover:border-emerald-500/50 rounded-xl px-3 py-2 transition-all disabled:opacity-50">
                                    {aiSectionId === section.id ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Sparkles className="w-3.5 h-3.5" />}
                                    Genereaza FAQ cu AI
                                  </button>
                                </div>
                              </>
                            )}
                            {(section.type === "policies" || section.type === "custom") && (
                              <Field label="Text" value={section.data.text as string} onChange={v => updateSectionData(section.id, "text", v)} placeholder="Scrie textul sectiunii..." multiline />
                            )}
                          </div>
                        )}
                      </div>
                    );
                  })
                )}
              </>
            ) : (
              /* RAW EDITOR */
              <div className="rounded-2xl border border-white/[0.07] overflow-hidden animate-fade-up" style={{ background: "var(--bg-card)" }}>
                <div className="flex items-center gap-2 px-4 py-3 border-b border-white/[0.06]">
                  <Code2 className="w-4 h-4 text-indigo-400" />
                  <span className="text-sm font-semibold text-white">Editor text</span>
                  <span className="text-xs text-slate-500 ml-auto">{rawText.length.toLocaleString()} / {MAX_CHARS.toLocaleString()} caractere</span>
                </div>
                <textarea
                  value={rawText}
                  onChange={e => setRawText(e.target.value.slice(0, MAX_CHARS))}
                  disabled={loading}
                  rows={24}
                  placeholder={"Adauga informatii despre afacerea ta...\n\nExemplu:\nFirma: Exemplu SRL\nProgram: Luni-Vineri 09:00-18:00\nTelefon: 0722 000 000\n\nServicii:\n- Serviciu 1: 100 RON\n- Serviciu 2: 200 RON\n\nFAQ:\nQ: Care este programul?\nA: Suntem deschisi luni-vineri 09:00-18:00."}
                  className="w-full px-4 py-4 text-sm text-slate-200 bg-transparent focus:outline-none resize-none font-mono leading-relaxed disabled:opacity-40 placeholder:text-slate-700"
                />
                <div className="px-4 py-2.5 border-t border-white/[0.06]">
                  <div className="flex items-center gap-3">
                    <div className="flex-1 h-1 bg-white/[0.06] rounded-full">
                      <div className={`h-1 rounded-full transition-all ${pct > 80 ? "bg-amber-500" : "bg-gradient-to-r from-indigo-500 to-violet-500"}`} style={{ width: `${pct}%` }} />
                    </div>
                    <span className="text-xs text-slate-600">{pct}%</span>
                  </div>
                </div>
              </div>
            )}
          </div>

          {/* ─── RIGHT SIDEBAR ─── */}
          <div className="space-y-4">
            {tab === "builder" && (
              <div className="rounded-2xl border border-white/[0.07] p-4" style={{ background: "var(--bg-card)" }}>
                <p className="text-xs font-bold text-white uppercase tracking-wider mb-3">Adauga sectiune</p>
                <div className="space-y-1.5">
                  {(Object.entries(SECTION_META) as [Section["type"], typeof SECTION_META[string]][]).map(([type, meta]) => {
                    const Icon = meta.icon;
                    return (
                      <button key={type} onClick={() => addSection(type)}
                        className={`w-full flex items-center gap-2.5 px-3 py-2 rounded-xl text-left text-sm transition-all hover:bg-${meta.color}-500/10 border border-transparent hover:border-${meta.color}-500/20 group`}>
                        <Icon className={`w-3.5 h-3.5 text-${meta.color}-400 shrink-0`} />
                        <span className="text-slate-400 group-hover:text-white transition-colors text-xs">{meta.label}</span>
                        <Plus className="w-3 h-3 text-slate-700 group-hover:text-slate-400 ml-auto" />
                      </button>
                    );
                  })}
                </div>
              </div>
            )}

            <div className="rounded-2xl border border-indigo-500/15 p-4" style={{ background: "rgba(99,102,241,0.05)" }}>
              <p className="text-xs font-bold text-indigo-400 uppercase tracking-wider mb-2">Sfaturi</p>
              <ul className="space-y-1.5 text-xs text-slate-500">
                {["Adauga preturi exacte — reduce intrebarile cu 60%", "Mentioneza ce date ai nevoie de la client", "FAQ-ul bine scris scade escaladarea", "Include politica de anulare / retur"].map(tip => (
                  <li key={tip} className="flex items-start gap-1.5">
                    <span className="text-indigo-600 mt-0.5">·</span>{tip}
                  </li>
                ))}
              </ul>
            </div>

            <div className="rounded-2xl border border-white/[0.07] p-4 space-y-2" style={{ background: "var(--bg-card)" }}>
              <p className="text-xs font-bold text-white uppercase tracking-wider">Caractere utilizate</p>
              <div className="flex items-end gap-2">
                <span className={`text-2xl font-black ${pct > 80 ? "text-amber-400" : "text-white"}`}>{charCount.toLocaleString()}</span>
                <span className="text-xs text-slate-600 mb-1">/ {MAX_CHARS.toLocaleString()}</span>
              </div>
              <div className="w-full h-1.5 bg-white/[0.05] rounded-full">
                <div className={`h-1.5 rounded-full transition-all ${pct > 80 ? "bg-amber-500" : "bg-gradient-to-r from-indigo-500 to-violet-500"}`} style={{ width: `${pct}%` }} />
              </div>
            </div>

            <Link href={`/bots/${botId}/test`}
              className="flex items-center justify-center gap-2 w-full border border-white/[0.08] hover:border-emerald-500/30 text-slate-400 hover:text-white text-sm py-3 rounded-xl transition-all font-semibold hover:bg-emerald-500/5">
              <FlaskConical className="w-4 h-4 text-emerald-400" />
              Testeaza botul
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}