import { useState } from "react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { toast } from "sonner";
import { mapApiErrorMessage } from "../api/errorMessages";
import {
  createNotificationChannel,
  fetchNotificationChannels,
  testNotificationChannel,
  updateNotificationChannel,
  type NotificationChannel,
  type NotificationChannelConfig,
  type NotificationChannelPayload,
  type NotificationChannelTemplate,
} from "../api/notificationChannels";
import { isApiError } from "../api/types";
import { PageHeader } from "../components/common/PageHeader";
import { TableSkeleton } from "../components/common/TableSkeleton";
import { Button } from "../components/ui/button";
import { Input } from "../components/ui/input";
import { Label } from "../components/ui/label";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "../components/ui/table";
import { Textarea } from "../components/ui/textarea";

type ChannelFormState = {
  channelType: "wecom";
  name: string;
  enabled: boolean;
  mode: NotificationChannelConfig["mode"];
  webhookUrl: string;
  secret: string;
  timeoutMs: string;
  roleCodes: string[];
  domainScopes: NotificationChannelConfig["routing"]["domainScopes"];
  allowedTypes: string[];
  title: string;
  body: string;
  footer: string;
  deepLinkLabel: string;
};

type TestResultState = {
  channelId: string;
  channelName: string;
  ok: boolean;
  code: string;
  skipped: boolean;
  previewMessage: string | null;
  response: unknown;
};

const ROLE_OPTIONS = [
  { value: "employee", label: "employee" },
  { value: "manager", label: "manager" },
  { value: "ceo", label: "ceo" },
  { value: "finance", label: "finance" },
  { value: "finance_mgr", label: "finance_mgr" },
  { value: "administration", label: "administration" },
  { value: "hr", label: "hr" },
  { value: "admin", label: "admin" },
] as const;

const DOMAIN_SCOPE_OPTIONS = [
  { value: "workflow", label: "审批待办" },
  { value: "reimbursement", label: "报销" },
  { value: "leave", label: "请假" },
  { value: "procurement", label: "采购" },
  { value: "travel", label: "差旅" },
  { value: "asset", label: "资产" },
  { value: "inventory", label: "盘点" },
] as const;

const NOTIFICATION_TYPE_OPTIONS = [
  { value: "workflow.task_assigned", label: "workflow.task_assigned" },
  { value: "reimbursement.approved", label: "reimbursement.approved" },
  { value: "reimbursement.rejected", label: "reimbursement.rejected" },
  { value: "reimbursement.returned", label: "reimbursement.returned" },
  { value: "reimbursement.paid", label: "reimbursement.paid" },
  { value: "leave.approved", label: "leave.approved" },
  { value: "leave.rejected", label: "leave.rejected" },
  { value: "purchase_request.approved", label: "purchase_request.approved" },
  { value: "purchase_request.rejected", label: "purchase_request.rejected" },
  { value: "travel_request.approved", label: "travel_request.approved" },
  { value: "travel_request.rejected", label: "travel_request.rejected" },
  { value: "asset.assigned", label: "asset.assigned" },
  { value: "asset.returned", label: "asset.returned" },
  { value: "asset.transferred", label: "asset.transferred" },
  { value: "inventory_check.completed", label: "inventory_check.completed" },
] as const;

function resolveError(error: unknown) {
  if (isApiError(error)) {
    return `${error.code}: ${mapApiErrorMessage(error.code, error.details, error.message)}`;
  }
  if (error instanceof Error) {
    return error.message;
  }
  return "请求失败，请稍后重试。";
}

function buildInitialForm(): ChannelFormState {
  return {
    channelType: "wecom",
    name: "",
    enabled: true,
    mode: "mock",
    webhookUrl: "",
    secret: "",
    timeoutMs: "5000",
    roleCodes: [],
    domainScopes: [],
    allowedTypes: [],
    title: "{{title}}",
    body: "{{body}}\n\n查看详情：{{detailUrl}}",
    footer: "来自海音达工作台",
    deepLinkLabel: "查看详情",
  };
}

