"use client";

import Image from "next/image";
import { useState } from "react";
import { LinkIcon } from "lucide-react";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { authClient } from "@/lib/auth/client";

export function GoogleAccountSettings({
  googleAccountIds: initialGoogleAccountIds,
  hasOtherAuthMethod,
  linkError,
}: {
  googleAccountIds: string[];
  hasOtherAuthMethod: boolean;
  linkError: boolean;
}) {
  const [googleAccountIds, setGoogleAccountIds] = useState(initialGoogleAccountIds);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");
  const linked = googleAccountIds.length > 0;
  const canUnlink = hasOtherAuthMethod || googleAccountIds.length > 1;

  async function linkGoogle() {
    if (busy) return;
    setBusy(true);
    setError("");
    try {
      const result = await authClient.linkSocial({
        provider: "google",
        requestSignUp: false,
        callbackURL: "/profile",
        errorCallbackURL: "/profile?googleLinkError=1",
      });
      if (result.error) throw new Error(result.error.message ?? "เชื่อมบัญชี Google ไม่สำเร็จ");
    } catch (cause) {
      setError(cause instanceof Error ? cause.message : "เชื่อมบัญชี Google ไม่สำเร็จ กรุณาลองอีกครั้ง");
    } finally {
      setBusy(false);
    }
  }

  async function unlinkGoogle() {
    const accountId = googleAccountIds[0];
    if (busy || !accountId || !canUnlink) return;
    setBusy(true);
    setError("");
    try {
      const result = await authClient.unlinkAccount({ accountId });
      if (result.error) throw new Error(result.error.message ?? "ยกเลิกการเชื่อมต่อ Google ไม่สำเร็จ");
      setGoogleAccountIds((current) => current.filter((id) => id !== accountId));
    } catch (cause) {
      setError(cause instanceof Error ? cause.message : "ยกเลิกการเชื่อมต่อ Google ไม่สำเร็จ กรุณาลองอีกครั้ง");
    } finally {
      setBusy(false);
    }
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <LinkIcon aria-hidden="true" className="size-4 shrink-0" />
          บัญชีที่เชื่อมต่อ
        </CardTitle>
        <CardDescription>เชื่อมต่อบัญชี Google เพื่อเข้าสู่ระบบได้ง่ายขึ้น</CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col gap-3">
        <div className="flex items-center gap-4 rounded-lg border p-4">
          <div className="grid size-12 shrink-0 place-items-center rounded-lg bg-muted">
            <Image src="/icon/google.svg" alt="" width={24} height={24} />
          </div>
          <div className="min-w-0 flex-1">
            <p className="font-medium">Google</p>
            <p role="status" className="text-sm text-muted-foreground">
              {linked ? "เชื่อมต่อแล้ว" : "ยังไม่ได้เชื่อมต่อ"}
            </p>
          </div>
          {linked ? <Button type="button" variant="outline" size="sm"
            disabled={busy || !canUnlink} onClick={() => void unlinkGoogle()}>
            {busy ? "กำลังดำเนินการ…" : "ยกเลิกการเชื่อมต่อ"}
          </Button> : <Button type="button" size="sm" disabled={busy}
            onClick={() => void linkGoogle()}>
            {busy ? "กำลังดำเนินการ…" : "เชื่อมต่อ"}
          </Button>}
        </div>
        {linked && !canUnlink && <p className="text-sm text-muted-foreground">
          Google เป็นวิธีเข้าสู่ระบบเดียวของบัญชีนี้ เพิ่มวิธีเข้าสู่ระบบอื่นก่อนยกเลิกการเชื่อมต่อ
        </p>}
        {(linkError || error) && <Alert variant="destructive" role="alert">
          <AlertDescription>{error || "เชื่อมบัญชี Google ไม่สำเร็จ กรุณาลองอีกครั้ง"}</AlertDescription>
        </Alert>}
      </CardContent>
    </Card>
  );
}