import { useState } from "react";
import { dismissMapNotice, showMapNotice, type MapNoticeOptions } from "@/features/map/core";
import { Button } from "@/shared/ui/button";

const samples = [
  { key: "info", label: "信息通知", tone: "info", title: "地图视图已更新", message: "已切换到当前项目的管网视图。", lifetime: "3.2 秒后关闭" },
  { key: "success", label: "成功通知", tone: "success", title: "操作已完成", message: "当前管网视图已导出，可以继续分析。", lifetime: "3.2 秒后关闭" },
  { key: "warning", label: "警告通知", tone: "warning", title: "部分监测数据延迟", message: "最新读数尚未到达，请稍后查看。", lifetime: "手动关闭" },
  { key: "error", label: "错误通知", tone: "error", title: "管网数据加载失败", message: "暂时无法连接数据源，请检查连接后重试。", lifetime: "手动关闭" },
  { key: "loading", label: "加载通知", tone: "loading", title: "正在加载管网", message: "正在准备图层和监测数据，请稍候。", lifetime: "等待完成" }
] satisfies (MapNoticeOptions & { key: string; label: string; lifetime: string })[];

const extraKeys = ["report", "task", "long", ...Array.from({ length: 6 }, (_, index) => `batch-${index}`)];
const noticeId = (key: string) => `dev-notice:${key}`;

export function NoticeDevTools() {
  const [feedback, setFeedback] = useState("");
  const [loading, setLoading] = useState(false);

  function showLinked(key: string, target: "报告" | "任务", message?: string) {
    showMapNotice({
      id: noticeId(key),
      tone: target === "报告" ? "success" : "warning",
      title: `${target === "报告" ? "调查报告已更新" : "调查任务待处理"} · 测试`,
      message: message ?? (target === "报告"
        ? "城南片区压力异常调查报告已更新，可查看分析结论与处置建议。"
        : "新收到一项管网异常调查任务，请查看现场情况与待办事项。"),
      actionLabel: `查看${target}`,
      onAction: () => setFeedback(`已触发“查看${target}”测试操作，通知仍保留。`)
    });
  }

  function clearSamples() {
    [...samples.map((sample) => sample.key), ...extraKeys].forEach((key) => dismissMapNotice(noticeId(key)));
    setLoading(false);
    setFeedback("已清除测试通知。");
  }

  return (
    <section aria-label="通知测试" className="space-y-5">
      <p className="text-xs leading-5 text-muted-foreground">
        本地样例，仅当前页面生效。报告和任务入口只记录点击反馈，不创建真实业务数据。
      </p>
      <div className="space-y-2">
        <h3 className="text-xs font-semibold">通知类型</h3>
        <div className="grid grid-cols-2 gap-2">
          {samples.map(({ key, label, lifetime, ...options }) => (
            <Button key={key} type="button" variant="outline" aria-label={`测试${label}`}
              className="h-auto min-h-14 flex-col items-start gap-1 px-3 py-2 text-xs"
              onClick={() => {
                showMapNotice({ ...options, id: noticeId(key), title: `${options.title} · 测试` });
                if (key === "loading") setLoading(true);
              }}>
              <span>{label}</span>
              <span className="font-normal text-muted-foreground">{lifetime}</span>
            </Button>
          ))}
        </div>
        <Button type="button" variant="ghost" size="sm" disabled={!loading}
          onClick={() => {
            showMapNotice({ id: noticeId("loading"), tone: "success", title: "管网加载完成 · 测试", message: "图层和监测数据已准备就绪。" });
            setLoading(false);
          }}>模拟加载完成</Button>
      </div>
      <div className="space-y-2 border-t border-border pt-4">
        <h3 className="text-xs font-semibold">报告与任务入口</h3>
        <p className="text-xs leading-5 text-muted-foreground">带操作入口的通知保留至手动关闭，点击查看后继续保留。</p>
        <div className="flex flex-wrap gap-2">
          <Button type="button" size="sm" variant="outline" onClick={() => showLinked("report", "报告")}>测试报告通知</Button>
          <Button type="button" size="sm" variant="outline" onClick={() => showLinked("task", "任务")}>测试任务通知</Button>
        </div>
      </div>
      <div className="space-y-2 border-t border-border pt-4">
        <h3 className="text-xs font-semibold">布局与堆叠</h3>
        <div className="flex flex-wrap gap-2">
          <Button type="button" size="sm" variant="outline" onClick={() => showLinked("long", "报告",
            "城南供水片区夜间压力持续下降，多处监测点出现关联异常。调查报告已整理受影响管段、关键监测读数、候选原因和后续核查建议，请结合现场情况查看并安排处置。关联编号：SCADA-PRESSURE-20261107-REPORT-000128。")}>测试长文本通知</Button>
          <Button type="button" size="sm" variant="outline" onClick={() => {
            Array.from({ length: 6 }, (_, index) => showLinked(`batch-${index}`, index % 2 ? "任务" : "报告", `第 ${index + 1} 条测试通知。手动关闭当前通知后，可继续查看其余通知。`));
          }}>连续 6 条通知</Button>
        </div>
      </div>
      <Button type="button" variant="outline" size="sm" onClick={clearSamples}>清除测试通知</Button>
      {feedback ? <p role="status" className="text-xs leading-5 text-muted-foreground">{feedback}</p> : null}
    </section>
  );
}