function mapChannelToForm(channel: NotificationChannel): ChannelFormState {
  return {
    channelType: "wecom",
    name: channel.name,
    enabled: channel.enabled,
    mode: channel.configJson.mode,
    webhookUrl: channel.configJson.webhookUrl ?? "",
    secret: channel.configJson.secret ?? "",
    timeoutMs: String(channel.configJson.timeoutMs ?? 5000),
    roleCodes: channel.configJson.routing.roleCodes ?? [],
    domainScopes: channel.configJson.routing.domainScopes ?? [],
    allowedTypes: channel.configJson.routing.allowedTypes ?? [],
    title: channel.templateJson.title,
    body: channel.templateJson.body,
    footer: channel.templateJson.footer,
    deepLinkLabel: channel.templateJson.deepLinkLabel,
  };
}

function toggleSelection(values: string[], value: string) {
  return values.includes(value) ? values.filter((item) => item !== value) : [...values, value];
}

function formatDateTime(value: string | null) {
  if (!value) return "-";
  return value.slice(0, 19).replace("T", " ");
}

function formatChannelType(channelType: string) {
  return channelType === "wechat_work" ? "企微（兼容别名）" : "企微";
}

function formatMode(mode: string) {
  return mode === "wecom_webhook" ? "Webhook" : "Mock";
}

function formatSummary(values: string[], labelMap: Record<string, string>, emptyLabel: string) {
  if (!values.length) return emptyLabel;
  return values.map((value) => labelMap[value] ?? value).join("、");
}

function buildPayload(form: ChannelFormState): NotificationChannelPayload {
  const templateJson: NotificationChannelTemplate = {
    title: form.title.trim() || "{{title}}",
    body: form.body.trim() || "{{body}}\n\n查看详情：{{detailUrl}}",
    footer: form.footer.trim() || "来自海音达工作台",
    deepLinkLabel: form.deepLinkLabel.trim() || "查看详情",
  };

  return {
    channelType: form.channelType,
    name: form.name.trim(),
    enabled: form.enabled,
    configJson: {
      mode: form.mode,
      webhookUrl: form.webhookUrl.trim() || null,
      secret: form.secret.trim() || null,
      timeoutMs: Math.max(100, Number(form.timeoutMs || 5000)),
      routing: {
        roleCodes: form.roleCodes,
        domainScopes: form.domainScopes,
        allowedTypes: form.allowedTypes,
      },
    },
    templateJson,
  };
}

const roleLabelMap = Object.fromEntries(ROLE_OPTIONS.map((item) => [item.value, item.label]));
const domainLabelMap = Object.fromEntries(DOMAIN_SCOPE_OPTIONS.map((item) => [item.value, item.label]));

