import { useCallback, useEffect, useRef, useState, type RefObject } from "react";
import type { Map as MapLibreMap } from "maplibre-gl";
import { Activity, ClipboardList, RadioTower, ReceiptText, RefreshCw, X } from "lucide-react";
import type { WorkbenchAccess } from "../api/request-context";
import { reverseGeocodePoint } from "../api/place-search-client";
import type { EventLocationAddressResolver } from "./use-event-location-address";
import { Button } from "@/shared/ui/button";
import { cn } from "@/shared/ui/cn";
import { Disclosure } from "@/shared/ui/disclosure";
import { Input } from "@/shared/ui/input";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/shared/ui/tabs";
import { ManagedTestResources } from "./managed-test-resources";
import { ScadaSystemSection } from "./scada-system-section";
import { WorkbenchNotice } from "../components/workbench-panel-ui";
import {
  PeripheralSampleClient,
  type PeripheralContext,
  type PeripheralWorkOrder
} from "./client";

const WORK_ORDER_DESCRIPTION = "录入业务工单并跟踪处理反馈，事件调查依据实际查询和现场记录开展。";

export function PeripheralSamplePanel({
  open,
  onClose,
  getAccessToken,
  mapReady,
  mapRef,
  onAgentTrigger,
  onOpenInvestigation
}: {
  open: boolean;
  onClose: () => void;
  getAccessToken?: WorkbenchAccess;
  mapReady: boolean;
  mapRef: RefObject<MapLibreMap | null>;
  onAgentTrigger?: (workOrder: PeripheralWorkOrder) => Promise<void>;
  onOpenInvestigation?: (taskId: string) => void;
}) {
  const clientRef = useRef(new PeripheralSampleClient(getAccessToken));
  const client = clientRef.current;
  const [context, setContext] = useState<PeripheralContext | null>(null);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [receiptRequestId, setReceiptRequestId] = useState("");
  const [refreshGeneration, setRefreshGeneration] = useState(0);
  const [scadaRefreshGeneration, setScadaRefreshGeneration] = useState(0);
  const [activeSystem, setActiveSystem] = useState<"work-orders" | "scada">("work-orders");
  const resolveEventAddress = useCallback<EventLocationAddressResolver>(async ([longitude, latitude], signal) => {
    const result = await reverseGeocodePoint(longitude, latitude, context?.project_id ?? null, getAccessToken, signal);
    return result.address.trim() || result.name;
  }, [context?.project_id, getAccessToken]);

  const refresh = useCallback(async () => {
    if (!client.configured) return;
    setBusy(true);
    setError(null);
    try {
      setContext(await client.getContext());
      setRefreshGeneration((current) => current + 1);
    } catch (nextError) {
      setError(errorMessage(nextError));
    } finally {
      setBusy(false);
    }
  }, [client]);

  useEffect(() => {
    if (open) void refresh();
  }, [open, refresh]);

  if (!open) return null;

  return (
    <aside
      aria-label="外围系统"
      className="workbench-shadcn-surface bg-background text-foreground absolute bottom-3 right-3 top-16 z-[61] flex w-[min(680px,calc(100%-1.5rem))] flex-col overflow-hidden overscroll-contain rounded-2xl border shadow-lg"
    >
      <header className="flex min-h-16 shrink-0 items-center gap-3 border-b border-border px-4 sm:px-5">
        <span className="grid h-8 w-8 place-items-center rounded-lg bg-muted text-foreground">
          <RadioTower size={17} />
        </span>
        <div className="min-w-0 flex-1">
          <h2 className="text-sm font-semibold">外围系统</h2>
          <p className="text-xs text-muted-foreground">工单协同与 SCADA 时段演示</p>
        </div>
        <Button
          size="icon"
          variant="ghost"
          aria-label="刷新当前外围系统"
          onClick={() => {
            if (activeSystem === "work-orders") void refresh();
            else setScadaRefreshGeneration((current) => current + 1);
          }}
          disabled={activeSystem === "work-orders" && busy}
        >
          <RefreshCw size={16} className={cn(activeSystem === "work-orders" && busy && "animate-spin")} />
        </Button>
        <Button size="icon" variant="ghost" aria-label="关闭外围系统" onClick={onClose}>
          <X size={17} />
        </Button>
      </header>

      <Tabs
        value={activeSystem}
        onValueChange={(value) => setActiveSystem(value as "work-orders" | "scada")}
        className="flex min-h-0 flex-1 flex-col"
      >
        <div className="shrink-0 border-b border-border px-3 py-2 sm:px-4">
          <TabsList aria-label="外围系统类型" className="grid w-full grid-cols-2 bg-muted">
            <TabsTrigger value="work-orders"><ClipboardList size={14} />工单系统</TabsTrigger>
            <TabsTrigger value="scada"><Activity size={14} />SCADA 系统</TabsTrigger>
          </TabsList>
        </div>

        <TabsContent value="work-orders" className="min-h-0 flex-1 overflow-y-auto overscroll-contain p-3 sm:p-4">
          <div className="mb-3 grid gap-2">
            <div className="space-y-1 border-b border-border pb-4 text-xs leading-5">
              <p className="font-medium">外围工单系统</p>
              <p className="text-muted-foreground">{WORK_ORDER_DESCRIPTION}</p>
            </div>
            {!client.configured ? (
              <WorkbenchNotice tone="warning">
                未配置 TJWATER_PERIPHERAL_SAMPLE_API_BASE_URL，当前不会连接外围工单服务。
              </WorkbenchNotice>
            ) : null}
            {error ? <WorkbenchNotice role="alert" tone="danger">{error}</WorkbenchNotice> : null}
            {client.configured && !context ? (
              <WorkbenchNotice role="status" tone="neutral">正在核验项目授权与工单接口。</WorkbenchNotice>
            ) : null}
          </div>

          {context ? (
            <div className="space-y-3">
              <ManagedTestResources
                key={context.project_id}
                client={client}
                canWrite={context.can_write}
                capabilities={context.managed_resources}
                refreshGeneration={refreshGeneration}
                mapReady={mapReady}
                mapRef={mapRef}
                resolveAddress={resolveEventAddress}
                onAgentTrigger={onAgentTrigger}
              />
              <Disclosure
                label={<span className="inline-flex items-center gap-2"><ReceiptText size={14} />按 request_id 找回提交结果</span>}
                className="rounded-lg border border-border bg-background px-3.5"
              >
                <p className="pb-2 text-xs leading-5 text-muted-foreground">
                  结果未知时只查询原请求，不会重复创建或更新工单。
                </p>
                <div className="flex gap-2 pb-3">
                  <Input
                    aria-label="提交请求号"
                    value={receiptRequestId}
                    onChange={(event) => setReceiptRequestId(event.target.value.trim())}
                    placeholder="request_id"
                    className="h-10 min-w-0 flex-1 rounded-lg border-border bg-background font-mono text-xs md:text-xs"
                  />
                  <Button
                    variant="outline"
                    disabled={!receiptRequestId || busy}
                    onClick={async () => {
                      setBusy(true);
                      setError(null);
                      try {
                        await client.getReceipt(receiptRequestId);
                        setError("回执已确认，请刷新工单列表查看最新状态。");
                      } catch (nextError) {
                        setError(errorMessage(nextError));
                      } finally {
                        setBusy(false);
                      }
                    }}
                  >查询</Button>
                </div>
              </Disclosure>
            </div>
          ) : null}
        </TabsContent>

        <TabsContent value="scada" className="min-h-0 flex-1 overflow-y-auto overscroll-contain p-3 sm:p-4">
          <ScadaSystemSection
            active={activeSystem === "scada"}
            getAccessToken={getAccessToken}
            refreshGeneration={scadaRefreshGeneration}
            onOpenInvestigation={onOpenInvestigation}
          />
        </TabsContent>
      </Tabs>
    </aside>
  );
}

function errorMessage(error: unknown) {
  return error instanceof Error ? error.message : "外围工单请求失败";
}