"use client";

import { useEffect, useState } from "react";
import { CheckCircle2, Loader2, Puzzle, RefreshCw } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

type SyncResult = { success?: boolean; valid?: boolean; message?: string; username?: string };

export function ExtensionSyncCard() {
  const [ready, setReady] = useState(false);
  const [syncing, setSyncing] = useState(false);
  const [result, setResult] = useState<SyncResult | null>(null);

  useEffect(() => {
    const onMessage = (event: MessageEvent) => {
      if (event.source !== window) return;
      if (event.data?.type === "HAIXUN_EXTENSION_READY") setReady(true);
      if (event.data?.type === "HAIXUN_THREADS_SYNC_RESULT") {
        setSyncing(false);
        setResult(event.data);
      }
    };
    window.addEventListener("message", onMessage);
    window.postMessage({ type: "HAIXUN_PING_EXTENSION" }, "*");
    return () => window.removeEventListener("message", onMessage);
  }, []);

  function sync() {
    setSyncing(true);
    setResult(null);
    window.postMessage({ type: "HAIXUN_REQUEST_THREADS_SYNC", serverUrl: window.location.origin }, "*");
    window.setTimeout(() => setSyncing(false), 15000);
  }

  return (
    <Card id="extension" className="overflow-hidden border-primary/20">
      <CardHeader>
        <div className="flex items-start justify-between gap-4">
          <div>
            <CardTitle className="flex items-center gap-2 text-base"><Puzzle className="h-4 w-4 text-primary" />Threads Extension</CardTitle>
            <CardDescription>所有 Threads 抓取統一使用 Chrome Extension，不需要官方 API。</CardDescription>
          </div>
          <span className={`rounded-full px-2.5 py-1 text-xs font-medium ${ready ? "bg-success-bg text-success" : "bg-muted text-muted-foreground"}`}>
            {ready ? "已偵測" : "未偵測"}
          </span>
        </div>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="grid gap-3 text-sm sm:grid-cols-3">
          <p className="rounded-xl bg-muted/70 p-3"><b className="block text-foreground">1. 登入 Threads</b><span className="text-muted-foreground">在同一個 Chrome 視窗登入</span></p>
          <p className="rounded-xl bg-muted/70 p-3"><b className="block text-foreground">2. 同步 Session</b><span className="text-muted-foreground">不會儲存你的密碼</span></p>
          <p className="rounded-xl bg-muted/70 p-3"><b className="block text-foreground">3. 開始海巡</b><span className="text-muted-foreground">海巡與找 TA 共用</span></p>
        </div>
        {result && <p className={`rounded-xl border p-3 text-sm ${result.success ? "border-success-border bg-success-bg text-success" : "border-danger-border bg-danger-bg text-destructive"}`}>{result.success && <CheckCircle2 className="mr-2 inline h-4 w-4" />}{result.username ? `@${result.username} · ` : ""}{result.message ?? (result.success ? "同步成功" : "同步失敗")}</p>}
        <Button onClick={sync} disabled={!ready || syncing}>{syncing ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}{syncing ? "同步中…" : "同步 Threads Session"}</Button>
        {!ready && <p className="text-xs text-muted-foreground">請先載入 <code className="rounded bg-muted px-1">extension/haixun-threads-sync</code>，並在擴充功能選項填入這個網站網址。</p>}
      </CardContent>
    </Card>
  );
}