"use client";

import { useState } from "react";
import { Loader2, StickyNote } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useLocale } from "@/components/providers/locale-provider";

export function ActivityNoteForm({
  entityType,
  entityId,
  onCreated,
}: {
  entityType: "company" | "person" | "lead";
  entityId: string;
  onCreated?: () => void;
}) {
  const { locale } = useLocale();
  const isAr = locale === "ar";
  const [open, setOpen] = useState(false);
  const [text, setText] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function submit() {
    if (!text.trim()) return;
    setLoading(true);
    setError(null);
    const res = await fetch("/api/timeline/notes", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ entityType, entityId, text }),
    });
    const json = await res.json();
    setLoading(false);
    if (!res.ok) {
      setError(json.error ?? (isAr ? "فشل الحفظ" : "Save failed"));
      return;
    }
    setText("");
    setOpen(false);
    onCreated?.();
  }

  if (!open) {
    return (
      <Button type="button" variant="outline" size="sm" onClick={() => setOpen(true)}>
        <StickyNote className="h-4 w-4" />
        {isAr ? "إضافة ملاحظة" : "Add note"}
      </Button>
    );
  }

  return (
    <div className="space-y-2 rounded-lg border border-border p-3">
      <textarea
        className="min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
        placeholder={isAr ? "اكتب ملاحظتك..." : "Write your note..."}
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <div className="flex gap-2">
        <Button type="button" size="sm" disabled={loading || !text.trim()} onClick={() => void submit()}>
          {loading ? <Loader2 className="h-3 w-3 animate-spin" /> : null}
          {isAr ? "حفظ" : "Save"}
        </Button>
        <Button type="button" size="sm" variant="ghost" onClick={() => setOpen(false)}>
          {isAr ? "إلغاء" : "Cancel"}
        </Button>
      </div>
      {error ? <p className="text-xs text-destructive">{error}</p> : null}
    </div>
  );
}