"use client";

import { useEffect, useMemo, useState } from "react";
import { ChevronDown, ChevronUp } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import {
  SEARCH_SOURCE_MODE_OPTIONS,
  searchSourceModeLabel,
  type SearchSourceMode,
} from "@/lib/search/source-mode";

export type ConnectionPreset = "sync" | "api" | "hybrid" | "custom";

export interface ThreadsConnectionSettingsData {
  searchViaApi?: boolean;
  searchSourceMode?: SearchSourceMode;
  publishViaApi?: boolean;
  devMode?: boolean;
  scrapeReplies?: boolean;
  repliesPerPost?: number;
  publishHeaded?: boolean;
  playwrightDebug?: boolean;
}

interface ThreadsConnectionSettingsProps {
  settings: ThreadsConnectionSettingsData;
  accountName?: string | null;
  onChange: (patch: Partial<ThreadsConnectionSettingsData>) => void;
}

const PRIMARY_SOURCE_MODES: SearchSourceMode[] = [
  "mixed",
  "threads",
  "brave",
  "crawler",
];

const COMBO_SOURCE_MODES: SearchSourceMode[] = [
  "threads_brave",
  "threads_crawler",
  "brave_crawler",
];

function detectPreset(data: ThreadsConnectionSettingsData): ConnectionPreset {
  const searchApi = data.searchViaApi ?? false;
  const publishApi = data.publishViaApi ?? false;
  const dev = data.devMode ?? false;

  if (searchApi && publishApi && !dev) return "api";
  if (!searchApi && !publishApi && dev) return "sync";
  if (searchApi && dev) return "hybrid";
  return "custom";
}

function presetPatch(preset: ConnectionPreset): Partial<ThreadsConnectionSettingsData> {
  switch (preset) {
    case "api":
      return {
        searchViaApi: true,
        publishViaApi: true,
        devMode: false,
        scrapeReplies: false,
        searchSourceMode: "threads",
      };
    case "sync":
      return {
        searchViaApi: false,
        publishViaApi: false,
        devMode: true,
        scrapeReplies: true,
        searchSourceMode: "crawler",
      };
    case "hybrid":
      return {
        searchViaApi: true,
        publishViaApi: false,
        devMode: true,
        scrapeReplies: true,
        searchSourceMode: "mixed",
      };
    default:
      return {};
  }
}

function sourceModeHint(mode: SearchSourceMode): string {
  return SEARCH_SOURCE_MODE_OPTIONS.find((o) => o.value === mode)?.hint ?? "";
}

function FlowSummary({ settings }: { settings: ThreadsConnectionSettingsData }) {
  const mode = settings.searchSourceMode ?? "mixed";

  const lines = useMemo(() => {
    const sourceLine = `海巡來源：${searchSourceModeLabel(mode)}（${sourceModeHint(mode)}）`;

    const search = settings.searchViaApi
      ? "Threads API：已開啟（需 OAuth + keyword search 權限）"
      : settings.devMode
        ? "Threads API：關閉，改走下方選定的來源"
        : "Threads API：關閉";

    const replies =
      settings.scrapeReplies && settings.devMode
        ? `留言：瀏覽器爬取（每篇最多 ${settings.repliesPerPost ?? 10} 則）`
        : settings.scrapeReplies
          ? "留言：已開啟但 devMode 關閉，實際不會爬留言"
          : "留言：不抓取（僅用貼文與互動數）";

    const publish = settings.publishViaApi
      ? "發文：Meta API 優先，失敗時改瀏覽器"
      : "發文：Playwright 瀏覽器（需 Chrome 同步 session）";

    return [sourceLine, search, replies, publish];
  }, [settings, mode]);

  return (
    <div className="rounded-lg border border-border bg-muted/40 px-3.5 py-3 text-xs leading-relaxed text-muted-foreground">
      <p className="mb-2 font-semibold text-foreground">目前流程預覽</p>
      <ul className="list-inside list-disc space-y-1">
        {lines.map((line) => (
          <li key={line}>{line}</li>
        ))}
      </ul>
    </div>
  );
}