export function NotificationChannelsPage() {
  const queryClient = useQueryClient();
  const [error, setError] = useState("");
  const [editingId, setEditingId] = useState<string | null>(null);
  const [form, setForm] = useState<ChannelFormState>(buildInitialForm);
  const [lastTestResult, setLastTestResult] = useState<TestResultState | null>(null);

  const channelsQuery = useQuery({
    queryKey: ["notification-channels"],
    queryFn: () => fetchNotificationChannels(),
  });

  const saveMutation = useMutation({
    mutationFn: async () => {
      if (editingId) {
        const payload = buildPayload(form);
        return updateNotificationChannel(editingId, {
          name: payload.name,
          enabled: payload.enabled,
          configJson: payload.configJson,
          templateJson: payload.templateJson,
        });
      }
      return createNotificationChannel(buildPayload(form));
    },
    onSuccess: async ({ channel }) => {
      await queryClient.invalidateQueries({ queryKey: ["notification-channels"] });
      setEditingId(channel.id);
      setForm(mapChannelToForm(channel));
      setError("");
      toast.success(editingId ? "通知渠道已更新" : "通知渠道已创建");
    },
    onError: (mutationError) => {
      const message = resolveError(mutationError);
      setError(message);
      toast.error(message);
    },
  });

  const testMutation = useMutation({
    mutationFn: async (channel: NotificationChannel) => {
      const result = await testNotificationChannel(channel.id);
      return {
        channelName: channel.name,
        ...result,
      };
    },
    onSuccess: (result) => {
      setLastTestResult({
        channelId: result.channel.id,
        channelName: result.channelName,
        ok: result.testResult.ok,
        code: result.testResult.code,
        skipped: result.testResult.skipped,
        previewMessage: result.testResult.previewMessage,
        response: result.testResult.response,
      });
      if (result.testResult.ok) {
        toast.success("测试发送成功");
      } else {
        toast.error(`测试发送失败：${result.testResult.code}`);
      }
    },
    onError: (mutationError) => {
      const message = resolveError(mutationError);
      setError(message);
      toast.error(message);
    },
  });

  function startCreate() {
    setEditingId(null);
    setForm(buildInitialForm());
    setLastTestResult(null);
    setError("");
  }

  function startEdit(channel: NotificationChannel) {
    setEditingId(channel.id);
    setForm(mapChannelToForm(channel));
    setError("");
  }

  const channels = channelsQuery.data?.items ?? [];

  return (
    <div className="space-y-6">
      <PageHeader
        title="通知渠道"
        subtitle="维护企微群机器人渠道、业务域路由与测试发送。IM 继续通过 Outbox 异步派发。"
        actions={
          <Button type="button" variant="secondary" onClick={startCreate} data-testid="notification-channels-create">
            新建渠道
          </Button>
        }
      />

      {error ? (
        <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">{error}</p>
      ) : null}

      <div className="card-std space-y-4 p-6">
        <div className="flex items-center justify-between gap-3">
          <h3 className="text-base font-semibold text-zinc-900">渠道列表</h3>
          <p className="text-sm text-zinc-500">当前共 {channels.length} 条渠道配置</p>
        </div>

        {channelsQuery.isLoading ? <TableSkeleton columns={8} rows={4} /> : null}

        {channelsQuery.isError ? (
          <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
            {resolveError(channelsQuery.error)}
          </p>
        ) : null}

        {!channelsQuery.isLoading && !channelsQuery.isError ? (
          <div className="rounded-lg border border-zinc-200">
            <Table data-testid="notification-channels-table">
              <TableHeader>
                <tr>
                  <TableHead>名称</TableHead>
                  <TableHead>类型</TableHead>
                  <TableHead>模式</TableHead>
                  <TableHead>启用状态</TableHead>
                  <TableHead>业务域</TableHead>
                  <TableHead>通知类型数</TableHead>
                  <TableHead>角色范围</TableHead>
                  <TableHead>最近更新时间</TableHead>
                  <TableHead className="w-40">操作</TableHead>
                </tr>
              </TableHeader>
              <TableBody>
                {channels.length ? (
                  channels.map((channel) => (
                    <TableRow key={channel.id} data-testid="notification-channel-row">
                      <TableCell className="font-medium text-zinc-900">{channel.name}</TableCell>
                      <TableCell>{formatChannelType(channel.channelType)}</TableCell>
                      <TableCell>{formatMode(channel.configJson.mode)}</TableCell>
                      <TableCell>{channel.enabled ? "启用" : "停用"}</TableCell>
                      <TableCell className="max-w-xs text-xs text-zinc-600">
                        {formatSummary(channel.configJson.routing.domainScopes, domainLabelMap, "全部业务域")}
                      </TableCell>
                      <TableCell>{channel.configJson.routing.allowedTypes.length || "全部"}</TableCell>
                      <TableCell className="max-w-xs text-xs text-zinc-600">
                        {formatSummary(channel.configJson.routing.roleCodes, roleLabelMap, "全部角色")}
                      </TableCell>
                      <TableCell className="text-xs text-zinc-600">{formatDateTime(channel.updatedAt)}</TableCell>
                      <TableCell>
                        <div className="flex flex-wrap gap-2">
                          <Button
                            type="button"
                            size="sm"
                            variant="secondary"
                            onClick={() => startEdit(channel)}
                            data-testid="notification-channel-edit"
                          >
                            编辑
                          </Button>
                          <Button
                            type="button"
                            size="sm"
                            variant="secondary"
                            disabled={testMutation.isPending}
                            onClick={() => testMutation.mutate(channel)}
                            data-testid="notification-channel-test"
                          >
                            测试
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))
                ) : (
                  <TableRow>
                    <TableCell colSpan={9} className="py-4 text-center text-sm text-zinc-500">
                      暂无通知渠道，请先创建企微渠道。
                    </TableCell>
                  </TableRow>
                )}
              </TableBody>
            </Table>
          </div>
        ) : null}
      </div>

      <div className="grid gap-6 xl:grid-cols-[minmax(0,2fr)_minmax(320px,1fr)]">
        <div className="card-std space-y-4 p-6">
          <div className="flex items-center justify-between gap-3">
            <div>
              <h3 className="text-base font-semibold text-zinc-900">
                {editingId ? "编辑通知渠道" : "新建通知渠道"}
              </h3>
              <p className="text-sm text-zinc-500">
                通过角色 / 业务域 / 通知类型三维控制 IM 群路由，避免默认全量广播。
              </p>
            </div>
            {editingId ? (
              <Button type="button" variant="outline" onClick={startCreate}>
                切换到新建
              </Button>
            ) : null}
          </div>

          <div className="grid gap-4 md:grid-cols-2">
            <div className="space-y-2">
              <Label htmlFor="channelType">渠道类型</Label>
              <select
                id="channelType"
                className="select-std"
                value={form.channelType}
                disabled={Boolean(editingId)}
                onChange={(event) => setForm((prev) => ({ ...prev, channelType: event.target.value as "wecom" }))}
              >
                <option value="wecom">企微群机器人</option>
              </select>
            </div>

            <div className="space-y-2">
              <Label htmlFor="channelName">渠道名称</Label>
              <Input
                id="channelName"
                value={form.name}
                placeholder="采购经理群"
                onChange={(event) => setForm((prev) => ({ ...prev, name: event.target.value }))}
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="channelMode">模式</Label>
              <select
                id="channelMode"
                className="select-std"
                value={form.mode}
                onChange={(event) =>
                  setForm((prev) => ({
                    ...prev,
                    mode: event.target.value as NotificationChannelConfig["mode"],
                  }))
                }
              >
                <option value="mock">Mock</option>
                <option value="wecom_webhook">企微 Webhook</option>
              </select>
            </div>

            <div className="space-y-2">
              <Label htmlFor="timeoutMs">超时（毫秒）</Label>
              <Input
                id="timeoutMs"
                type="number"
                min={100}
                value={form.timeoutMs}
                onChange={(event) => setForm((prev) => ({ ...prev, timeoutMs: event.target.value }))}
              />
            </div>

            <div className="space-y-2 md:col-span-2">
              <Label htmlFor="webhookUrl">Webhook URL</Label>
              <Input
                id="webhookUrl"
                value={form.webhookUrl}
                placeholder={form.mode === "mock" ? "Mock 模式可留空" : "https://qyapi.weixin.qq.com/cgi-bin/webhook/send?..."}
                onChange={(event) => setForm((prev) => ({ ...prev, webhookUrl: event.target.value }))}
              />
            </div>

            <div className="space-y-2 md:col-span-2">
              <Label htmlFor="webhookSecret">Webhook Secret（可空）</Label>
              <Input
                id="webhookSecret"
                value={form.secret}
                placeholder="可选，配置后将参与签名"
                onChange={(event) => setForm((prev) => ({ ...prev, secret: event.target.value }))}
              />
            </div>
          </div>

          <label className="flex items-center gap-2 text-sm text-zinc-700">
            <input
              type="checkbox"
              checked={form.enabled}
              onChange={(event) => setForm((prev) => ({ ...prev, enabled: event.target.checked }))}
            />
            启用该渠道
          </label>

          <div className="grid gap-4 lg:grid-cols-3">
            <div className="space-y-3 rounded-lg border border-zinc-200 p-4">
              <div>
                <h4 className="text-sm font-semibold text-zinc-900">角色范围</h4>
                <p className="text-xs text-zinc-500">留空表示不限角色。</p>
              </div>
              <div className="space-y-2">
                {ROLE_OPTIONS.map((option) => (
                  <label key={option.value} className="flex items-center gap-2 text-sm text-zinc-700">
                    <input
                      type="checkbox"
                      checked={form.roleCodes.includes(option.value)}
                      onChange={() =>
                        setForm((prev) => ({
                          ...prev,
                          roleCodes: toggleSelection(prev.roleCodes, option.value),
                        }))
                      }
                    />
                    {option.label}
                  </label>
                ))}
              </div>
            </div>

            <div className="space-y-3 rounded-lg border border-zinc-200 p-4">
              <div>
                <h4 className="text-sm font-semibold text-zinc-900">业务域</h4>
                <p className="text-xs text-zinc-500">留空表示不限业务域。</p>
              </div>
              <div className="space-y-2">
                {DOMAIN_SCOPE_OPTIONS.map((option) => (
                  <label key={option.value} className="flex items-center gap-2 text-sm text-zinc-700">
                    <input
                      type="checkbox"
                      checked={form.domainScopes.includes(option.value)}
                      onChange={() =>
                        setForm((prev) => ({
                          ...prev,
                          domainScopes: toggleSelection(prev.domainScopes, option.value) as ChannelFormState["domainScopes"],
                        }))
                      }
                    />
                    {option.label}
                  </label>
                ))}
              </div>
            </div>

            <div className="space-y-3 rounded-lg border border-zinc-200 p-4">
              <div>
                <h4 className="text-sm font-semibold text-zinc-900">通知类型</h4>
                <p className="text-xs text-zinc-500">留空表示消费所有 IM 一期支持类型。</p>
              </div>
              <div className="max-h-72 space-y-2 overflow-auto pr-1">
                {NOTIFICATION_TYPE_OPTIONS.map((option) => (
                  <label key={option.value} className="flex items-center gap-2 text-sm text-zinc-700">
                    <input
                      type="checkbox"
                      checked={form.allowedTypes.includes(option.value)}
                      onChange={() =>
                        setForm((prev) => ({
                          ...prev,
                          allowedTypes: toggleSelection(prev.allowedTypes, option.value),
                        }))
                      }
                    />
                    {option.label}
                  </label>
                ))}
              </div>
            </div>
          </div>

          <div className="grid gap-4 md:grid-cols-2">
            <div className="space-y-2">
              <Label htmlFor="templateTitle">标题模板</Label>
              <Input
                id="templateTitle"
                value={form.title}
                onChange={(event) => setForm((prev) => ({ ...prev, title: event.target.value }))}
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="templateFooter">页脚模板</Label>
              <Input
                id="templateFooter"
                value={form.footer}
                onChange={(event) => setForm((prev) => ({ ...prev, footer: event.target.value }))}
              />
            </div>

            <div className="space-y-2 md:col-span-2">
              <Label htmlFor="templateBody">正文模板</Label>
              <Textarea
                id="templateBody"
                value={form.body}
                onChange={(event) => setForm((prev) => ({ ...prev, body: event.target.value }))}
              />
              <p className="text-xs text-zinc-500">一期支持变量：title、body、detailUrl、targetType、targetId、footer。</p>
            </div>
          </div>

          <div className="flex flex-wrap gap-3">
            <Button
              type="button"
              onClick={() => saveMutation.mutate()}
              disabled={saveMutation.isPending}
              data-testid="notification-channel-save"
            >
              {editingId ? "保存更新" : "创建渠道"}
            </Button>
            <Button type="button" variant="secondary" onClick={startCreate} disabled={saveMutation.isPending}>
              重置表单
            </Button>
          </div>
        </div>

        <div className="card-std space-y-4 p-6">
          <div>
            <h3 className="text-base font-semibold text-zinc-900">测试发送</h3>
            <p className="text-sm text-zinc-500">仅对已保存渠道执行同步测试，不写业务 Outbox。</p>
          </div>

          {lastTestResult ? (
            <div className="space-y-3 rounded-lg border border-zinc-200 bg-zinc-50 p-4 text-sm">
              <div className="flex flex-wrap items-center gap-2">
                <span className="font-medium text-zinc-900">渠道：</span>
                <span>{lastTestResult.channelName}</span>
              </div>
              <div className="flex flex-wrap items-center gap-2">
                <span className="font-medium text-zinc-900">结果：</span>
                <span className={lastTestResult.ok ? "text-emerald-600" : "text-red-600"}>
                  {lastTestResult.ok ? "成功" : "失败"}
                </span>
                <span className="text-zinc-500">code={lastTestResult.code}</span>
                {lastTestResult.skipped ? <span className="text-amber-600">（已跳过）</span> : null}
              </div>
              <div>
                <p className="mb-1 font-medium text-zinc-900">预览消息</p>
                <pre className="whitespace-pre-wrap rounded-lg bg-white p-3 text-xs text-zinc-700">
                  {lastTestResult.previewMessage ?? "<empty>"}
                </pre>
              </div>
              <div>
                <p className="mb-1 font-medium text-zinc-900">Provider 响应</p>
                <pre className="overflow-auto rounded-lg bg-white p-3 text-xs text-zinc-700">
                  {JSON.stringify(lastTestResult.response ?? null, null, 2)}
                </pre>
              </div>
            </div>
          ) : (
            <p className="rounded-lg border border-dashed border-zinc-200 px-3 py-4 text-sm text-zinc-500">
              从列表中选择一条渠道并点击“测试”，即可查看发送结果与消息预览。
            </p>
          )}
        </div>
      </div>
    </div>
  );
}