"use client";

import { useCallback, useEffect, useRef, useState } from "react";
import { flushSync } from "react-dom";
import {
  Loader2,
  ScanText,
  MessageCircle,
  Plus,
  Send,
  Sparkles,
  UserRound,
  WandSparkles,
  X,
} from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { EmptyState } from "@/components/layout/empty-state";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { PageHeader } from "@/components/layout/page-header";
import { useJobs } from "@/components/layout/jobs-provider";
import { JobProgressPanel } from "@/components/job-progress-panel";
import { InlineAlert } from "@/components/ui/inline-alert";
import { Textarea } from "@/components/ui/textarea";
import { useActionFeedback } from "@/lib/use-action-feedback";
import { parseFetchJson } from "@/lib/utils";
import {
  createEmptyStyle8DProfile,
  parseStyle8DProfile,
  STYLE_8D_KEYS,
  STYLE_8D_LABELS,
  type StoredStyle8DProfile,
  type Style8DKey,
} from "@/lib/types/style-profile";

interface Account {
  id: string;
  username?: string | null;
  displayName?: string | null;
  persona?: string | null;
  styleProfile?: string | null;
  styleBenchmark?: string | null;
  brief?: string | null;
  productBrief?: string | null;
  targetAudience?: string | null;
  goals?: string | null;
}

interface AssistantMessage {
  role: "user" | "assistant";
  content: string;
}

type Style8DResult = StoredStyle8DProfile;

