import { useEffect, useMemo, useState } from "react";
import { Link, useParams } from "../../shared/router.jsx";
import { useDataProvider, useList, useOne } from "../../shared/hooks/dataHooks.js";
import { Alert } from "../../components/ui/alert";
import { Button } from "../../components/ui/button";
import { Card, CardContent } from "../../components/ui/card";
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "../../components/ui/dialog";
import { Input } from "../../components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../components/ui/select";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../components/ui/table";
import { ConfirmDialog, DetailList, Field, PageHeader, PageState, StatusPill, conflictMessage } from "../../shared/ui/ui.jsx";
import { useTitle } from "../../shared/hooks/hooks.js";

const createInitial = {
  protocol: "socks5",
  host: "",
  port: "",
  username: "",
  password: "",
  expected_public_ip: "",
  expected_region: "",
};
const healthText = {
  unchecked: "未检测",
  healthy: "健康",
  unhealthy: "不健康",
  disabled: "已停用",
};
const protocolOptions = ["http", "https", "socks4", "socks5"].map((value) => ({
  value,
  label: value,
}));

function ExitHealthPill({ exit }) {
  const known = Object.hasOwn(healthText, exit.health_status);
  const tone =
    exit.health_status === "healthy"
      ? "success"
      : exit.health_status === "disabled"
        ? "neutral"
        : exit.health_status === "unchecked"
          ? "warning"
          : "danger";
  return (
    <StatusPill
      tone={tone}
      label={known ? healthText[exit.health_status] : "未知状态"}
      sub={known ? undefined : exit.health_status}
    />
  );
}

function ExitActions({ exit, busy, onAction, onEdit, onDelete }) {
  const disabled = busy;
  return (
    <div className="flex flex-wrap gap-2">
      <Button size="sm" disabled={disabled} onClick={() => onAction(exit, "check")}>
        <i className="ri-refresh-line" aria-hidden="true" />
        检测
      </Button>
      {exit.health_status === "disabled" ? (
        <Button size="sm" disabled={disabled} onClick={() => onAction(exit, "enable")}>
          <i className="ri-checkbox-circle-line" aria-hidden="true" />
          启用
        </Button>
      ) : (
        <Button size="sm" variant="destructive" disabled={disabled} onClick={() => onAction(exit, "disable")}>
          <i className="ri-forbid-line" aria-hidden="true" />
          停用
        </Button>
      )}
      <Button
        size="sm"
        variant="outline"
        disabled={disabled}
        onClick={() => onEdit(exit)}
      >
        编辑
      </Button>
      <Button
        size="sm"
        variant="outline"
        disabled={disabled}
        onClick={() => onDelete(exit)}
      >
        删除
      </Button>
    </div>
  );
}

