"use client";

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

type Config = {
  id: string;
  phoneNumberId: string;
  businessAccountId: string;
  displayName: string | null;
  active: boolean;
  webhookSecret: string | null;
  createdAt: string;
};

export default function WhatsAppSettingsPage() {
  const [configs, setConfigs] = useState<Config[]>([]);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [webhookUrl, setWebhookUrl] = useState("");

  const load = useCallback(async () => {
    setLoading(true);
    const res = await fetch("/api/whatsapp/config");
    const j = await res.json().catch(() => ({}));
    if (res.ok) setConfigs(j.configs ?? []);
    else toast.error(j.error ?? "Failed to load configuration.");
    setLoading(false);
  }, []);

  useEffect(() => {
    load();
    const appUrl = process.env.NEXT_PUBLIC_APP_URL || "https://quantity-migration-mambo-neon.trycloudflare.com";
    setWebhookUrl(`${appUrl}/api/whatsapp/webhook`);
  }, [load]);

  async function save(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const form = e.currentTarget;
    setSaving(true);
    const data: Record<string, string> = {};
    for (const [k, v] of new FormData(form).entries()) data[k] = String(v);
    const res = await fetch("/api/whatsapp/config", {
      method: "PUT",
      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 ?? "Save failed.");
    toast.success("WhatsApp connected.");
    form.reset();
    load();
  }

  async function remove(id: string) {
    if (!confirm("Disconnect this WhatsApp number?")) return;
    const res = await fetch("/api/whatsapp/config", {
      method: "DELETE",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ id }),
    });
    if (!res.ok) return toast.error("Failed to disconnect.");
    toast.success("Disconnected.");
    load();
  }

  return (
    <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
      <Card>
        <CardHeader>
          <CardTitle>Connect WhatsApp Cloud API</CardTitle>
        </CardHeader>
        <CardBody>
          <form onSubmit={save} className="space-y-4">
            <div>
              <Label>Phone Number ID</Label>
              <Input name="phoneNumberId" placeholder="e.g. 123456789012345" required />
            </div>
            <div>
              <Label>WhatsApp Business Account ID (WABA ID)</Label>
              <Input name="businessAccountId" required />
            </div>
            <div>
              <Label>Display name (optional)</Label>
              <Input name="displayName" placeholder="My Business Number" />
            </div>
            <div>
              <Label>Access token (Permanent token)</Label>
              <Input name="token" type="password" required />
            </div>
            <div>
              <Label>Webhook verify token / secret (optional)</Label>
              <Input name="webhookSecret" placeholder="Custom value for webhook verification" />
            </div>
            <div className="flex justify-end">
              <Button type="submit" loading={saving}>
                Connect
              </Button>
            </div>
          </form>
        </CardBody>
      </Card>

      <div className="space-y-4">
        <Card>
          <CardHeader>
            <CardTitle>Connected numbers</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>
            ) : configs.length === 0 ? (
              <p className="text-sm text-muted-foreground">No WhatsApp numbers connected yet.</p>
            ) : (
              <div className="space-y-3">
                {configs.map((c) => (
                  <div key={c.id} className="flex items-center gap-3 rounded-lg border border-border px-4 py-3">
                    <div className="min-w-0 flex-1">
                      <p className="flex items-center gap-2 text-sm font-semibold text-foreground">
                        {c.displayName || c.phoneNumberId}
                        <Badge tone={c.active ? "green" : "gray"}>{c.active ? "Active" : "Inactive"}</Badge>
                      </p>
                      <p className="mt-0.5 truncate font-mono text-xs text-muted-foreground">
                        Phone ID {c.phoneNumberId} · WABA {c.businessAccountId}
                      </p>
                    </div>
                    <Button variant="ghost" size="icon" className="text-muted-foreground hover:text-red-600" onClick={() => remove(c.id)}>
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  </div>
                ))}
              </div>
            )}
          </CardBody>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Webhook</CardTitle>
          </CardHeader>
          <CardBody className="space-y-3">
            <p className="text-sm text-muted-foreground">
              Configure this URL plus your verify token under <strong>Webhooks</strong> in the Meta
              developer dashboard. A <code className="rounded bg-muted px-1">verify_token</code> value of{" "}
              <code className="rounded bg-muted px-1">wacrm</code> is accepted, or your custom secret above.
            </p>
            <div className="flex items-center gap-2">
              <code className="min-w-0 flex-1 truncate rounded-lg bg-muted px-3 py-2 text-xs">{webhookUrl}</code>
              <Button
                variant="outline"
                size="icon"
                onClick={() => {
                  navigator.clipboard.writeText(webhookUrl);
                  toast.success("Copied.");
                }}
              >
                <RefreshCw className="h-4 w-4" />
              </Button>
            </div>
          </CardBody>
        </Card>
      </div>
    </div>
  );
}