"use client";

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

export function SudlohProfile({ name, email, image, accountUrl, callbackError }: {
  name: string; email: string; image: string | null; accountUrl: string; callbackError: boolean;
}) {
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");

  async function refresh() {
    setBusy(true);
    setError("");
    try {
      const response = await fetch("/api/profile/sync", { method: "POST" });
      if (response.status === 401) {
        const result = await authClient.signIn.social({ provider: "sudloh", callbackURL: "/profile",
          errorCallbackURL: "/profile?sudloh=error" });
        if (result.error) throw new Error("เข้าสู่ระบบ Sudloh ไม่สำเร็จ กรุณาลองอีกครั้ง");
        return;
      }
      if (response.status === 409) throw new Error("อีเมลนี้ถูกใช้โดยบัญชี Buzz Guide อื่น กรุณาติดต่อผู้ดูแล");
      if (!response.ok) throw new Error("อัปเดตข้อมูลจาก Sudloh ไม่สำเร็จ กรุณาเข้าสู่ระบบใหม่แล้วลองอีกครั้ง");
      window.location.reload();
    } catch (cause) {
      setError(cause instanceof Error ? cause.message : "อัปเดตข้อมูลจาก Sudloh ไม่สำเร็จ");
      setBusy(false);
    }
  }

  return <Card>
    <CardHeader><CardTitle>ข้อมูลบัญชี</CardTitle>
      <CardDescription>จัดการชื่อ รูปโปรไฟล์ และอีเมลที่ Sudloh Account</CardDescription>
    </CardHeader>
    <CardContent className="flex items-center gap-4">
      <Avatar size="lg" className="size-16">
        {image && <AvatarImage src={image} alt="รูปโปรไฟล์" />}
        <AvatarFallback>{name.trim().charAt(0).toUpperCase() || "?"}</AvatarFallback>
      </Avatar>
      <div className="min-w-0"><p className="font-medium">{name}</p>
        <p className="truncate text-sm text-muted-foreground">{email}</p>
      </div>
    </CardContent>
    <CardFooter className="flex-wrap gap-2">
      <Button render={<a href={accountUrl} />}>จัดการบัญชีที่ Sudloh</Button>
      <Button type="button" variant="outline" disabled={busy} onClick={() => void refresh()}>
        {busy ? "กำลังอัปเดต..." : "อัปเดตข้อมูลจาก Sudloh"}
      </Button>
      {(error || callbackError) && <Alert variant="destructive"><AlertDescription>
        {error || "เข้าสู่ระบบ Sudloh ไม่สำเร็จ กรุณาลองอีกครั้ง"}
      </AlertDescription></Alert>}
    </CardFooter>
  </Card>;
}