"use client";

import { useState } from "react";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { authClient } from "@/lib/auth/client";

export function SudlohConnection({ linked, callbackError }: {
  linked: boolean;
  callbackError?: string;
}) {
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");

  async function connect() {
    if (busy) return;
    setBusy(true);
    setError("");
    try {
      const result = await authClient.linkSocial({
        provider: "sudloh",
        callbackURL: "/profile?sudloh=linked",
        errorCallbackURL: "/profile?sudloh=error",
      });
      if (result.error) throw new Error();
    } catch {
      setError("เชื่อมต่อ Sudloh ไม่สำเร็จ กรุณาลองอีกครั้ง");
      setBusy(false);
    }
  }

  const callbackMessage = callbackError === "email_does_not_match"
    ? "อีเมล Sudloh ต้องตรงกับอีเมล Buzz Guide ก่อนเชื่อมต่อบัญชี"
    : callbackError === "account_already_linked_to_different_user"
      ? "บัญชี Sudloh นี้เชื่อมต่อกับบัญชี Buzz Guide อื่นแล้ว"
      : callbackError ? "เชื่อมต่อ Sudloh ไม่สำเร็จ กรุณาลองอีกครั้ง" : "";

  return <Card>
    <CardHeader><CardTitle>Sudloh Account</CardTitle></CardHeader>
    <CardContent className="flex flex-col gap-4">
      <p className="text-sm text-muted-foreground">
        {linked ? "เชื่อมต่อแล้ว คุณสามารถใช้ Sudloh เพื่อเข้าสู่ระบบ Buzz Guide"
          : "เชื่อมต่อบัญชี Sudloh เพื่อใช้เข้าสู่ระบบ Buzz Guide ในครั้งถัดไป"}
      </p>
      {!linked && <Button type="button" variant="outline" disabled={busy} onClick={() => void connect()}>
        {busy ? "กำลังเชื่อมต่อ..." : "เชื่อมต่อ Sudloh"}
      </Button>}
      {(callbackMessage || error) && <Alert variant="destructive"><AlertDescription>
        {callbackMessage || error}
      </AlertDescription></Alert>}
    </CardContent>
  </Card>;
}