"use client";

import { useEffect, useMemo, useState } from "react";
import { useRouter } from "next/navigation";
import { toast } from "sonner";
import {
  api,
  type Connection,
  type Pipeline,
  type StreamConfig,
  type StreamInfo,
} from "@/components/api";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";

const MODES = [
  { value: "full-refresh", label: "full-refresh（全量覆盖，默认）" },
  { value: "truncate", label: "truncate（清空后写入）" },
  { value: "incremental", label: "incremental（增量）" },
  { value: "snapshot", label: "snapshot（快照）" },
];

export default function NewPipelinePage() {
  const router = useRouter();
  const [connections, setConnections] = useState<Connection[]>([]);
  const [connError, setConnError] = useState<string | null>(null);

  const [name, setName] = useState("");
  const [sourceId, setSourceId] = useState("");
  const [targetId, setTargetId] = useState("");
  const [mode, setMode] = useState("full-refresh");
  const [schemaSync, setSchemaSync] = useState(true);

  const [streamList, setStreamList] = useState<StreamInfo[] | null>(null);
  const [streamsLoading, setStreamsLoading] = useState(false);
  const [selected, setSelected] = useState<Record<string, StreamConfig>>({});
  const [saving, setSaving] = useState(false);

  useEffect(() => {
    api<Connection[]>("/api/connections")
      .then(setConnections)
      .catch((e) => setConnError(e instanceof Error ? e.message : "加载失败"));
  }, []);

  // 切换源连接时同时清空已加载的表（在 onValueChange 里处理）

  const selectedList = useMemo(() => Object.values(selected), [selected]);

  async function loadStreams() {
    if (!sourceId) return;
    setStreamsLoading(true);
    try {
      const list = await api<StreamInfo[]>(
        `/api/connections/${sourceId}/streams`
      );
      setStreamList(list);
      if (list.length === 0) toast.info("该连接没有可同步的表");
    } catch (e) {
      toast.error(e instanceof Error ? e.message : "加载表失败");
    } finally {
      setStreamsLoading(false);
    }
  }

  function toggleStream(s: StreamInfo, checked: boolean) {
    setSelected((m) => {
      const next = { ...m };
      if (checked) next[s.name] = { name: s.name };
      else delete next[s.name];
      return next;
    });
  }

  function selectAll(on: boolean) {
    if (!streamList) return;
    setSelected(
      on
        ? Object.fromEntries(
            streamList.map((s) => [s.name, selected[s.name] ?? { name: s.name }])
          )
        : {}
    );
  }

  function setStreamField(
    name: string,
    field: "primary_key" | "update_key",
    value: string
  ) {
    setSelected((m) => ({
      ...m,
      [name]: { ...m[name], name, [field]: value || undefined },
    }));
  }

  async function submit() {
    if (!name.trim()) return toast.error("请填写流水线名称");
    if (!sourceId || !targetId) return toast.error("请选择源连接和目标连接");
    if (sourceId === targetId) return toast.error("源连接和目标连接不能相同");
    if (selectedList.length === 0) return toast.error("请至少选择一张表");

    setSaving(true);
    try {
      const p = await api<Pipeline>("/api/pipelines", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          name: name.trim(),
          source_conn_id: Number(sourceId),
          target_conn_id: Number(targetId),
          schema_sync: schemaSync ? 1 : 0,
          mode,
          streams: JSON.stringify(selectedList),
        }),
      });
      toast.success("流水线已创建");
      router.push(`/pipelines/${p.id}`);
    } catch (e) {
      toast.error(e instanceof Error ? e.message : "创建失败");
      setSaving(false);
    }
  }

  return (
    <div className="flex max-w-3xl flex-col gap-6">
      <h1 className="text-xl font-semibold">新建流水线</h1>

      {connError ? (
        <div className="text-sm text-red-500">连接列表加载失败：{connError}</div>
      ) : null}

      <Card>
        <CardHeader>
          <CardTitle>基本信息</CardTitle>
        </CardHeader>
        <CardContent className="grid gap-4">
          <div className="grid gap-1.5">
            <Label htmlFor="p-name">名称</Label>
            <Input
              id="p-name"
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="例如：测试库 → 本地 dev"
            />
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div className="grid gap-1.5">
              <Label>源连接</Label>
              <Select
                value={sourceId}
                onValueChange={(v) => {
                  setSourceId(String(v));
                  setStreamList(null);
                  setSelected({});
                }}
              >
                <SelectTrigger className="w-full">
                  <SelectValue placeholder="选择源连接" />
                </SelectTrigger>
                <SelectContent>
                  {connections.map((c) => (
                    <SelectItem key={c.id} value={String(c.id)}>
                      {c.name}（{c.database}）
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="grid gap-1.5">
              <Label>目标连接</Label>
              <Select value={targetId} onValueChange={(v) => setTargetId(String(v))}>
                <SelectTrigger className="w-full">
                  <SelectValue placeholder="选择目标连接" />
                </SelectTrigger>
                <SelectContent>
                  {connections.map((c) => (
                    <SelectItem key={c.id} value={String(c.id)}>
                      {c.name}（{c.database}）
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </div>
          <div className="grid gap-1.5">
            <Label>同步模式</Label>
            <Select value={mode} onValueChange={(v) => setMode(String(v))}>
              <SelectTrigger className="w-full">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {MODES.map((m) => (
                  <SelectItem key={m.value} value={m.value}>
                    {m.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
          <div className="flex items-center justify-between rounded-md border p-3">
            <div className="flex flex-col gap-0.5">
              <Label>Schema 同步</Label>
              <span className="text-xs text-muted-foreground">
                先用 Atlas 同步 schema（表/索引/约束），再迁移数据
              </span>
            </div>
            <Switch checked={schemaSync} onCheckedChange={(c) => setSchemaSync(!!c)} />
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>选择要同步的表</CardTitle>
          <CardDescription>
            选择源连接后点击「加载表」，勾选需要同步的表。
          </CardDescription>
        </CardHeader>
        <CardContent className="flex flex-col gap-3">
          <div className="flex items-center gap-2">
            <Button
              variant="outline"
              onClick={loadStreams}
              disabled={!sourceId || streamsLoading}
            >
              {streamsLoading ? "加载中…" : "加载表"}
            </Button>
            {streamList && streamList.length > 0 ? (
              <>
                <Button variant="ghost" size="sm" onClick={() => selectAll(true)}>
                  全选
                </Button>
                <Button variant="ghost" size="sm" onClick={() => selectAll(false)}>
                  全不选
                </Button>
                <span className="text-xs text-muted-foreground">
                  已选 {selectedList.length} / {streamList.length}
                </span>
              </>
            ) : null}
          </div>

          {streamList === null ? null : streamList.length === 0 ? (
            <div className="text-sm text-muted-foreground">没有可同步的表。</div>
          ) : (
            <div className="max-h-96 overflow-auto rounded-md border">
              {streamList.map((s) => {
                const checked = !!selected[s.name];
                return (
                  <div
                    key={s.name}
                    className="flex items-center gap-3 border-b px-3 py-2 last:border-b-0"
                  >
                    <Checkbox
                      checked={checked}
                      onCheckedChange={(c) => toggleStream(s, !!c)}
                    />
                    <span className="flex-1 font-mono text-sm">{s.name}</span>
                    {mode === "incremental" && checked ? (
                      <div className="flex items-center gap-2">
                        <Input
                          className="h-7 w-36 font-mono text-xs"
                          placeholder="primary_key"
                          value={selected[s.name].primary_key ?? ""}
                          onChange={(e) =>
                            setStreamField(s.name, "primary_key", e.target.value)
                          }
                        />
                        <Input
                          className="h-7 w-36 font-mono text-xs"
                          placeholder="update_key"
                          value={selected[s.name].update_key ?? ""}
                          onChange={(e) =>
                            setStreamField(s.name, "update_key", e.target.value)
                          }
                        />
                      </div>
                    ) : null}
                  </div>
                );
              })}
            </div>
          )}
        </CardContent>
      </Card>

      <div className="flex gap-2">
        <Button onClick={submit} disabled={saving}>
          {saving ? "创建中…" : "创建流水线"}
        </Button>
        <Button variant="outline" onClick={() => router.push("/pipelines")}>
          取消
        </Button>
      </div>
    </div>
  );
}