"use client";

import { useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { toast } from "sonner";
import { ArrowLeft, Send } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input, Textarea, Label, Select } from "@/components/ui/input";
import { Card, CardBody, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { formatDateTime, initials, cn } from "@/lib/utils";

type AnyObj = any;

export function ContactDetail({
  contact,
  tags,
  fields,
}: {
  contact: AnyObj;
  tags: AnyObj[];
  fields: AnyObj[];
}) {
  const router = useRouter();
  const [saving, setSaving] = useState(false);
  const [noteText, setNoteText] = useState("");
  const [addingNote, setAddingNote] = useState(false);

  const selectedTags = new Set(contact.tags.map((t: any) => t.tagId));

  function toggleTag(tagId: string) {
    const next = new Set(selectedTags);
    if (next.has(tagId)) next.delete(tagId);
    else next.add(tagId);
    patch({ tagIds: Array.from(next) });
  }

  async function patch(data: Record<string, unknown>) {
    const res = await fetch(`/api/contacts/${contact.id}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(data),
    });
    if (!res.ok) {
      const j = await res.json().catch(() => ({}));
      toast.error(j.error ?? "Failed to update.");
      return false;
    }
    router.refresh();
    return true;
  }

  async function save(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setSaving(true);
    const data = Object.fromEntries(new FormData(e.currentTarget).entries());
    const custom: Record<string, string> = {};
    fields.forEach((f) => {
      const v = (data[`custom_${f.id}`] as string) ?? "";
      if (v) custom[f.id] = v;
    });
    const ok = await patch({ ...data, status: data.status, custom });
    setSaving(false);
    if (ok) toast.success("Contact updated.");
  }

  async function addNote() {
    if (!noteText.trim()) return;
    setAddingNote(true);
    const res = await fetch(`/api/contacts/${contact.id}/notes`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ body: noteText }),
    });
    setAddingNote(false);
    if (!res.ok) return toast.error("Failed to add note.");
    setNoteText("");
    toast.success("Note added.");
    router.refresh();
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center gap-3">
        <Link href="/contacts" className="rounded-lg p-2 text-muted-foreground hover:bg-muted hover:text-foreground">
          <ArrowLeft className="h-5 w-5" />
        </Link>
        <div className="flex h-11 w-11 items-center justify-center rounded-full bg-indigo-100 text-sm font-bold text-indigo-700">
          {initials(contact.name)}
        </div>
        <div>
          <h1 className="text-xl font-bold text-foreground">{contact.name}</h1>
          <p className="text-sm text-muted-foreground">
            {contact.phone} {contact.email ? `· ${contact.email}` : ""}
          </p>
        </div>
        <div className="ml-auto flex gap-2">
          <Button onClick={() => router.push("/inbox")}>
            <Send className="h-4 w-4" /> Message
          </Button>
        </div>
      </div>

      <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
        <div className="space-y-6 lg:col-span-2">
          <Card>
            <CardHeader>
              <CardTitle>Details</CardTitle>
            </CardHeader>
            <CardBody>
              <form onSubmit={save} className="space-y-4">
                <div className="grid grid-cols-2 gap-3">
                  <div>
                    <Label>Full name</Label>
                    <Input name="name" defaultValue={contact.name} required />
                  </div>
                  <div>
                    <Label>Phone</Label>
                    <Input name="phone" defaultValue={contact.phone} required />
                  </div>
                  <div>
                    <Label>Email</Label>
                    <Input name="email" type="email" defaultValue={contact.email ?? ""} />
                  </div>
                  <div>
                    <Label>Company</Label>
                    <Input name="company" defaultValue={contact.company ?? ""} />
                  </div>
                </div>
                <div>
                  <Label>Status</Label>
                  <Select name="status" defaultValue={contact.status}>
                    <option value="ACTIVE">Active</option>
                    <option value="BLOCKED">Blocked</option>
                  </Select>
                </div>
                <div>
                  <Label>Notes</Label>
                  <Textarea name="notes" rows={3} defaultValue={contact.notesList ?? ""} />
                </div>
                {fields.length > 0 && (
                  <div className="grid grid-cols-2 gap-3 border-t border-border pt-4">
                    {fields.map((f) => {
                      const val = contact.customValues.find((v: any) => v.fieldId === f.id)?.value ?? "";
                      return (
                        <div key={f.id}>
                          <Label>{f.name}</Label>
                          <Input
                            name={`custom_${f.id}`}
                            type={f.type === "NUMBER" ? "number" : f.type === "DATE" ? "date" : f.type === "EMAIL" ? "email" : "text"}
                            defaultValue={val}
                          />
                        </div>
                      );
                    })}
                  </div>
                )}
                <div className="flex justify-end">
                  <Button type="submit" loading={saving}>
                    Save changes
                  </Button>
                </div>
              </form>
            </CardBody>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Tags</CardTitle>
            </CardHeader>
            <CardBody>
              <div className="flex flex-wrap gap-2">
                {tags.length === 0 && (
                  <p className="text-sm text-muted-foreground">
                    No tags yet. Create them in{" "}
                    <Link href="/settings/tags" className="text-indigo-600 hover:underline">
                      settings
                    </Link>
                    .
                  </p>
                )}
                {tags.map((t) => {
                  const active = selectedTags.has(t.id);
                  return (
                    <button
                      key={t.id}
                      type="button"
                      onClick={() => toggleTag(t.id)}
                      className={cn(
                        "rounded-full px-3 py-1 text-sm font-medium transition-colors",
                        active ? "text-white" : "border border-border text-muted-foreground hover:bg-muted"
                      )}
                      style={active ? { backgroundColor: t.color } : undefined}
                    >
                      {t.name}
                    </button>
                  );
                })}
              </div>
            </CardBody>
          </Card>
        </div>

        <div className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Notes</CardTitle>
            </CardHeader>
            <CardBody className="space-y-3">
              <div className="flex gap-2">
                <Textarea value={noteText} onChange={(e) => setNoteText(e.target.value)} rows={2} placeholder="Add a note…" />
                <Button onClick={addNote} loading={addingNote} size="icon" className="shrink-0">
                  <Send className="h-4 w-4" />
                </Button>
              </div>
              <div className="max-h-80 space-y-3 overflow-y-auto">
                {contact.notes.length === 0 && (
                  <p className="text-sm text-muted-foreground">No notes yet.</p>
                )}
                {contact.notes.map((n: any) => (
                  <div key={n.id} className="rounded-lg bg-muted p-3">
                    <p className="text-sm text-muted-foreground">{n.body}</p>
                    <p className="mt-1 text-xs text-muted-foreground">
                      {n.author.name} · {formatDateTime(n.createdAt)}
                    </p>
                  </div>
                ))}
              </div>
            </CardBody>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>Deals</CardTitle>
            </CardHeader>
            <CardBody>
              {contact.deals.length === 0 ? (
                <p className="text-sm text-muted-foreground">No deals linked.</p>
              ) : (
                <ul className="space-y-2">
                  {contact.deals.map((d: any) => (
                    <li key={d.id} className="rounded-lg border border-border p-3">
                      <p className="text-sm font-medium text-foreground">{d.title}</p>
                      <p className="text-xs text-muted-foreground">
                        {d.pipeline.name} · {d.stage.name} · ${d.value}
                      </p>
                    </li>
                  ))}
                </ul>
              )}
            </CardBody>
          </Card>
        </div>
      </div>
    </div>
  );
}