export default function AccountsPage() {
  const [account, setAccount] = useState<Account | null>(null);
  const [draft, setDraft] = useState<Account | null>(null);
  const [loading, setLoading] = useState(true);
  const [busy, setBusy] = useState<string | null>(null);
  const [newName, setNewName] = useState("");
  const [assistantOpen, setAssistantOpen] = useState(true);
  const [assistantInput, setAssistantInput] = useState("");
  const [assistantBusy, setAssistantBusy] = useState(false);
  const [benchmarkUsername, setBenchmarkUsername] = useState("");
  const [styleResult, setStyleResult] = useState<Style8DResult | null>(null);
  const assistantInputRef = useRef<HTMLInputElement>(null);
  const { activeJobs } = useJobs();
  const { feedback, clearFeedback, showError, showSuccess } = useActionFeedback();
  const [assistantMessages, setAssistantMessages] = useState<AssistantMessage[]>([
    {
      role: "assistant",
      content: "跟我說你想經營的方向，我會把這頁策略欄位先幫你補好。",
    },
  ]);
  const styleJob = activeJobs.find(
    (job) => job.type === "style-8d" && (!draft?.id || job.accountId === draft.id)
  );
  const visibleStyle =
    styleResult ?? createEmptyStyle8DProfile(benchmarkUsername.replace(/^@/, "").trim());

  const load = useCallback(async () => {
    setLoading(true);
    const res = await fetch("/api/accounts");
    const data = await parseFetchJson<{ accounts?: Account[]; activeAccountId?: string }>(res);
    const rows = (data.accounts ?? []) as Account[];
    const active = rows.find((row) => row.id === data.activeAccountId) ?? rows[0] ?? null;
    setAccount(active);
    setDraft(active);
    setStyleResult(parseStyle8DProfile(active?.styleProfile));
    setBenchmarkUsername(active?.styleBenchmark ?? "");
    setLoading(false);
  }, []);

  useEffect(() => {
    load();
  }, [load]);

  useEffect(() => {
    function onJobCompleted(event: Event) {
      const { job } = (event as CustomEvent).detail as {
        job: { type: string; accountId?: string | null; status: string };
      };
      if (job.type === "style-8d" && job.accountId === account?.id && job.status === "completed") {
        void load();
      }
    }
    window.addEventListener("job-completed", onJobCompleted);
    return () => window.removeEventListener("job-completed", onJobCompleted);
  }, [account?.id, load]);

  async function createAccount() {
    if (!newName.trim()) return;
    clearFeedback();
    setBusy("create");
    const res = await fetch("/api/accounts", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ displayName: newName.trim() }),
    });
    let data: { error?: string } = {};
    try {
      data = await parseFetchJson(res);
    } catch (err) {
      setBusy(null);
      showError(err instanceof Error ? err.message : "伺服器回應異常", "建立失敗");
      return;
    }
    setBusy(null);
    if (!res.ok) {
      showError(data.error ?? "無法建立帳號", "建立失敗");
      return;
    }
    setNewName("");
    showSuccess("帳號策略已建立");
    load();
  }

  async function save() {
    if (!draft) return;
    clearFeedback();
    setBusy("save");
    const res = await fetch(`/api/accounts/${draft.id}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        displayName: draft.displayName,
        username: draft.username,
        persona: draft.persona,
        styleProfile: draft.styleProfile,
        styleBenchmark: draft.styleBenchmark,
        brief: draft.brief,
        productBrief: draft.productBrief,
        targetAudience: draft.targetAudience,
        goals: draft.goals,
      }),
    });
    let data: { error?: string } = {};
    try {
      data = await parseFetchJson(res);
    } catch (err) {
      setBusy(null);
      showError(err instanceof Error ? err.message : "伺服器回應異常", "儲存失敗");
      return;
    }
    setBusy(null);
    if (!res.ok) {
      showError(data.error ?? "無法儲存策略", "儲存失敗");
      return;
    }
    showSuccess("帳號策略已儲存");
    load();
  }

  function updateDraft(patch: Partial<Account>) {
    setDraft((prev) => (prev ? { ...prev, ...patch } : prev));
  }

  async function analyzeBenchmark() {
    if (!draft || !benchmarkUsername.trim()) return;
    clearFeedback();
    setBusy("8d");
    try {
      const res = await fetch(`/api/accounts/${draft.id}/style-analysis`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ benchmarkUsername }),
      });
      const data = await parseFetchJson<{ error?: string; jobId?: string; message?: string }>(res);
      if (!res.ok) {
        showError(data.error ?? "無法完成 8D 分析", "8D 分析失敗");
        return;
      }
      showSuccess(data.message ?? "8D 分析已在背景執行，可自由切換頁面");
      window.dispatchEvent(new Event("haixun:jobs-updated"));
    } catch (error) {
      showError(error instanceof Error ? error.message : "8D 分析失敗", "8D 分析失敗");
    } finally {
      setBusy(null);
    }
  }

  function updateStyleDimension(key: Style8DKey, summary: string) {
    const base = styleResult ?? createEmptyStyle8DProfile(benchmarkUsername.replace(/^@/, "").trim());
    const next: Style8DResult = {
      ...base,
      analysis: {
        ...base.analysis,
        [key]: { ...base.analysis[key], summary },
      },
    };
    setStyleResult(next);
    updateDraft({ styleProfile: JSON.stringify(next) });
  }

  const clearAssistantInput = useCallback(() => {
    setAssistantInput("");
    if (assistantInputRef.current) {
      assistantInputRef.current.value = "";
    }
  }, []);

  async function askAssistant(preset?: string) {
    if (!draft) return;
    const instruction = (preset ?? assistantInput).trim();
    if (!instruction || assistantBusy) return;

    flushSync(() => {
      if (!preset) clearAssistantInput();
      setAssistantMessages((prev) => [...prev, { role: "user", content: instruction }]);
    });
    setAssistantBusy(true);

    const res = await fetch("/api/accounts/strategy-assistant", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        instruction,
        current: {
          displayName: draft.displayName,
          username: draft.username,
          brief: draft.brief,
          persona: draft.persona,
          targetAudience: draft.targetAudience,
          productBrief: draft.productBrief,
          goals: draft.goals,
          style8D: Object.fromEntries(
            STYLE_8D_KEYS.map((key) => [key, visibleStyle.analysis[key]?.summary ?? null])
          ),
        },
      }),
    });
    let data: {
      error?: string;
      fields?: Partial<Account> & { style8D?: Partial<Record<Style8DKey, string | null>> };
      message?: string;
    } = {};
    try {
      data = await parseFetchJson(res);
    } catch (err) {
      setAssistantBusy(false);
      const message = err instanceof Error ? err.message : "伺服器回應異常";
      setAssistantMessages((prev) => [...prev, { role: "assistant", content: message }]);
      return;
    }
    setAssistantBusy(false);

    if (!res.ok) {
      const message = data.error ?? "小幫手暫時無法產生內容";
      setAssistantMessages((prev) => [...prev, { role: "assistant", content: message }]);
      return;
    }

    const fields = data.fields ?? {};
    const { style8D, ...accountFields } = fields;
    let nextStyleResult = styleResult;
    if (style8D && Object.values(style8D).some((value) => value?.trim())) {
      const base = styleResult ?? createEmptyStyle8DProfile(benchmarkUsername.replace(/^@/, "").trim());
      nextStyleResult = {
        ...base,
        analysis: { ...base.analysis },
      };
      for (const key of STYLE_8D_KEYS) {
        const summary = style8D[key]?.trim();
        if (summary) {
          nextStyleResult.analysis[key] = { ...base.analysis[key], summary };
        }
      }
      setStyleResult(nextStyleResult);
    }
    setDraft((prev) =>
      prev
        ? {
            ...prev,
            ...Object.fromEntries(
              Object.entries(accountFields).filter(([, value]) => value !== null && value !== undefined)
            ),
            ...(nextStyleResult ? { styleProfile: JSON.stringify(nextStyleResult) } : {}),
          }
        : prev
    );
    setAssistantMessages((prev) => [
      ...prev,
      {
        role: "assistant",
        content: data.message ?? "我已經依照你的方向補上這頁欄位，你可以再微調後儲存。",
      },
    ]);
  }

  return (
    <div>
      <PageHeader
        title="帳號策略"
        description="人設與受眾定位"
        action={
          draft && (
            <Button onClick={save} disabled={busy === "save"}>
              {busy === "save" && <Loader2 className="h-4 w-4 animate-spin" />}
              儲存策略
            </Button>
          )
        }
      />

      {feedback && (
        <InlineAlert
          type={feedback.type}
          title={feedback.title}
          message={feedback.message}
          onDismiss={clearFeedback}
          className="mb-4"
        />
      )}

      {loading ? (
        <div className="space-y-4">
          <div className="skeleton h-72 animate-pulse" />
          <div className="skeleton h-48 animate-pulse" />
        </div>
      ) : !draft ? (
        <EmptyState
          icon={UserRound}
          title="先建立一個經營帳號"
          description="側欄新增帳號後設定策略"
          action={
            <div className="flex w-full max-w-md flex-col gap-2 sm:flex-row">
              <Input
                value={newName}
                onChange={(e) => setNewName(e.target.value)}
                placeholder="例如：個人品牌、產品號"
              />
              <Button onClick={createAccount} disabled={busy === "create"}>
                <Plus className="h-4 w-4" />
                建立
              </Button>
            </div>
          }
        />
      ) : (
        <div className="space-y-5">
          <Card>
            <CardHeader>
              <div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
                <div>
                  <CardTitle>{account?.displayName ?? account?.username ?? "未命名帳號"}</CardTitle>

                </div>
                <Badge variant="success">目前帳號</Badge>
              </div>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid gap-4 sm:grid-cols-2">
                <div className="space-y-2">
                  <Label>品牌 / 帳號名稱</Label>
                  <Input
                    value={draft.displayName ?? ""}
                    onChange={(e) => updateDraft({ displayName: e.target.value })}
                    placeholder="給自己看的名稱"
                  />
                </div>
                <div className="space-y-2">
                  <Label>公開帳號名稱（選填）</Label>
                  <Input
                    value={draft.username ?? ""}
                    onChange={(e) => updateDraft({ username: e.target.value })}
                    placeholder="@username"
                  />
                </div>
              </div>

              <div className="space-y-2">
                <Label>一句話定位</Label>
                <Textarea
                  rows={3}
                  value={draft.brief ?? ""}
                  onChange={(e) => updateDraft({ brief: e.target.value })}
                  placeholder="這個帳號幫誰，用什麼觀點，解決什麼問題"
                />
              </div>

              <div className="space-y-2">
                <Label>人設與語氣</Label>
                <Textarea
                  rows={5}
                  value={draft.persona ?? ""}
                  onChange={(e) => updateDraft({ persona: e.target.value })}
                  placeholder="像誰、怎麼說話、常用語氣、哪些話不要說"
                />
              </div>
            </CardContent>
          </Card>

          <Card id="style-8d" className="scroll-mt-6">
            <CardHeader>
              <CardTitle className="flex items-center gap-2"><ScanText className="h-4 w-4 text-primary" />對標帳號 8D 分析</CardTitle>
              <CardDescription>分析後會直接存成這個帳號的風格策略；之後產貼文、優化與回覆都會自動套用。</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex flex-col gap-2 sm:flex-row">
                <Input value={benchmarkUsername} onChange={(event) => setBenchmarkUsername(event.target.value)} placeholder="@對標帳號" />
                <Button onClick={analyzeBenchmark} disabled={busy === "8d" || !!styleJob || !benchmarkUsername.trim()} className="sm:shrink-0">
                  {busy === "8d" || styleJob ? <Loader2 className="h-4 w-4 animate-spin" /> : <ScanText className="h-4 w-4" />}
                  {styleJob ? "8D 任務進行中" : busy === "8d" ? "建立任務中…" : "開始 8D 分析"}
                </Button>
              </div>
              {styleJob && (
                <div className="rounded-xl border border-primary/20 bg-primary/[0.035] p-3">
                  <p className="mb-2 text-xs font-medium">可自由切換頁面，任務不會中斷</p>
                  <JobProgressPanel
                    summary={styleJob.progress}
                    progressDetailRaw={styleJob.progressDetail}
                    jobType="style-8d"
                  />
                </div>
              )}
              {!styleResult && !styleJob && (
                <InlineAlert
                  type="info"
                  title="尚未建立 8D 風格策略"
                  message="八個欄位已列在下方。你可以先手動填寫，或輸入對標帳號交給 AI 分析。"
                />
              )}
              {styleResult && (
                <div className="space-y-4">
                  <div className="grid gap-3 sm:grid-cols-4">
                    <div className="rounded-xl bg-muted/70 p-3"><p className="text-xs text-muted-foreground">近期樣本</p><p className="mt-1 text-lg font-semibold">{styleResult.postCount} 篇</p></div>
                    <div className="rounded-xl bg-muted/70 p-3"><p className="text-xs text-muted-foreground">互動中位數</p><p className="mt-1 text-lg font-semibold">{styleResult.engagement.medianInteractions}</p></div>
                    <div className="rounded-xl bg-muted/70 p-3"><p className="text-xs text-muted-foreground">平均互動</p><p className="mt-1 text-lg font-semibold">{styleResult.engagement.averageInteractions}</p></div>
                    <div className="rounded-xl bg-muted/70 p-3"><p className="text-xs text-muted-foreground">達 {styleResult.engagement.threshold} 互動</p><p className="mt-1 text-lg font-semibold">{styleResult.engagement.postsAboveThreshold} 篇</p></div>
                  </div>
                  <InlineAlert
                    type={styleResult.engagement.verdict === "strong" ? "success" : "warning"}
                    title={styleResult.engagement.verdict === "strong" ? "近期互動穩定，適合當對標" : styleResult.engagement.verdict === "unknown" ? "公開互動資料不足" : "可參考風格，但互動門檻不高"}
                    message="判斷採用近期貼文的讚 + 回覆×2；公開頁沒有可靠瀏覽數時不會捏造。"
                  />
                  <div className="flex flex-wrap items-center gap-2">
                    <Badge variant="success">已套用到帳號生成流程</Badge>
                    <span className="text-xs text-muted-foreground">對標 @{styleResult.username} · 每個欄位都可再調整</span>
                  </div>
                </div>
              )}
              <div className="grid gap-3 sm:grid-cols-2">
                {STYLE_8D_KEYS.map((key) => {
                  const value = visibleStyle.analysis[key];
                  return (
                    <div key={key} className="rounded-xl border border-border bg-muted/40 p-4">
                      <Label className="text-xs font-semibold tracking-wider text-primary">{STYLE_8D_LABELS[key]}</Label>
                      <Textarea
                        rows={3}
                        className="mt-2 bg-card"
                        value={value?.summary ?? ""}
                        onChange={(event) => updateStyleDimension(key, event.target.value)}
                        placeholder={`等待 AI 產生${STYLE_8D_LABELS[key]}，或先手動填寫`}
                      />
                      {value?.evidence?.length ? <p className="mt-2 text-xs leading-5 text-muted-foreground">證據：{value.evidence.join("、")}</p> : null}
                    </div>
                  );
                })}
              </div>
              {styleResult && (
                <div className="flex flex-wrap items-center gap-2">
                  <Button variant="outline" onClick={() => updateDraft({ persona: styleResult.personaDraft })}>同步成上方人設文字</Button>
                  <p className="text-xs text-muted-foreground">8D 已經會自動生效；這顆按鈕只在你想把摘要同步到人設文字時使用。</p>
                </div>
              )}
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>受眾與轉換</CardTitle>

            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid gap-4 sm:grid-cols-2">
                <div className="space-y-2">
                  <Label>目標受眾</Label>
                  <Textarea
                    rows={5}
                    value={draft.targetAudience ?? ""}
                    onChange={(e) => updateDraft({ targetAudience: e.target.value })}
                    placeholder="想吸引誰、他們的痛點、渴望、常用語言"
                  />
                </div>
                <div className="space-y-2">
                  <Label>產品 / 服務敘事</Label>
                  <Textarea
                    rows={5}
                    value={draft.productBrief ?? ""}
                    onChange={(e) => updateDraft({ productBrief: e.target.value })}
                    placeholder="你提供什麼、解決什麼、自然導向哪個行動"
                  />
                </div>
              </div>
              <div className="space-y-2">
                <Label>近期經營目標</Label>
                <Textarea
                  rows={3}
                  value={draft.goals ?? ""}
                  onChange={(e) => updateDraft({ goals: e.target.value })}
                  placeholder="例如：提高留言、導流私訊、測試內容市場、建立專家感"
                />
              </div>
            </CardContent>
          </Card>

        </div>
      )}

      {draft && (
        <div className="mobile-floating fixed right-4 z-30 flex max-w-[calc(100vw-2rem)] flex-col items-end gap-3 lg:right-5">
          {assistantOpen && (
            <Card className="w-[360px] max-w-full border-foreground/10 shadow-2xl">
              <CardHeader className="border-b border-border pb-3">
                <div className="flex items-start justify-between gap-3">
                  <div className="flex items-center gap-3">
                    <div className="relative flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-foreground text-background shadow-sm">
                      <Sparkles className="h-5 w-5" />
                      <span className="absolute -right-0.5 -top-0.5 h-3 w-3 rounded-full border-2 border-card bg-success" />
                    </div>
                    <div>
                      <CardTitle className="text-[15px]">策略小幫手</CardTitle>

                    </div>
                  </div>
                  <Button
                    variant="ghost"
                    size="icon"
                    className="h-8 w-8"
                    onClick={() => setAssistantOpen(false)}
                  >
                    <X className="h-4 w-4" />
                  </Button>
                </div>
              </CardHeader>
              <CardContent className="space-y-3 p-3">
                <div className="max-h-64 space-y-2 overflow-y-auto pr-1">
                  {assistantMessages.map((message, index) => (
                    <div
                      key={`${message.role}-${index}`}
                      className={
                        message.role === "user"
                          ? "ml-8 rounded-lg bg-foreground px-3 py-2 text-xs leading-relaxed text-background"
                          : "mr-8 rounded-lg bg-muted px-3 py-2 text-xs leading-relaxed text-foreground"
                      }
                    >
                      {message.content}
                    </div>
                  ))}
                  {assistantBusy && (
                    <div className="mr-8 flex items-center gap-2 rounded-lg bg-muted px-3 py-2 text-xs text-muted-foreground">
                      <Loader2 className="h-3.5 w-3.5 animate-spin" />
                      正在整理成可用策略…
                    </div>
                  )}
                </div>

                <div className="flex flex-wrap gap-2">
                  <Button
                    variant="outline"
                    size="sm"
                    disabled={assistantBusy}
                    onClick={() => askAssistant("我想經營醫療或健康相關帳號，請幫我補成合規、專業但親切的人設策略。")}
                  >
                    醫療健康
                  </Button>
                  <Button
                    variant="outline"
                    size="sm"
                    disabled={assistantBusy}
                    onClick={() => askAssistant("請根據目前欄位，把語氣變得更像真人、更適合 Threads。")}
                  >
                    變自然
                  </Button>
                </div>

                <div className="flex gap-2">
                  <Input
                    ref={assistantInputRef}
                    value={assistantInput}
                    onChange={(event) => setAssistantInput(event.target.value)}
                    onKeyDown={(event) => {
                      if (event.nativeEvent.isComposing) return;
                      if (event.key === "Enter" && !event.shiftKey) {
                        event.preventDefault();
                        askAssistant();
                      }
                    }}
                    placeholder="例如：我想經營醫療衛教，受眾是上班族"
                    disabled={assistantBusy}
                  />
                  <Button
                    type="button"
                    size="icon"
                    onClick={() => askAssistant()}
                    disabled={assistantBusy}
                  >
                    {assistantBusy ? (
                      <Loader2 className="h-4 w-4 animate-spin" />
                    ) : (
                      <Send className="h-4 w-4" />
                    )}
                  </Button>
                </div>
                <p className="text-[11px] leading-relaxed text-muted-foreground">
                  小幫手可修改一般策略與 8D 欄位；套用後仍由你審核並按「儲存策略」。
                </p>
              </CardContent>
            </Card>
          )}

          <Button
            className="h-12 gap-2 rounded-full px-5 shadow-xl"
            onClick={() => setAssistantOpen((open) => !open)}
          >
            {assistantOpen ? <MessageCircle className="h-4 w-4" /> : <WandSparkles className="h-4 w-4" />}
            {assistantOpen ? "收起小幫手" : "策略小幫手"}
          </Button>
        </div>
      )}
    </div>
  );
}