function ExitCreateModal({
  open,
  onClose,
  onSubmit,
  busy,
  error,
  initialValue = createInitial,
  title = "创建网络出口",
  submitLabel = "创建网络出口",
}) {
  const [form, setForm] = useState({ ...createInitial, ...initialValue });
  useEffect(() => {
    if (open)
      setForm({
        ...createInitial,
        ...initialValue,
        port: initialValue.port ? String(initialValue.port) : "",
      });
  }, [open, initialValue]);
  const update = (key, value) =>
    setForm((current) => ({ ...current, [key]: value }));
  const port = Number(form.port);
  const credentialsValid = !form.password || !!form.username;
  const valid =
    form.host.trim() &&
    Number.isInteger(port) &&
    port > 0 &&
    port <= 65535 &&
    credentialsValid;

  async function submit(event) {
    event.preventDefault();
    if (!valid) return;
    const created = await onSubmit({
      protocol: form.protocol,
      host: form.host.trim(),
      port,
      username: form.username,
      password: form.password,
      expected_public_ip: form.expected_public_ip.trim(),
      expected_region: form.expected_region.trim(),
    });
    if (created) {
      setForm(createInitial);
      onClose();
    }
  }

  return (
    <Dialog open={open} onOpenChange={(nextOpen) => { if (!nextOpen) onClose() }}>
      <DialogContent className="sm:max-w-2xl">
        <DialogHeader><DialogTitle>{title}</DialogTitle></DialogHeader>
        <form id="exit-create-form" onSubmit={submit} noValidate>
        {error ? (
          <Alert variant="destructive" className="mb-4">
            {conflictMessage(
              error,
              "出口地址或认证信息与现有资源冲突；表单内容已保留。",
            )}
          </Alert>
        ) : null}
        <div className="grid gap-4 sm:grid-cols-3">
          <Field id="exit-protocol" label="协议" required helper="代理协议">
            <Select value={form.protocol} onValueChange={(value) => update("protocol", value)}>
              <SelectTrigger id="exit-protocol"><SelectValue /></SelectTrigger>
              <SelectContent>
                {protocolOptions.map((option) => <SelectItem key={option.value} value={option.value}>{option.label}</SelectItem>)}
              </SelectContent>
            </Select>
          </Field>
          <Field id="exit-host" label="主机" required helper="代理服务器地址">
            <Input
              id="exit-host"
              required
              maxLength={253}
              value={form.host}
              onChange={(event) => update("host", event.target.value)}
              placeholder="如 proxy.example"
            />
          </Field>
          <Field id="exit-port" label="端口" required helper="1..65535">
            <Input
              id="exit-port"
              type="number"
              min={1}
              max={65535}
              required
              value={form.port}
              onChange={(event) => update("port", event.target.value)}
            />
          </Field>
          <Field
            id="exit-username"
            label="用户名（可选）"
            helper="直接保存到系统并用于代理认证"
          >
            <Input
              id="exit-username"
              maxLength={255}
              value={form.username}
              onChange={(event) => update("username", event.target.value)}
            />
          </Field>
          <Field
            id="exit-password"
            label="密码（可选）"
            error={
              credentialsValid ? undefined : "填写密码时必须同时填写用户名"
            }
            helper="明文保存并直接用于代理认证"
          >
            <Input
              id="exit-password"
              maxLength={255}
              value={form.password}
              onChange={(event) => update("password", event.target.value)}
              aria-invalid={!credentialsValid || undefined}
            />
          </Field>
          <Field
            id="exit-ip"
            label="出口IP（可选）"
            helper="健康检测时比对的预期公网 IP"
          >
            <Input
              id="exit-ip"
              value={form.expected_public_ip}
              onChange={(event) =>
                update("expected_public_ip", event.target.value)
              }
            />
          </Field>
          <Field
            id="exit-region"
            label="出口地区（可选）"
            helper="如 CN-Shanghai"
          >
            <Input
              id="exit-region"
              maxLength={64}
              value={form.expected_region}
              onChange={(event) =>
                update("expected_region", event.target.value)
              }
            />
          </Field>
        </div>
          <DialogFooter>
            <Button type="button" variant="outline" onClick={onClose} disabled={busy}>取消</Button>
            <Button variant="default" type="submit" form="exit-create-form" disabled={!valid || busy}>
              {busy ? "保存中…" : submitLabel}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}

function ExitTable({
  exits,
  accountsByExit,
  bindingsError,
  busy,
  onAction,
  onEdit,
  onDelete,
}) {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>出口</TableHead>
          <TableHead>状态</TableHead>
          <TableHead>用户名</TableHead>
          <TableHead>密码</TableHead>
          <TableHead>出口IP</TableHead>
          <TableHead>最近检测</TableHead>
          <TableHead>绑定账号</TableHead>
          <TableHead className="text-right">操作</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {exits.map((exit) => {
          const accounts = accountsByExit.get(exit.id);
          return (
            <TableRow key={exit.id}>
              <TableCell>
                <div className="min-w-0">
                  <Link to={`/network-exits/${encodeURIComponent(exit.id)}`} className="anywhere font-semibold text-foreground hover:text-primary">{exit.id}</Link>
                  <p className="anywhere text-xs text-muted-foreground">{exit.protocol}://{exit.host}:{exit.port}</p>
                </div>
              </TableCell>
              <TableCell><ExitHealthPill exit={exit} /></TableCell>
              <TableCell><span className="anywhere">{exit.username || "无"}</span></TableCell>
              <TableCell><span className="anywhere">{exit.password || "无"}</span></TableCell>
              <TableCell><span className="anywhere">{exit.observed_public_ip || "尚无观测"}</span></TableCell>
              <TableCell>{exit.last_checked_at ? new Date(exit.last_checked_at).toLocaleString("zh-CN") : "未检测"}</TableCell>
              <TableCell>
                {bindingsError ? <span className="text-muted-foreground">状态未知</span> : <span className="anywhere">{accounts?.length ? accounts.join("、") : "未绑定"}</span>}
              </TableCell>
              <TableCell className="text-right">
                <div className="flex justify-end"><ExitActions exit={exit} busy={busy === exit.id} onAction={onAction} onEdit={onEdit} onDelete={onDelete} /></div>
              </TableCell>
            </TableRow>
          );
        })}
      </TableBody>
    </Table>
  );
}

