"use client";

import { useCallback, useEffect, useState } from "react";
import { useSearchParams } from "next/navigation";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { useAlertConfirm } from "@/components/ui/alert-dialog";
import { ALL_ORGANIZATIONS } from "@/lib/sag/entities";
import { SOCIAL_PLATFORM_LIST, type SocialPlatformId } from "@/lib/social/platforms";

interface SafeSocialAccount {
  id: string;
  platform: SocialPlatformId;
  remoteId: string;
  handle: string;
  displayName?: string;
  pictureUrl?: string;
  entitySlug?: string;
  label?: string;
  connectedAt: string;
  updatedAt?: string;
  meta?: Record<string, string | number | boolean>;
}

interface CanvaSafeAccount {
  id: string;
  displayName?: string;
  email?: string;
  entitySlug?: string;
  connectedAt: string;
}

interface ConnectionsPayload {
  social: Record<SocialPlatformId, boolean>;
  canva: { clientId: boolean; clientSecret: boolean };
  google: { clientId: boolean; clientSecret: boolean };
}

const PLATFORM_AUTH_HREF: Record<SocialPlatformId, string> = {
  instagram: "/api/meta/auth?returnTo=%2Fapp%2Fsocial%2Faccounts",
  facebook: "/api/meta/auth?returnTo=%2Fapp%2Fsocial%2Faccounts",
  tiktok: "/api/social/stub-auth?platform=tiktok",
  x: "/api/social/stub-auth?platform=x",
  youtube: "/api/social/stub-auth?platform=youtube",
  linkedin: "/api/social/stub-auth?platform=linkedin",
  threads: "/api/social/stub-auth?platform=threads",
  pinterest: "/api/social/stub-auth?platform=pinterest",
};

