"use client";

import { useCallback, useEffect, useState } from "react";
import { toast } from "sonner";
import { Loader2 as Loader, BookOpen, Trash2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardBody, CardHeader, CardTitle } from "@/components/ui/card";
import { Input, Textarea, Label } from "@/components/ui/input";

type Item = { id: string; title: string; body: string; updatedAt: string };

export default function KnowledgePage() {
  const [items, setItems] = useState<Item[]>([]);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [open, setOpen] = useState<string | null>(null);

  const [savingBehavior, setSavingBehavior] = useState(false);
  const [behavior, setBehavior] = useState("");

  const load = useCallback(async () => {
    setLoading(true);
    const [res, behaviorRes] = await Promise.all([
      fetch("/api/settings/knowledge"),
      fetch("/api/settings/behavior")
    ]);
    const j = await res.json().catch(() => ({}));
    if (res.ok) setItems(j.items ?? []);
    else toast.error(j.error ?? "Failed to load knowledge base.");
    
    if (behaviorRes.ok) {
      const bj = await behaviorRes.json().catch(() => ({}));
      setBehavior(bj.agentBehavior ?? "");
    }
    
    setLoading(false);
  }, []);

  useEffect(() => {
    load();
  }, [load]);

  async function create(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setSaving(true);
    const data: Record<string, string> = {};
    for (const [k, v] of new FormData(e.currentTarget).entries()) data[k] = String(v);
    const res = await fetch("/api/settings/knowledge", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(data),
    });
    const j = await res.json().catch(() => ({}));
    setSaving(false);
    if (!res.ok) return toast.error(j.error ?? "Create failed.");
    toast.success("Knowledge item added.");
    e.currentTarget.reset();
    load();
  }

  async function saveBehavior(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setSavingBehavior(true);
    const data: Record<string, string> = {};
    for (const [k, v] of new FormData(e.currentTarget).entries()) data[k] = String(v);
    const res = await fetch("/api/settings/behavior", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(data),
    });
    const j = await res.json().catch(() => ({}));
    setSavingBehavior(false);
    if (!res.ok) return toast.error(j.error ?? "Save failed.");
    toast.success("AI Agent Behavior saved.");
    load();
  }

  async function remove(id: string) {
    const res = await fetch(`/api/settings/knowledge/${id}`, { method: "DELETE" });
    if (!res.ok) return toast.error("Delete failed.");
    toast.success("Deleted.");
    load();
  }

  return (
    <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
      <div className="space-y-6">
        <Card>
          <CardHeader>
            <CardTitle>Add a knowledge item</CardTitle>
          </CardHeader>
          <CardBody>
            <form onSubmit={create} className="space-y-4">
              <div>
                <Label>Title</Label>
                <Input name="title" placeholder="e.g. Return policy" required />
              </div>
              <div>
                <Label>Answer / content</Label>
                <Textarea name="body" rows={5} required />
              </div>
              <div className="flex justify-end">
                <Button type="submit" loading={saving}>
                  <BookOpen className="h-4 w-4" /> Add item
                </Button>
              </div>
              <p className="text-xs text-muted-foreground">
                Stored items are searched (full-text) to ground the AI assistant answers.
              </p>
            </form>
          </CardBody>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Crawl Website</CardTitle>
          </CardHeader>
          <CardBody>
            <form onSubmit={async (e) => {
              e.preventDefault();
              const form = e.currentTarget;
              const url = new FormData(form).get("url") as string;
              if (!url) return;
              
              setSaving(true);
              const res = await fetch("/api/settings/knowledge/crawl", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ url }),
              });
              const j = await res.json().catch(() => ({}));
              setSaving(false);
              
              if (!res.ok) return toast.error(j.error ?? "Failed to crawl website.");
              toast.success("Website content added to knowledge base.");
              form.reset();
              load();
            }} className="space-y-4">
              <div>
                <Label>Website URL</Label>
                <Input name="url" type="url" placeholder="https://example.com/about" required />
              </div>
              <div className="flex justify-end">
                <Button type="submit" loading={saving}>
                  <BookOpen className="h-4 w-4" /> Crawl & Add
                </Button>
              </div>
              <p className="text-xs text-muted-foreground">
                We will fetch the webpage and extract the readable text to add to your knowledge base.
              </p>
            </form>
          </CardBody>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>AI Agent Behavior</CardTitle>
          </CardHeader>
          <CardBody>
            <form onSubmit={saveBehavior} className="space-y-4">
              <div>
                <Label>Behavioral Instructions</Label>
                <Textarea 
                  name="agentBehavior" 
                  rows={5} 
                  defaultValue={behavior} 
                  placeholder="You are a helpful customer support agent..." 
                  key={behavior}
                />
              </div>
              <div className="flex justify-end">
                <Button type="submit" loading={savingBehavior}>
                  Save Behavior
                </Button>
              </div>
              <p className="text-xs text-muted-foreground">
                Describes how an autonomous system perceives its environment, processes data, and executes independent actions to fulfill specific goals. Unlike static chatbots that only react to prompts, agents use reasoning frameworks (like ReAct) to plan multi-step tasks, utilize external tools, and iterate on outputs without constant human guidance etc.
              </p>
            </form>
          </CardBody>
        </Card>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>Knowledge base</CardTitle>
        </CardHeader>
        <CardBody>
          {loading ? (
            <div className="flex items-center gap-2 text-sm text-muted-foreground">
              <Loader className="h-4 w-4 animate-spin" /> Loading…
            </div>
          ) : items.length === 0 ? (
            <p className="text-sm text-muted-foreground">No knowledge items yet.</p>
          ) : (
            <div className="space-y-2">
              {items.map((item) => (
                <div key={item.id} className="rounded-lg border border-border">
                  <div
                    role="button"
                    tabIndex={0}
                    className="flex w-full cursor-pointer items-center gap-3 px-4 py-3 text-left"
                    onClick={() => setOpen(open === item.id ? null : item.id)}
                    onKeyDown={(e) => {
                      if (e.key === "Enter" || e.key === " ") {
                        e.preventDefault();
                        setOpen(open === item.id ? null : item.id);
                      }
                    }}
                  >
                    <span className="flex-1 text-sm font-semibold text-foreground">{item.title}</span>
                    <span className="text-xs text-muted-foreground">{new Date(item.updatedAt).toLocaleDateString()}</span>
                    <Button
                      variant="ghost"
                      size="icon"
                      className="h-7 w-7 text-muted-foreground hover:text-red-600"
                      onClick={(ev) => {
                        ev.stopPropagation();
                        remove(item.id);
                      }}
                    >
                      <Trash2 className="h-3.5 w-3.5" />
                    </Button>
                  </div>
                  {open === item.id && (
                    <p className="whitespace-pre-wrap border-t border-border px-4 py-3 text-sm text-muted-foreground">
                      {item.body}
                    </p>
                  )}
                </div>
              ))}
            </div>
          )}
        </CardBody>
      </Card>
    </div>
  );
}