export function NetworkExitList() {
  const dataProvider = useDataProvider()("default");
  const [createOpen, setCreateOpen] = useState(false);
  const [busy, setBusy] = useState("");
  const [createError, setCreateError] = useState(null);
  const [notice, setNotice] = useState(null);
  const [disabling, setDisabling] = useState(null);
  const [editing, setEditing] = useState(null);
  const [deleting, setDeleting] = useState(null);
  const { result, query } = useList({ resource: "network-exits" });
  const error = query.error;
  const isPending = query.isPending;
  const exits = result.data ?? [];
  const { result: bindingResult, query: browsersQuery } = useList({
    resource: "browsers",
    queryOptions: { retry: false },
  });
  const browsers = bindingResult.data ?? [];
  const bindingsError = browsersQuery.error;
  const refetchBrowsers = browsersQuery.refetch;
  const accountsByExit = useMemo(() => {
    const map = new Map();
    for (const runtime of browsers) {
      if (!runtime.network_exit_id || !runtime.account_id) continue;
      map.set(runtime.network_exit_id, [
        ...(map.get(runtime.network_exit_id) || []),
        runtime.account_id,
      ]);
    }
    return map;
  }, [browsers]);
  useTitle("CreatorHub · 网络出口");

  async function createExit(data) {
    setBusy("create");
    setCreateError(null);
    try {
      await dataProvider.create({ resource: "network-exits", variables: data });
      await query.refetch();
      setNotice({
        variant: "default",
        text: "网络出口已创建；检测通过后才可用于账号绑定。",
      });
      return true;
    } catch (reason) {
      setCreateError(reason);
      return false;
    } finally {
      setBusy("");
    }
  }

  async function updateExit(exit, data) {
    setBusy(`edit:${exit.id}`);
    setNotice(null);
    try {
      await dataProvider.update({
        resource: "network-exits",
        id: exit.id,
        variables: data,
      });
      await query.refetch();
      setEditing(null);
      setNotice({
        variant: "default",
        text: "网络出口已更新，需重新检测后才能使用。",
      });
      return true;
    } catch (reason) {
      setNotice({
        variant: "destructive",
        text: conflictMessage(reason, "出口当前不能修改。"),
      });
      return false;
    } finally {
      setBusy("");
    }
  }

  async function deleteExit(exit) {
    setBusy(`delete:${exit.id}`);
    setNotice(null);
    try {
      await dataProvider.delete({ resource: "network-exits", id: exit.id });
      await query.refetch();
      setDeleting(null);
      setNotice({ variant: "default", text: "网络出口已删除。" });
    } catch (reason) {
      setNotice({
        variant: "destructive",
        text: conflictMessage(reason, "出口仍有绑定或运行实例，不能删除。"),
      });
    } finally {
      setBusy("");
    }
  }

  async function runAction(exit, action) {
    setBusy(exit.id);
    setNotice(null);
    try {
      await dataProvider.networkExitAction(exit.id, action);
      await Promise.all([query.refetch(), refetchBrowsers()]);
      setNotice({
        variant: "default",
        text:
          action === "check"
            ? "出口检测完成。"
            : action === "enable"
              ? "出口已启用；重新检测通过后才能绑定。"
              : "出口已停用；绑定账号不会自动恢复。",
      });
    } catch (reason) {
      setNotice({
        variant: "destructive",
        text: conflictMessage(
          reason,
          action === "check" ? "已停用的出口不能检测。" : "出口当前不能停用。",
        ),
      });
    } finally {
      setBusy("");
    }
  }

  return (
    <div>
      <PageHeader
        icon="ri-earth-line"
        title="网络出口"
        description="维护固定出口、健康观测与账号绑定"
      >
        <Button variant="default" onClick={() => setCreateOpen(true)}>
          <i className="ri-add-line" aria-hidden="true" />
          创建网络出口
        </Button>
      </PageHeader>
      {notice ? (
        <Alert variant={notice.variant === "destructive" ? "destructive" : "default"} className="mb-4">
          {notice.text}
        </Alert>
      ) : null}
      {error ? (
        <Alert variant="destructive" className="mb-4">
          {error.message}
        </Alert>
      ) : null}
      {bindingsError ? (
        <Alert variant="destructive" className="mb-4">
          环境不可用{bindingsError.status ? `（${bindingsError.status}）` : ""}
          ：无法读取账号绑定，状态暂时未知。
          <Button size="sm" onClick={() => refetchBrowsers()}>
            重试环境状态
          </Button>
        </Alert>
      ) : null}
      <PageState
        pending={isPending}
        error={error}
        empty={exits.length === 0}
        emptyText="暂无网络出口。创建并检测健康后，才能绑定运行环境。"
      >
        <ExitTable
          exits={exits}
          accountsByExit={accountsByExit}
          bindingsError={!!bindingsError}
          busy={busy}
          onAction={(exit, action) =>
            action === "disable" ? setDisabling(exit) : runAction(exit, action)
          }
          onEdit={(exit) => setEditing(exit)}
          onDelete={(exit) => setDeleting(exit)}
        />
      </PageState>
      <ExitCreateModal
        open={createOpen}
        onClose={() => {
          setCreateOpen(false);
          setCreateError(null);
        }}
        onSubmit={createExit}
        busy={busy === "create"}
        error={createError}
      />
      <ExitCreateModal
        open={editing !== null}
        onClose={() => setEditing(null)}
        onSubmit={(data) => updateExit(editing, data)}
        busy={busy === `edit:${editing?.id}`}
        error={null}
        initialValue={editing || createInitial}
        title="编辑网络出口"
        submitLabel="保存网络出口"
      />
      <ConfirmDialog
        open={deleting !== null}
        onClose={() => setDeleting(null)}
        onConfirm={() => deleteExit(deleting)}
        title="删除网络出口"
        confirmLabel="确认删除"
        busy={busy === `delete:${deleting?.id}`}
        body={`删除网络出口 ${deleting?.id}？有绑定或运行实例时会拒绝。`}
      />
      <ConfirmDialog
        open={disabling !== null}
        onClose={() => setDisabling(null)}
        onConfirm={() => {
          const exit = disabling;
          setDisabling(null);
          runAction(exit, "disable");
        }}
        title="停用网络出口"
        confirmLabel="确认停用"
        busy={busy === disabling?.id}
        body={`停用网络出口 ${disabling?.id}？绑定账号将暂停，排队任务进入 hold。`}
      />
    </div>
  );
}