export function SocialAccounts() {
  const [accounts, setAccounts] = useState<SafeSocialAccount[]>([]);
  const [canvaAccounts, setCanvaAccounts] = useState<CanvaSafeAccount[]>([]);
  const [connections, setConnections] = useState<ConnectionsPayload | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string>("");
  const [stubMsg, setStubMsg] = useState<string>("");
  const { confirm: confirmAlert, AlertConfirmPortal } = useAlertConfirm();

  const params = useSearchParams();
  const metaConnectedCount = params.get("meta_connected");
  const metaError = params.get("meta_error");
  const canvaConnected = params.get("canva_connected");
  const canvaError = params.get("canva_error");

  const refresh = useCallback(async () => {
    setLoading(true);
    try {
      const [accountsResp, canvaResp, connResp] = await Promise.all([
        fetch("/api/social/accounts"),
        fetch("/api/canva/accounts"),
        fetch("/api/system/connections"),
      ]);
      const accountsData = await accountsResp.json();
      const canvaData = await canvaResp.json();
      const connData = await connResp.json();
      if (!accountsResp.ok) throw new Error(accountsData.error || "Failed to load accounts");
      setAccounts(accountsData.accounts ?? []);
      setCanvaAccounts(canvaData.accounts ?? []);
      setConnections(connData);
    } catch (e) {
      setError(e instanceof Error ? e.message : "Unknown error");
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    const t = setTimeout(() => void refresh(), 0);
    return () => clearTimeout(t);
  }, [refresh]);

  async function setEntity(account: SafeSocialAccount, entitySlug: string) {
    await fetch("/api/social/accounts", {
      method: "PATCH",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({ platform: account.platform, id: account.id, entitySlug }),
    });
    setAccounts((prev) => prev.map((a) => (a.id === account.id ? { ...a, entitySlug } : a)));
  }

  async function disconnect(account: SafeSocialAccount) {
    const ok = await confirmAlert({
      title: `Disconnect ${account.handle}?`,
      description: "You can reconnect via OAuth.",
      actionLabel: "Disconnect",
      destructive: true,
    });
    if (!ok) return;
    await fetch(
      `/api/social/accounts?platform=${encodeURIComponent(account.platform)}&id=${encodeURIComponent(account.id)}`,
      { method: "DELETE" }
    );
    setAccounts((prev) => prev.filter((a) => a.id !== account.id));
  }

  async function setCanvaEntity(account: CanvaSafeAccount, entitySlug: string) {
    await fetch("/api/canva/accounts", {
      method: "PATCH",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({ id: account.id, entitySlug }),
    });
    setCanvaAccounts((prev) => prev.map((a) => (a.id === account.id ? { ...a, entitySlug } : a)));
  }

  async function disconnectCanva(account: CanvaSafeAccount) {
    const ok = await confirmAlert({
      title: `Disconnect Canva for ${account.displayName ?? account.id}?`,
      description: "You can reconnect via OAuth.",
      actionLabel: "Disconnect",
      destructive: true,
    });
    if (!ok) return;
    await fetch(`/api/canva/accounts?id=${encodeURIComponent(account.id)}`, { method: "DELETE" });
    setCanvaAccounts((prev) => prev.filter((a) => a.id !== account.id));
  }

  async function handleStubClick(platformId: SocialPlatformId) {
    setStubMsg("");
    try {
      const resp = await fetch(`/api/social/stub-auth?platform=${platformId}`);
      const data = await resp.json();
      setStubMsg(data.message ?? `${platformId} is not yet configured.`);
    } catch {
      setStubMsg(`${platformId} is not yet configured.`);
    }
  }

  function platformAccounts(id: SocialPlatformId) {
    return accounts.filter((a) => a.platform === id);
  }

  const canvaConfigured = !!connections?.canva.clientId && !!connections?.canva.clientSecret;

  return (
    <>
    <div className="space-y-6 max-w-5xl">
      {(metaConnectedCount || metaError || canvaConnected || canvaError) && (
        <Card
          className={
            metaError || canvaError
              ? "border-destructive/30 bg-destructive/5"
              : "border-green-500/30 bg-green-50/30 dark:bg-green-900/10"
          }
        >
          <CardContent className="p-4 text-sm space-y-1">
            {metaError && (
              <div>
                <strong className="text-destructive">Meta error:</strong> {metaError}
              </div>
            )}
            {metaConnectedCount && (
              <div>
                <strong className="text-green-700 dark:text-green-400">Meta connected:</strong>{" "}
                {metaConnectedCount} page{metaConnectedCount === "1" ? "" : "s"} + linked Instagram
                business accounts imported.
              </div>
            )}
            {canvaError && (
              <div>
                <strong className="text-destructive">Canva error:</strong> {canvaError}
              </div>
            )}
            {canvaConnected && (
              <div>
                <strong className="text-green-700 dark:text-green-400">Canva connected:</strong>{" "}
                {canvaConnected}
              </div>
            )}
          </CardContent>
        </Card>
      )}

      {stubMsg && (
        <Card className="border-yellow-500/30 bg-yellow-50/30 dark:bg-yellow-900/10">
          <CardContent className="p-4 text-sm">{stubMsg}</CardContent>
        </Card>
      )}

      {error && (
        <Card>
          <CardContent className="p-4 text-sm text-destructive">{error}</CardContent>
        </Card>
      )}

      <Card>
        <CardContent className="p-6 space-y-2">
          <h2 className="text-base font-semibold">Connect your platforms</h2>
          <p className="text-sm text-muted-foreground max-w-3xl">
            Connect once per platform — every business page, channel, or IG account on that login
            imports automatically. Tokens stay on the server in <code className="text-xs">.data/social/</code> (mode 600, gitignored). You can assign each account to a SAG entity below; the composer uses
            those assignments to filter posts.
          </p>
        </CardContent>
      </Card>

      {loading && (
        <Card>
          <CardContent className="p-6 text-sm text-muted-foreground">Loading…</CardContent>
        </Card>
      )}

      {!loading &&
        SOCIAL_PLATFORM_LIST.map((plat) => {
          const configured = connections?.social[plat.id] ?? false;
          const platAccounts = platformAccounts(plat.id);
          const isMeta = plat.id === "instagram" || plat.id === "facebook";
          const oauthSupported = isMeta;
          return (
            <Card key={plat.id}>
              <CardContent className="p-6">
                <div className="flex items-center justify-between flex-wrap gap-3 mb-2">
                  <div className="flex items-center gap-3 min-w-0">
                    <div
                      className="w-12 h-12 rounded-xl flex items-center justify-center text-2xl shrink-0"
                      style={{ backgroundColor: `${plat.color}25` }}
                    >
                      {plat.icon}
                    </div>
                    <div className="min-w-0">
                      <h3 className="text-base font-semibold flex items-center gap-2 flex-wrap">
                        {plat.label}
                        {configured ? (
                          <Badge variant="success" className="text-[10px]">
                            Keys configured
                          </Badge>
                        ) : (
                          <Badge variant="warning" className="text-[10px]">
                            Keys missing
                          </Badge>
                        )}
                        {!oauthSupported && (
                          <Badge variant="outline" className="text-[10px]">
                            OAuth stubbed
                          </Badge>
                        )}
                      </h3>
                      <p className="text-xs text-muted-foreground mt-0.5">{plat.setupNote}</p>
                    </div>
                  </div>
                  <div className="flex items-center gap-2 shrink-0">
                    {oauthSupported ? (
                      <Button asChild variant={configured ? "brand" : "outline"} size="sm">
                        <a href={PLATFORM_AUTH_HREF[plat.id]}>
                          + Connect {plat.label}
                        </a>
                      </Button>
                    ) : (
                      <Button variant="outline" size="sm" onClick={() => handleStubClick(plat.id)}>
                        Coming soon
                      </Button>
                    )}
                  </div>
                </div>

                {platAccounts.length === 0 ? (
                  <p className="text-xs text-muted-foreground mt-3 ml-15">
                    No {plat.label} accounts connected yet.{" "}
                    {!configured && (
                      <>
                        Set <code className="text-[11px]">{plat.envVars.join(" + ")}</code> in{" "}
                        <code className="text-[11px]">.env.local</code> to enable.
                      </>
                    )}
                  </p>
                ) : (
                  <div className="mt-3 space-y-2">
                    {platAccounts.map((a) => {
                      const org = a.entitySlug
                        ? ALL_ORGANIZATIONS.find((o) => o.slug === a.entitySlug)
                        : undefined;
                      return (
                        <div
                          key={a.id}
                          className="flex items-start gap-3 flex-wrap rounded-md border bg-background p-3"
                        >
                          {a.pictureUrl ? (
                            // eslint-disable-next-line @next/next/no-img-element
                            <img
                              src={a.pictureUrl}
                              alt={a.handle}
                              className="w-10 h-10 rounded-full shrink-0"
                              referrerPolicy="no-referrer"
                            />
                          ) : (
                            <div
                              className="w-10 h-10 rounded-full flex items-center justify-center text-lg shrink-0"
                              style={{ backgroundColor: `${plat.color}25` }}
                            >
                              {plat.icon}
                            </div>
                          )}
                          <div className="flex-1 min-w-0">
                            <div className="text-sm font-medium truncate">{a.handle}</div>
                            <div className="text-xs text-muted-foreground truncate">
                              {a.displayName ?? a.remoteId}
                            </div>
                            <div className="mt-1 flex items-center gap-2 flex-wrap">
                              <Badge variant="success" className="text-[10px]">Connected</Badge>
                              <span className="text-[10px] text-muted-foreground">
                                Since {new Date(a.connectedAt).toLocaleDateString()}
                              </span>
                              {org && (
                                <Badge variant="info" className="text-[10px]">
                                  {org.emoji} {org.name}
                                </Badge>
                              )}
                            </div>
                          </div>
                          <div className="flex items-center gap-2 shrink-0">
                            <select
                              value={a.entitySlug ?? ""}
                              onChange={(e) => setEntity(a, e.target.value)}
                              className="h-9 rounded-md border border-input bg-background px-2 text-xs"
                            >
                              <option value="">— Unassigned —</option>
                              {ALL_ORGANIZATIONS.map((o) => (
                                <option key={o.slug} value={o.slug}>
                                  {o.emoji} {o.name}
                                </option>
                              ))}
                            </select>
                            <Button variant="ghost" size="sm" onClick={() => disconnect(a)}>
                              Disconnect
                            </Button>
                          </div>
                        </div>
                      );
                    })}
                  </div>
                )}
              </CardContent>
            </Card>
          );
        })}

      <Card>
        <CardContent className="p-6">
          <div className="flex items-center justify-between flex-wrap gap-3 mb-2">
            <div className="flex items-center gap-3 min-w-0">
              <div className="w-12 h-12 rounded-xl bg-cyan-100 dark:bg-cyan-900/30 flex items-center justify-center text-2xl shrink-0">
                📐
              </div>
              <div>
                <h3 className="text-base font-semibold flex items-center gap-2 flex-wrap">
                  Canva
                  {canvaConfigured ? (
                    <Badge variant="success" className="text-[10px]">
                      Keys configured
                    </Badge>
                  ) : (
                    <Badge variant="warning" className="text-[10px]">
                      Keys missing
                    </Badge>
                  )}
                </h3>
                <p className="text-xs text-muted-foreground mt-0.5">
                  Connect Canva to pull designs into the composer + export PNG/JPG/PDF on demand.
                </p>
              </div>
            </div>
            <Button asChild variant={canvaConfigured ? "brand" : "outline"} size="sm">
              <a href="/api/canva/auth?returnTo=%2Fapp%2Fsocial%2Faccounts">+ Connect Canva</a>
            </Button>
          </div>

          {canvaAccounts.length === 0 ? (
            <p className="text-xs text-muted-foreground mt-3">
              No Canva account connected yet.{" "}
              {!canvaConfigured && (
                <>
                  Set <code className="text-[11px]">CANVA_CLIENT_ID</code> +{" "}
                  <code className="text-[11px]">CANVA_CLIENT_SECRET</code> in{" "}
                  <code className="text-[11px]">.env.local</code> — see{" "}
                  <code className="text-[11px]">CANVA_SETUP.md</code>.
                </>
              )}
            </p>
          ) : (
            <div className="mt-3 space-y-2">
              {canvaAccounts.map((a) => {
                const org = a.entitySlug
                  ? ALL_ORGANIZATIONS.find((o) => o.slug === a.entitySlug)
                  : undefined;
                return (
                  <div
                    key={a.id}
                    className="flex items-center gap-3 flex-wrap rounded-md border bg-background p-3"
                  >
                    <div className="flex-1 min-w-0">
                      <div className="text-sm font-medium truncate">
                        {a.displayName ?? a.email ?? a.id}
                      </div>
                      <div className="text-xs text-muted-foreground truncate">
                        {a.email ?? a.id}
                      </div>
                      <div className="mt-1 flex items-center gap-2 flex-wrap">
                        <Badge variant="success" className="text-[10px]">Connected</Badge>
                        <span className="text-[10px] text-muted-foreground">
                          Since {new Date(a.connectedAt).toLocaleDateString()}
                        </span>
                        {org && (
                          <Badge variant="info" className="text-[10px]">
                            {org.emoji} {org.name}
                          </Badge>
                        )}
                      </div>
                    </div>
                    <select
                      value={a.entitySlug ?? ""}
                      onChange={(e) => setCanvaEntity(a, e.target.value)}
                      className="h-9 rounded-md border border-input bg-background px-2 text-xs"
                    >
                      <option value="">— Unassigned —</option>
                      {ALL_ORGANIZATIONS.map((o) => (
                        <option key={o.slug} value={o.slug}>
                          {o.emoji} {o.name}
                        </option>
                      ))}
                    </select>
                    <Button variant="ghost" size="sm" onClick={() => disconnectCanva(a)}>
                      Disconnect
                    </Button>
                  </div>
                );
              })}
            </div>
          )}
        </CardContent>
      </Card>

      <Card className="border-dashed">
        <CardContent className="p-5 text-xs text-muted-foreground">
          Setup walkthroughs: <code className="text-[11px]">SOCIAL_SETUP.md</code> for the eight
          social platforms, <code className="text-[11px]">CANVA_SETUP.md</code> for Canva
          Connect.
        </CardContent>
      </Card>
    </div>
    <AlertConfirmPortal />
    </>
  );
}