import { useState } from "react";
import { useRouter } from "@tanstack/react-router";
import { toast } from "sonner";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { addListenKeyword, connectSocialAccount, disconnectSocialAccount } from "@/lib/server/api-social";
import type { SocialProviderId } from "@/lib/social-oauth";

type Desk = Awaited<ReturnType<typeof import("@/lib/server/api-social").getSocialDesk>>;

export function SocialConnections({ connections }: { connections: Desk["connections"] }) {
  const router = useRouter();
  const [busy, setBusy] = useState<string | null>(null);

  async function connect(id: SocialProviderId, configured: boolean) {
    setBusy(id);
    try {
      if (configured) {
        window.location.assign(`/api/social/oauth/${id}`);
        return;
      }
      const res = await connectSocialAccount({ data: { provider: id } });
      if (!res.ok) {
        toast.error(res.error);
        return;
      }
      toast.success("Connected in preview. Add the network’s OAuth keys for live posting.");
      await router.invalidate();
    } finally {
      setBusy(null);
    }
  }

  async function disconnect(id: SocialProviderId) {
    setBusy(id);
    try {
      await disconnectSocialAccount({ data: { provider: id } });
      toast.success("Disconnected");
      await router.invalidate();
    } finally {
      setBusy(null);
    }
  }

  return (
    <div className="mb-8 grid gap-3 sm:grid-cols-3">
      {connections.map((c) => (
        <Card key={c.id}>
          <CardContent className="p-4">
            <div className="flex items-center justify-between gap-2">
              <p className="font-display text-xl">{c.label}</p>
              <Badge variant={c.status === "connected" ? "success" : "muted"}>{c.status}</Badge>
            </div>
            <p className="mt-1 text-sm text-muted-foreground">{c.handle || "No handle yet"}</p>
            <p className="mt-2 text-xs text-muted-foreground">
              {c.configured ? "OAuth2 keys on file. Connect opens the network." : "Preview connect until OAuth2 keys are set."}
            </p>
            <div className="mt-3">
              {c.status === "connected" ? (
                <Button size="sm" variant="outline" disabled={busy === c.id} onClick={() => void disconnect(c.id)}>
                  Disconnect
                </Button>
              ) : (
                <Button size="sm" disabled={busy === c.id} onClick={() => void connect(c.id, c.configured)}>
                  Connect with OAuth2
                </Button>
              )}
            </div>
          </CardContent>
        </Card>
      ))}
    </div>
  );
}

export function SocialListening({
  keywords,
  mentions,
}: {
  keywords: string[];
  mentions: Desk["mentions"];
}) {
  const router = useRouter();
  const [kw, setKw] = useState("");

  async function add(e: React.FormEvent) {
    e.preventDefault();
    const res = await addListenKeyword({ data: { keyword: kw } });
    if (!res.ok) {
      toast.error(res.error);
      return;
    }
    setKw("");
    toast.success("Listening for that phrase");
    await router.invalidate();
  }

  return (
    <div className="mb-8 grid gap-4 lg:grid-cols-5">
      <Card className="lg:col-span-2">
        <CardContent className="p-5">
          <p className="text-[11px] font-medium tracking-[0.16em] text-muted-foreground uppercase">Keywords</p>
          <form className="mt-3 flex gap-2" onSubmit={(e) => void add(e)}>
            <Input value={kw} onChange={(e) => setKw(e.target.value)} placeholder="Add a listen phrase" />
            <Button type="submit">Add</Button>
          </form>
          <ul className="mt-4 flex flex-wrap gap-2">
            {keywords.map((k) => (
              <li key={k}>
                <Badge variant="outline">{k}</Badge>
              </li>
            ))}
          </ul>
        </CardContent>
      </Card>
      <Card className="lg:col-span-3">
        <CardContent className="p-5">
          <p className="text-[11px] font-medium tracking-[0.16em] text-muted-foreground uppercase">Mentions</p>
          <ul className="mt-3 space-y-3">
            {mentions.map((m) => (
              <li key={m.id} className="border-b border-border/70 pb-3 last:border-0 last:pb-0">
                <div className="flex flex-wrap items-center gap-2 text-xs">
                  <Badge variant="outline">{m.platform}</Badge>
                  <span className="font-medium">{m.author}</span>
                  <Badge variant={m.sentiment === "positive" ? "success" : m.sentiment === "watch" ? "warning" : "muted"}>
                    {m.sentiment}
                  </Badge>
                  <span className="text-muted-foreground">{m.keyword}</span>
                </div>
                <p className="mt-1 text-sm">{m.body}</p>
              </li>
            ))}
          </ul>
        </CardContent>
      </Card>
    </div>
  );
}