export function NetworkExitDetail() {
  const { id } = useParams();
  const { result, error, isPending } = useOne({
    resource: "network-exits",
    id,
    queryOptions: { retry: false },
  });
  const exit = result;
  useTitle("CreatorHub · 出口详情");
  if (isPending) return <PageState pending />;
  if (error || !exit)
    return (
      <Alert variant="destructive">{error?.message || "网络出口不存在"}</Alert>
    );
  return (
    <div>
      <PageHeader
        icon="ri-earth-line"
        title="网络出口详情"
        description={
          <span className="anywhere">
            {exit.protocol}://{exit.host}:{exit.port}
          </span>
        }
      >
        <Button asChild>
          <Link to="/network-exits">
            <i className="ri-arrow-left-line" aria-hidden="true" />
            返回出口列表
          </Link>
        </Button>
      </PageHeader>
      <Card>
        <CardContent className="space-y-4">
          <ExitHealthPill exit={exit} />
          <DetailList
            rows={[
              ["ID", <span className="anywhere">{exit.id}</span>],
              [
                "健康 / 版本",
                <span className="anywhere">
                  {healthText[exit.health_status] ?? exit.health_status} ·{" "}
                  {exit.version}
                </span>,
              ],
              [
                "用户名",
                <span className="anywhere">{exit.username || "无"}</span>,
              ],
              [
                "密码",
                <span className="anywhere">{exit.password || "无"}</span>,
              ],
              [
                "出口IP",
                <span className="anywhere">
                  {exit.observed_public_ip || "尚无观测"}
                </span>,
              ],
              [
                "最近检测",
                exit.last_checked_at
                  ? new Date(exit.last_checked_at).toLocaleString("zh-CN")
                  : "未检测",
              ],
            ]}
          />
        </CardContent>
      </Card>
    </div>
  );
}