export function ThreadsConnectionSettings({
  settings,
  accountName,
  onChange,
}: ThreadsConnectionSettingsProps) {
  const [preset, setPreset] = useState<ConnectionPreset>("sync");
  const [showAdvanced, setShowAdvanced] = useState(false);
  const [showComboModes, setShowComboModes] = useState(false);

  const currentMode = settings.searchSourceMode ?? "mixed";

  useEffect(() => {
    setPreset(detectPreset(settings));
    setShowComboModes(COMBO_SOURCE_MODES.includes(currentMode));
  }, [settings, currentMode]);

  function applyPreset(next: ConnectionPreset) {
    setPreset(next);
    if (next !== "custom") {
      onChange(presetPatch(next));
    }
  }

  function applySourceMode(mode: SearchSourceMode) {
    setPreset("custom");
    const patch: Partial<ThreadsConnectionSettingsData> = { searchSourceMode: mode };

    if (mode === "threads" || mode === "threads_brave" || mode === "threads_crawler") {
      patch.searchViaApi = true;
    }
    if (mode === "crawler" || mode === "threads_crawler" || mode === "brave_crawler") {
      patch.devMode = true;
    }
    if (mode === "mixed") {
      patch.searchViaApi = true;
      patch.devMode = true;
    }

    onChange(patch);
    setShowComboModes(COMBO_SOURCE_MODES.includes(mode));
  }

  return (
    <div className="space-y-5">
      <Card>
        <CardHeader>
          <CardTitle>海巡搜尋來源</CardTitle>
          <CardDescription>
            選擇要用哪個 provider，或混合模式。Brave 需設定 BRAVE_SEARCH_API_KEY；爬蟲需 Chrome
            同步。
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex flex-wrap gap-2">
            {SEARCH_SOURCE_MODE_OPTIONS.filter((o) =>
              PRIMARY_SOURCE_MODES.includes(o.value)
            ).map((option) => (
              <Button
                key={option.value}
                type="button"
                variant={currentMode === option.value ? "default" : "outline"}
                className="h-auto flex-col items-start gap-0.5 px-3 py-2"
                onClick={() => applySourceMode(option.value)}
              >
                <span className="text-sm font-semibold">{option.label}</span>
                <span className="text-[10px] font-normal opacity-80">{option.hint}</span>
              </Button>
            ))}
          </div>

          <button
            type="button"
            className="text-xs text-muted-foreground underline-offset-2 hover:underline"
            onClick={() => setShowComboModes((v) => !v)}
          >
            {showComboModes ? "收合組合模式" : "顯示組合模式（API + Brave、API + 爬蟲…）"}
          </button>

          {showComboModes && (
            <div className="flex flex-wrap gap-2">
              {SEARCH_SOURCE_MODE_OPTIONS.filter((o) =>
                COMBO_SOURCE_MODES.includes(o.value)
              ).map((option) => (
                <Button
                  key={option.value}
                  type="button"
                  variant={currentMode === option.value ? "default" : "outline"}
                  size="sm"
                  className="h-auto flex-col items-start gap-0.5 px-3 py-2"
                  onClick={() => applySourceMode(option.value)}
                >
                  <span className="text-sm font-semibold">{option.label}</span>
                  <span className="text-[10px] font-normal opacity-80">{option.hint}</span>
                </Button>
              ))}
            </div>
          )}
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>連線預設</CardTitle>
          <CardDescription>
            {accountName
              ? `目前帳號「${accountName}」的抓取策略。側欄切換帳號會載入各自的設定。`
              : "請先在側欄建立並選擇經營帳號。"}
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex flex-wrap gap-2">
            {(
              [
                ["sync", "Chrome 同步", "全爬蟲：海巡 + 留言 + 發文"],
                ["api", "API Key 優先", "全官方 API：不爬留言"],
                ["hybrid", "混合模式", "API 海巡 + 瀏覽器留言/發文"],
                ["custom", "自訂", "手動調整下方開關"],
              ] as const
            ).map(([value, label, hint]) => (
              <Button
                key={value}
                type="button"
                variant={preset === value ? "default" : "outline"}
                className="h-auto flex-col items-start gap-0.5 px-3 py-2"
                onClick={() => applyPreset(value)}
              >
                <span className="text-sm font-semibold">{label}</span>
                <span className="text-[10px] font-normal opacity-80">{hint}</span>
              </Button>
            ))}
          </div>
          <FlowSummary settings={settings} />
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <button
            type="button"
            className="flex w-full items-center justify-between text-left"
            onClick={() => setShowAdvanced((v) => !v)}
          >
            <div>
              <CardTitle>進階開關</CardTitle>
              <CardDescription>直接控制底層行為。變更後會切換為「自訂」預設。</CardDescription>
            </div>
            {showAdvanced ? (
              <ChevronUp className="h-5 w-5 shrink-0 text-muted-foreground" />
            ) : (
              <ChevronDown className="h-5 w-5 shrink-0 text-muted-foreground" />
            )}
          </button>
        </CardHeader>
        {showAdvanced && (
          <CardContent className="space-y-3">
            {(
              [
                {
                  key: "searchViaApi" as const,
                  title: "海巡走官方 API",
                  desc: "關閉則用 Playwright 瀏覽器搜尋",
                },
                {
                  key: "publishViaApi" as const,
                  title: "發文走官方 API",
                  desc: "關閉則只用瀏覽器發文",
                },
                {
                  key: "devMode" as const,
                  title: "瀏覽器模式（devMode）",
                  desc: "開啟才允許瀏覽器海巡與爬留言",
                },
                {
                  key: "scrapeReplies" as const,
                  title: "抓取他人貼文留言",
                  desc: "需 devMode 開啟才會實際執行",
                },
                {
                  key: "publishHeaded" as const,
                  title: "發文時顯示瀏覽器視窗",
                  desc: "除錯用，server 上通常保持關閉",
                },
                {
                  key: "playwrightDebug" as const,
                  title: "Playwright 除錯截圖",
                  desc: "卡住時保留瀏覽器截圖",
                },
              ] as const
            ).map((item) => (
              <div
                key={item.key}
                className="flex items-center justify-between rounded-lg border border-border bg-muted/50 px-3.5 py-3"
              >
                <div>
                  <p className="text-sm font-semibold">{item.title}</p>
                  <p className="mt-0.5 text-xs text-muted-foreground">{item.desc}</p>
                </div>
                <Switch
                  checked={settings[item.key] ?? false}
                  onCheckedChange={(checked) => {
                    setPreset("custom");
                    onChange({ [item.key]: checked });
                  }}
                />
              </div>
            ))}
            <div className="space-y-2 pt-1">
              <Label>每篇熱門文讀取幾則留言</Label>
              <Input
                type="number"
                min={1}
                max={30}
                value={settings.repliesPerPost ?? 10}
                onChange={(e) =>
                  onChange({ repliesPerPost: parseInt(e.target.value, 10) || 10 })
                }
              />
            </div>
          </CardContent>
        )}
      </Card>
    </div>
  );
}