'use client';

import { useEffect, useMemo, useRef, useState } from 'react';
import { useTranslation } from '@/hooks/useTranslation';
import { toast } from '@/lib/toast';
import {
  getAdminAnalytics,
  getAdminInstances,
  exportAdminInstances,
  getAdminExports,
  getAdminSettings,
  updateAdminSettings,
  getApprovalHistory,
  type AdminAnalyticsResponse,
  type AdminInstanceItem,
  type AdminExportItem,
  type AdminSettings,
} from '@/services/api/approval';
import {
  getFormDefinitions,
  getFormDefinitionByKey,
  getDesignData,
  getFormInstance,
  type FormDefinition,
} from '@/services/api/form-management';
import { getOrganizations, getDepartmentTree, type Organization, type Department } from '@/services/api/organization';
import { FormRenderer } from '@features/forms/components/FormRenderer';
import { ApprovalTimeline } from '@/components/ApprovalTimeline';
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  Tooltip,
} from 'recharts';
import {
  Button,
} from '@/components/ui/button';
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { Input } from '@/components/ui/input';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Download, HelpCircle, RefreshCw, Settings2, X } from 'lucide-react';
import { UserSelector, type UserInfo } from '@/components/UserSelector';

const STATUS_OPTIONS = [
  { value: 'all', labelKey: 'all' },
  { value: 'RUNNING', labelKey: 'running' },
  { value: 'SUSPENDED', labelKey: 'suspended' },
  { value: 'APPROVED', labelKey: 'approved' },
  { value: 'REJECTED', labelKey: 'rejected' },
  { value: 'WITHDRAWN', labelKey: 'withdrawn' },
  { value: 'TERMINATED', labelKey: 'terminated' },
  { value: 'FAILED', labelKey: 'failed' },
  { value: 'SUBMITTED', labelKey: 'submitted' },
  { value: 'PENDING_APPROVAL', labelKey: 'pending_approval' },
  { value: 'CANCELLED', labelKey: 'cancelled' },
];

const APPROVAL_REQUIRED_OPTIONS = [
  { value: 'all', labelKey: 'all' },
  { value: 'true', labelKey: 'approvalRequired' },
  { value: 'false', labelKey: 'approvalNotRequired' },
];

export function AdminAnalyticsPanel() {
  const { t, locale } = useTranslation();
  const [loading, setLoading] = useState(false);
  const [analytics, setAnalytics] = useState<AdminAnalyticsResponse | null>(null);
  const [instances, setInstances] = useState<AdminInstanceItem[]>([]);
  const [exports, setExports] = useState<AdminExportItem[]>([]);
  const [settings, setSettings] = useState<AdminSettings | null>(null);
  const [forms, setForms] = useState<FormDefinition[]>([]);
  const [organizations, setOrganizations] = useState<Organization[]>([]);
  const [departments, setDepartments] = useState<Department[]>([]);
  const [settingsOpen, setSettingsOpen] = useState(false);
  const [filterGuideOpen, setFilterGuideOpen] = useState(false);
  const [retentionDraft, setRetentionDraft] = useState(30);
  const [exportDialogOpen, setExportDialogOpen] = useState(false);
  const [exportFormat, setExportFormat] = useState<'xlsx' | 'csv'>('xlsx');
  const trendChartRef = useRef<HTMLDivElement | null>(null);
  const [trendWidth, setTrendWidth] = useState(0);
  const [detailOpen, setDetailOpen] = useState(false);
  const [detailLoading, setDetailLoading] = useState(false);
  const [detailItem, setDetailItem] = useState<AdminInstanceItem | null>(null);
  const [detailFormSchema, setDetailFormSchema] = useState<Record<string, unknown> | null>(null);
  const [detailFormUiSchema, setDetailFormUiSchema] = useState<Record<string, unknown>>({});
  const [detailFormData, setDetailFormData] = useState<Record<string, unknown> | null>(null);
  const [detailHistory, setDetailHistory] = useState<any[] | null>(null);
  const [submitterSelectorOpen, setSubmitterSelectorOpen] = useState(false);
  const [selectedSubmitter, setSelectedSubmitter] = useState<UserInfo | null>(null);

  const [page, setPage] = useState(1);
  const [limit, setLimit] = useState(20);
  const [totalPages, setTotalPages] = useState(1);
  const filtersInitializedRef = useRef(false);

  const [filters, setFilters] = useState({
    formKey: 'all',
    approvalRequired: 'all',
    status: 'all',
    timeFrom: '',
    timeTo: '',
    keyword: '',
    organizationId: 'all',
    departmentId: 'all',
    submitterId: '',
  });

  const analyticsParams = useMemo(() => {
    return {
      businessType: 'FORM_INSTANCE',
      formKey: filters.formKey !== 'all' ? filters.formKey : undefined,
      approvalRequired: filters.approvalRequired !== 'all'
        ? filters.approvalRequired === 'true'
        : undefined,
      status: filters.status !== 'all' ? filters.status : undefined,
      timeFrom: filters.timeFrom || undefined,
      timeTo: filters.timeTo || undefined,
      keyword: filters.keyword.trim() || undefined,
      organizationId: filters.organizationId !== 'all' ? filters.organizationId : undefined,
      departmentId: filters.departmentId !== 'all' ? filters.departmentId : undefined,
      submitterId: filters.submitterId || undefined,
    };
  }, [filters]);

  useEffect(() => {
    loadBaseData();
    loadSettings();
    loadAnalytics();
  }, []);

  useEffect(() => {
    if (typeof window === 'undefined') {
      return;
    }
    const params = new URLSearchParams(window.location.search);
    if (!params.has('noFont')) {
      return;
    }
    const style = document.createElement('style');
    style.textContent = '*{font-family: Arial, sans-serif !important;}';
    document.head.appendChild(style);
    if (document.fonts) {
      const proto = Object.getPrototypeOf(document.fonts);
      const readyDesc = Object.getOwnPropertyDescriptor(proto, 'ready');
      const statusDesc = Object.getOwnPropertyDescriptor(proto, 'status');
      if (readyDesc?.configurable) {
        Object.defineProperty(proto, 'ready', { get: () => Promise.resolve(), configurable: true });
      }
      if (statusDesc?.configurable) {
        Object.defineProperty(proto, 'status', { get: () => 'loaded', configurable: true });
      }
    }
    return () => {
      style.remove();
    };
  }, []);

  useEffect(() => {
    const node = trendChartRef.current;
    if (!node || typeof ResizeObserver === 'undefined') {
      return;
    }

    const observer = new ResizeObserver((entries) => {
      const width = Math.floor(entries[0]?.contentRect.width || 0);
      if (width > 0) {
        setTrendWidth(width);
      }
    });

    observer.observe(node);

    return () => {
      observer.disconnect();
    };
  }, []);

  useEffect(() => {
    if (!filtersInitializedRef.current) {
      filtersInitializedRef.current = true;
      return;
    }
    setPage(1);
    loadAnalytics(1, limit);
  }, [
    filters.formKey,
    filters.approvalRequired,
    filters.status,
    filters.organizationId,
    filters.departmentId,
    filters.timeFrom,
    filters.timeTo,
    limit,
    filters.submitterId,
  ]);

  useEffect(() => {
    if (filters.organizationId !== 'all') {
      loadDepartments(filters.organizationId);
    } else {
      setDepartments([]);
      setFilters((prev) => ({ ...prev, departmentId: 'all' }));
    }
  }, [filters.organizationId]);

  const loadBaseData = async () => {
    try {
      const [formRes, orgRes] = await Promise.all([
        getFormDefinitions({ status: 'PUBLISHED', limit: 100 }),
        getOrganizations({ page: 1, limit: 200 }),
      ]);
      setForms(formRes.items || []);
      setOrganizations(orgRes.items || []);
    } catch (error) {
      console.error('[AdminAnalytics] Failed to load base data', error);
      toast.error(t.common.error);
    }
  };

  const loadSettings = async () => {
    try {
      const response = await getAdminSettings();
      setSettings(response);
      setRetentionDraft(response.exportRetentionDays);
    } catch (error) {
      console.error('[AdminAnalytics] Failed to load settings', error);
    }
  };

  const loadDepartments = async (organizationId: string) => {
    try {
      const tree = await getDepartmentTree(organizationId);
      const flatten = (nodes: Department[]): Department[] =>
        nodes.flatMap((node) => [node, ...(node.children ? flatten(node.children) : [])]);
      setDepartments(flatten(tree));
    } catch (error) {
      console.error('[AdminAnalytics] Failed to load departments', error);
    }
  };

  const loadAnalytics = async (nextPage = page, nextLimit = limit) => {
    setLoading(true);
    try {
      const [analyticsRes, instancesRes, exportsRes] = await Promise.all([
        getAdminAnalytics(analyticsParams),
        getAdminInstances({ ...analyticsParams, page: nextPage, limit: nextLimit }),
        getAdminExports(),
      ]);
      setAnalytics(analyticsRes);
      setInstances(instancesRes.items || []);
      setTotalPages(instancesRes.totalPages || 1);
      setExports(exportsRes || []);
    } catch (error) {
      console.error('[AdminAnalytics] Load data error', error);
      toast.error(t.common.error);
    } finally {
      setLoading(false);
    }
  };

  const handleSearch = () => {
    if (page === 1) {
      loadAnalytics(1, limit);
      return;
    }
    setPage(1);
  };

  const handlePageChange = (nextPage: number) => {
    setPage(nextPage);
    loadAnalytics(nextPage, limit);
  };

  const handleSubmitterSelect = (users: UserInfo[]) => {
    const user = users[0];
    if (user) {
      setSelectedSubmitter(user);
      setFilters((prev) => ({ ...prev, submitterId: user.id }));
    }
    setSubmitterSelectorOpen(false);
  };

  const handleSubmitterClear = () => {
    setSelectedSubmitter(null);
    setFilters((prev) => ({ ...prev, submitterId: '' }));
  };

  const closeDetailDrawer = () => {
    setDetailOpen(false);
  };

  const loadDetail = async (item: AdminInstanceItem) => {
    setDetailOpen(true);
    setDetailItem(item);
    setDetailLoading(true);
    setDetailFormSchema(null);
    setDetailFormUiSchema({});
    setDetailFormData(null);
    setDetailHistory(null);

    try {
      if (item.formKey) {
        const formDef = await getFormDefinitionByKey(item.formKey);
        const designData = await getDesignData(formDef.id);
        setDetailFormSchema((designData.formVersion?.schema as Record<string, unknown>) || null);
        setDetailFormUiSchema((designData.formVersion?.uiSchema as Record<string, unknown>) || {});
      }
    } catch (error) {
      console.error('[AdminAnalytics] Failed to load form design', error);
    }

    try {
      const formInstance = await getFormInstance(item.businessInstanceId);
      setDetailFormData((formInstance?.data as Record<string, unknown>) || {});
    } catch (error) {
      console.error('[AdminAnalytics] Failed to load form instance', error);
    }

    try {
      if (item.instanceId) {
        const history = await getApprovalHistory(item.instanceId);
        setDetailHistory(history.items || []);
      } else {
        setDetailHistory([]);
      }
    } catch (error) {
      console.error('[AdminAnalytics] Failed to load approval history', error);
      setDetailHistory([]);
    } finally {
      setDetailLoading(false);
    }
  };

  const handleExport = async (format = exportFormat) => {
    try {
      const response = await exportAdminInstances({ ...analyticsParams, format });
      toast.success(t.approvals.adminAnalytics.exportQueued.replace('{id}', response.taskId));
      const exportList = await getAdminExports();
      setExports(exportList);
      setExportDialogOpen(false);
    } catch (error: any) {
      console.error('[AdminAnalytics] Export error', error);
      toast.error(error?.message || t.common.error);
    }
  };

  const handleRefreshExports = async () => {
    try {
      const exportList = await getAdminExports();
      setExports(exportList);
    } catch (error) {
      console.error('[AdminAnalytics] Refresh exports error', error);
    }
  };

  const handleSaveSettings = async () => {
    try {
      const updated = await updateAdminSettings({ exportRetentionDays: retentionDraft });
      setSettings(updated);
      setSettingsOpen(false);
      toast.success(t.approvals.adminAnalytics.settingsSaved);
    } catch (error: any) {
      console.error('[AdminAnalytics] Save settings error', error);
      toast.error(error?.message || t.common.error);
    }
  };

  const statusLabel = (status: string) => {
    const mapping = t.approvals.adminAnalytics.statuses as Record<string, string>;
    return mapping[status.toLowerCase()] || status;
  };

  const exportStatusLabel = (status: string) => {
    const mapping = t.approvals.adminAnalytics.exportStatuses as Record<string, string>;
    return mapping[status.toLowerCase()] || status;
  };

  const exportFormatLabels = t.approvals.adminAnalytics.exportFormats || {
    xlsx: 'XLSX',
    csv: 'CSV',
  };
  const filterGuideItems = [
    {
      label: t.approvals.adminAnalytics.filters.formLabel,
      hint: t.approvals.adminAnalytics.filters.formHint,
    },
    {
      label: t.approvals.adminAnalytics.filters.approvalLabel,
      hint: t.approvals.adminAnalytics.filters.approvalHint,
    },
    {
      label: t.approvals.adminAnalytics.filters.statusLabel,
      hint: t.approvals.adminAnalytics.filters.statusHint,
    },
    {
      label: t.approvals.adminAnalytics.filters.organizationLabel,
      hint: t.approvals.adminAnalytics.filters.organizationHint,
    },
    {
      label: t.approvals.adminAnalytics.filters.departmentLabel,
      hint: t.approvals.adminAnalytics.filters.departmentHint,
    },
    {
      label: t.approvals.adminAnalytics.filters.submitterLabel,
      hint: t.approvals.adminAnalytics.filters.submitterHint,
    },
    {
      label: `${t.approvals.adminAnalytics.filters.timeFromLabel} / ${t.approvals.adminAnalytics.filters.timeToLabel}`,
      hint: `${t.approvals.adminAnalytics.filters.timeFromHint}；${t.approvals.adminAnalytics.filters.timeToHint}`,
    },
    {
      label: t.approvals.adminAnalytics.filters.keywordLabel,
      hint: t.approvals.adminAnalytics.filters.keywordHint,
    },
  ];

  return (
    <div className="space-y-6">
      <Card className="border-[#e5e6eb]">
        <CardHeader className="pb-3">
          <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
            <div>
              <CardTitle className="text-lg font-semibold text-[#1d2129]">
                {t.approvals.adminAnalytics.title}
              </CardTitle>
              <p className="text-sm text-[#646a73]">
                {t.approvals.adminAnalytics.subtitle}
              </p>
            </div>
            <div className="flex flex-wrap items-center gap-2">
              <Button variant="outline" size="sm" onClick={() => loadAnalytics()}>
                <RefreshCw className="mr-2 h-4 w-4" />
                {t.common.refresh}
              </Button>
              <Button variant="outline" size="sm" onClick={() => setFilterGuideOpen(true)}>
                <HelpCircle className="mr-2 h-4 w-4" />
                {t.approvals.adminAnalytics.filterGuide}
              </Button>
              <Button variant="outline" size="sm" onClick={() => setSettingsOpen(true)}>
                <Settings2 className="mr-2 h-4 w-4" />
                {t.approvals.adminAnalytics.settings}
              </Button>
              <Button size="sm" onClick={() => setExportDialogOpen(true)}>
                <Download className="mr-2 h-4 w-4" />
                {t.approvals.adminAnalytics.export}
              </Button>
            </div>
          </div>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
            <div className="space-y-1">
              <p className="text-sm font-medium text-[#4e5969]">{t.approvals.adminAnalytics.filters.formLabel}</p>
              <Select
                value={filters.formKey}
                onValueChange={(value) => setFilters((prev) => ({ ...prev, formKey: value }))}
              >
                <SelectTrigger>
                  <SelectValue placeholder={t.approvals.adminAnalytics.filters.formPlaceholder} />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">{t.common.all}</SelectItem>
                  {forms.map((form) => (
                    <SelectItem key={form.key} value={form.key}>
                      {form.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
              <p className="text-xs text-[#86909c]">{t.approvals.adminAnalytics.filters.formHint}</p>
            </div>

            <div className="space-y-1">
              <p className="text-sm font-medium text-[#4e5969]">{t.approvals.adminAnalytics.filters.approvalLabel}</p>
              <Select
                value={filters.approvalRequired}
                onValueChange={(value) => setFilters((prev) => ({ ...prev, approvalRequired: value }))}
              >
                <SelectTrigger>
                  <SelectValue placeholder={t.approvals.adminAnalytics.filters.approvalPlaceholder} />
                </SelectTrigger>
                <SelectContent>
                  {APPROVAL_REQUIRED_OPTIONS.map((option) => (
                    <SelectItem key={option.value} value={option.value}>
                      {t.approvals.adminAnalytics.filters[option.labelKey]}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
              <p className="text-xs text-[#86909c]">{t.approvals.adminAnalytics.filters.approvalHint}</p>
            </div>

            <div className="space-y-1">
              <p className="text-sm font-medium text-[#4e5969]">{t.approvals.adminAnalytics.filters.statusLabel}</p>
              <Select
                value={filters.status}
                onValueChange={(value) => setFilters((prev) => ({ ...prev, status: value }))}
              >
                <SelectTrigger>
                  <SelectValue placeholder={t.approvals.adminAnalytics.filters.statusPlaceholder} />
                </SelectTrigger>
                <SelectContent>
                  {STATUS_OPTIONS.map((option) => (
                    <SelectItem key={option.value} value={option.value}>
                      {t.approvals.adminAnalytics.statuses[option.labelKey]}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
              <p className="text-xs text-[#86909c]">{t.approvals.adminAnalytics.filters.statusHint}</p>
            </div>

            <div className="space-y-1">
              <p className="text-sm font-medium text-[#4e5969]">{t.approvals.adminAnalytics.filters.organizationLabel}</p>
              <Select
                value={filters.organizationId}
                onValueChange={(value) => setFilters((prev) => ({ ...prev, organizationId: value }))}
              >
                <SelectTrigger>
                  <SelectValue placeholder={t.approvals.adminAnalytics.filters.organizationPlaceholder} />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">{t.common.all}</SelectItem>
                  {organizations.map((org) => (
                    <SelectItem key={org.id} value={org.id}>
                      {org.displayName || org.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
              <p className="text-xs text-[#86909c]">{t.approvals.adminAnalytics.filters.organizationHint}</p>
            </div>

            <div className="space-y-1">
              <p className="text-sm font-medium text-[#4e5969]">{t.approvals.adminAnalytics.filters.departmentLabel}</p>
              <Select
                value={filters.departmentId}
                onValueChange={(value) => setFilters((prev) => ({ ...prev, departmentId: value }))}
              >
                <SelectTrigger>
                  <SelectValue placeholder={t.approvals.adminAnalytics.filters.departmentPlaceholder} />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">{t.common.all}</SelectItem>
                  {departments.map((dept) => (
                    <SelectItem key={dept.id} value={dept.id}>
                      {dept.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
              <p className="text-xs text-[#86909c]">{t.approvals.adminAnalytics.filters.departmentHint}</p>
            </div>

            <div className="space-y-1">
              <p className="text-sm font-medium text-[#4e5969]">{t.approvals.adminAnalytics.filters.submitterLabel}</p>
              <div className="flex gap-2">
                <Button
                  variant="outline"
                  className="flex-1 justify-between"
                  onClick={() => setSubmitterSelectorOpen(true)}
                >
                  <span>
                    {selectedSubmitter?.displayName || t.approvals.adminAnalytics.filters.submitterPlaceholder}
                  </span>
                </Button>
                <Button
                  variant="outline"
                  onClick={handleSubmitterClear}
                  disabled={!selectedSubmitter}
                >
                  {t.approvals.adminAnalytics.filters.submitterClear}
                </Button>
              </div>
              <p className="text-xs text-[#86909c]">{t.approvals.adminAnalytics.filters.submitterHint}</p>
            </div>

            <div className="space-y-1">
              <p className="text-sm font-medium text-[#4e5969]">{t.approvals.adminAnalytics.filters.timeFromLabel}</p>
              <Input
                type="date"
                value={filters.timeFrom}
                onChange={(event) => setFilters((prev) => ({ ...prev, timeFrom: event.target.value }))}
              />
              <p className="text-xs text-[#86909c]">{t.approvals.adminAnalytics.filters.timeFromHint}</p>
            </div>

            <div className="space-y-1">
              <p className="text-sm font-medium text-[#4e5969]">{t.approvals.adminAnalytics.filters.timeToLabel}</p>
              <Input
                type="date"
                value={filters.timeTo}
                onChange={(event) => setFilters((prev) => ({ ...prev, timeTo: event.target.value }))}
              />
              <p className="text-xs text-[#86909c]">{t.approvals.adminAnalytics.filters.timeToHint}</p>
            </div>

            <div className="space-y-1">
              <p className="text-sm font-medium text-[#4e5969]">{t.approvals.adminAnalytics.filters.keywordLabel}</p>
              <div className="flex gap-2">
                <Input
                  placeholder={t.approvals.adminAnalytics.filters.keywordPlaceholder}
                  value={filters.keyword}
                  onChange={(event) => setFilters((prev) => ({ ...prev, keyword: event.target.value }))}
                />
                <Button variant="outline" onClick={handleSearch}>
                  {t.common.search}
                </Button>
              </div>
              <p className="text-xs text-[#86909c]">{t.approvals.adminAnalytics.filters.keywordHint}</p>
            </div>
          </div>
        </CardContent>
      </Card>

      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-5">
        <KpiCard
          label={t.approvals.adminAnalytics.kpi.totalSubmissions}
          value={analytics?.summary.totalSubmissions ?? 0}
        />
        <KpiCard
          label={t.approvals.adminAnalytics.kpi.approvalRate}
          value={`${analytics?.summary.approvalRate ?? 0}%`}
        />
        <KpiCard
          label={t.approvals.adminAnalytics.kpi.rejectRate}
          value={`${analytics?.summary.rejectRate ?? 0}%`}
        />
        <KpiCard
          label={t.approvals.adminAnalytics.kpi.avgDuration}
          value={formatDuration(analytics?.summary.avgDurationMs || 0)}
        />
        <KpiCard
          label={t.approvals.adminAnalytics.kpi.runningCount}
          value={analytics?.summary.runningCount ?? 0}
        />
      </div>

      <div className="grid gap-4 lg:grid-cols-2">
        <Card className="border-[#e5e6eb]">
          <CardHeader>
            <CardTitle className="text-base font-semibold text-[#1d2129]">
              {t.approvals.adminAnalytics.trendTitle}
            </CardTitle>
          </CardHeader>
          <CardContent className="h-72">
            <div ref={trendChartRef} className="h-full">
              {analytics?.trends?.length ? (
                trendWidth > 0 ? (
                  <LineChart width={trendWidth} height={260} data={analytics.trends}>
                    <XAxis dataKey="date" tickLine={false} axisLine={false} />
                    <YAxis tickLine={false} axisLine={false} />
                    <Tooltip />
                    <Line type="monotone" dataKey="submissions" stroke="#3370FF" strokeWidth={2} />
                    <Line type="monotone" dataKey="approvals" stroke="#00B42A" strokeWidth={2} />
                    <Line type="monotone" dataKey="rejections" stroke="#F53F3F" strokeWidth={2} />
                  </LineChart>
                ) : (
                  <div className="flex h-full items-center justify-center text-sm text-[#646a73]">
                    {t.common.loading}
                  </div>
                )
              ) : (
                <div className="flex h-full items-center justify-center text-sm text-[#646a73]">
                  {t.common.noData}
                </div>
              )}
            </div>
          </CardContent>
        </Card>

        <Card className="border-[#e5e6eb]">
          <CardHeader>
            <CardTitle className="text-base font-semibold text-[#1d2129]">
              {t.approvals.adminAnalytics.distributionTitle}
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            {analytics?.distribution?.length ? (
              analytics.distribution.slice(0, 6).map((item) => (
                <div key={item.formKey} className="flex items-center justify-between text-sm">
                  <span className="text-[#4e5969]">{item.formName}</span>
                  <span className="text-[#1d2129] font-medium">{item.count}</span>
                </div>
              ))
            ) : (
              <div className="text-sm text-[#646a73]">{t.common.noData}</div>
            )}
          </CardContent>
        </Card>
      </div>

      <Card className="border-[#e5e6eb]">
        <CardHeader>
          <CardTitle className="text-base font-semibold text-[#1d2129]">
            {t.approvals.adminAnalytics.instancesTitle}
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead className="bg-[#fafafa] text-[#666]">
                <tr>
                  <th className="px-3 py-2 text-left">{t.approvals.adminAnalytics.table.form}</th>
                  <th className="px-3 py-2 text-left">{t.approvals.adminAnalytics.table.submitter}</th>
                  <th className="px-3 py-2 text-left">{t.approvals.adminAnalytics.table.status}</th>
                  <th className="px-3 py-2 text-left">{t.approvals.adminAnalytics.table.node}</th>
                  <th className="px-3 py-2 text-left">{t.approvals.adminAnalytics.table.time}</th>
                  <th className="px-3 py-2 text-left">{t.approvals.adminAnalytics.table.duration}</th>
                </tr>
              </thead>
              <tbody>
                {loading && (
                  <tr>
                    <td className="px-3 py-6 text-center text-[#86909c]" colSpan={6}>
                      {t.common.loading}
                    </td>
                  </tr>
                )}
                {instances.map((item) => (
                  <tr
                    key={item.businessInstanceId}
                    className="cursor-pointer border-b last:border-b-0 hover:bg-gray-50"
                    onClick={() => loadDetail(item)}
                  >
                    <td className="px-3 py-2 text-[#1d2129]">
                      {item.formName || item.formKey}
                    </td>
                    <td className="px-3 py-2 text-[#4e5969]">
                      {item.submitter.displayName || item.submitter.name}
                    </td>
                    <td className="px-3 py-2">
                      <span className="text-[#4e5969]">{statusLabel(item.status)}</span>
                    </td>
                    <td className="px-3 py-2 text-[#4e5969]">{item.currentNode || '-'}</td>
                    <td className="px-3 py-2 text-[#4e5969]">
                      {new Date(item.submittedAt).toLocaleString(locale)}
                    </td>
                    <td className="px-3 py-2 text-[#4e5969]">
                      {item.durationMs ? formatDuration(item.durationMs) : '-'}
                    </td>
                  </tr>
                ))}
                {!loading && instances.length === 0 && (
                  <tr>
                    <td className="px-3 py-6 text-center text-[#86909c]" colSpan={6}>
                      {t.common.noData}
                    </td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>
          <div className="mt-4 flex items-center justify-between text-sm text-[#4e5969]">
            <span>
              {t.approvals.adminAnalytics.pagination.replace('{page}', String(page)).replace('{total}', String(totalPages))}
            </span>
            <div className="flex items-center gap-2">
              <Button
                variant="outline"
                size="sm"
                disabled={page <= 1}
                onClick={() => handlePageChange(page - 1)}
              >
                {t.common.previousPage}
              </Button>
              <Button
                variant="outline"
                size="sm"
                disabled={page >= totalPages}
                onClick={() => handlePageChange(page + 1)}
              >
                {t.common.nextPage}
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>

      <Card className="border-[#e5e6eb]">
        <CardHeader>
          <div className="flex items-center justify-between">
            <CardTitle className="text-base font-semibold text-[#1d2129]">
              {t.approvals.adminAnalytics.exportHistory}
            </CardTitle>
            <Button variant="outline" size="sm" onClick={handleRefreshExports}>
              <RefreshCw className="mr-2 h-4 w-4" />
              {t.common.refresh}
            </Button>
          </div>
        </CardHeader>
        <CardContent>
          <div className="space-y-2">
            {exports.length ? (
              exports.map((item) => (
                <div key={item.id} className="flex items-center justify-between rounded-lg border border-[#e5e6eb] px-3 py-2">
                  <div>
                    <p className="text-sm text-[#1d2129]">{item.fileName || item.id}</p>
                    <p className="text-xs text-[#86909c]">
                      {exportStatusLabel(item.status)} · {new Date(item.createdAt).toLocaleString(locale)}
                    </p>
                  </div>
                  <Button
                    variant="outline"
                    size="sm"
                    disabled={!item.downloadUrl}
                    onClick={() => item.downloadUrl && window.open(item.downloadUrl, '_blank')}
                  >
                    {t.approvals.adminAnalytics.download}
                  </Button>
                </div>
              ))
            ) : (
              <div className="text-sm text-[#86909c]">{t.common.noData}</div>
            )}
          </div>
        </CardContent>
      </Card>

      <Dialog open={filterGuideOpen} onOpenChange={setFilterGuideOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>{t.approvals.adminAnalytics.filterGuide}</DialogTitle>
            <DialogDescription>
              {t.approvals.adminAnalytics.filterGuideSubtitle}
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-3">
            <div className="space-y-3">
              {filterGuideItems.map((item) => (
                <div key={item.label} className="rounded-lg border border-[#e5e6eb] px-3 py-2">
                  <p className="text-sm font-medium text-[#1d2129]">{item.label}</p>
                  <p className="text-xs text-[#86909c]">{item.hint}</p>
                </div>
              ))}
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setFilterGuideOpen(false)}>
              {t.common.close}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <Dialog open={settingsOpen} onOpenChange={setSettingsOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>{t.approvals.adminAnalytics.settingsTitle}</DialogTitle>
            <DialogDescription>
              {t.approvals.adminAnalytics.settingsDescription}
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-3">
            <div>
              <label className="text-sm text-[#4e5969]">
                {t.approvals.adminAnalytics.exportRetention}
              </label>
              <Input
                type="number"
                min={7}
                max={365}
                value={retentionDraft}
                onChange={(event) => setRetentionDraft(Number(event.target.value))}
              />
            </div>
            {settings && (
              <p className="text-xs text-[#86909c]">
                {t.approvals.adminAnalytics.exportRetentionHint.replace('{days}', String(settings.exportRetentionDays))}
              </p>
            )}
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setSettingsOpen(false)}>
              {t.common.cancel}
            </Button>
            <Button onClick={handleSaveSettings}>{t.common.save}</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <Dialog open={exportDialogOpen} onOpenChange={setExportDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>{t.approvals.adminAnalytics.exportTitle}</DialogTitle>
            <DialogDescription>
              {t.approvals.adminAnalytics.exportDescription}
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-3">
            <div>
              <label className="text-sm text-[#4e5969]">
                {t.approvals.adminAnalytics.exportFormatLabel}
              </label>
              <Select value={exportFormat} onValueChange={(value) => setExportFormat(value as 'xlsx' | 'csv')}>
                <SelectTrigger>
                <SelectValue placeholder={t.approvals.adminAnalytics.exportFormatPlaceholder || 'Select format'} />
              </SelectTrigger>
              <SelectContent>
                  <SelectItem value="xlsx">{exportFormatLabels.xlsx}</SelectItem>
                  <SelectItem value="csv">{exportFormatLabels.csv}</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <p className="text-xs text-[#86909c]">
              {t.approvals.adminAnalytics.exportFormatHint || 'Choose the file format for export.'}
          </p>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setExportDialogOpen(false)}>
              {t.common.cancel}
            </Button>
            <Button onClick={() => handleExport()}>{t.approvals.adminAnalytics.export}</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <UserSelector
        open={submitterSelectorOpen}
        onClose={() => setSubmitterSelectorOpen(false)}
        onConfirm={handleSubmitterSelect}
        selectedUserIds={selectedSubmitter ? [selectedSubmitter.id] : []}
        multiple={false}
        title={t.approvals.adminAnalytics.filters.submitterSelect}
        description={t.approvals.adminAnalytics.filters.submitterHint}
      />

      {detailOpen && (
        <>
          <div
            className="fixed inset-0 z-[70] bg-black/30"
            onClick={closeDetailDrawer}
          />
          <div
            className="fixed right-0 top-0 bottom-0 z-[80] w-[480px] bg-white shadow-lg"
            onClick={(event) => event.stopPropagation()}
          >
            <div className="flex items-center justify-between border-b border-[#e5e6eb] px-5 py-4">
              <div>
                <h3 className="text-base font-semibold text-[#1d2129]">
                  {t.approvals.adminAnalytics.detail.title}
                </h3>
                {detailItem && (
                  <p className="text-xs text-[#86909c]">
                    {detailItem.formName || detailItem.formKey || detailItem.businessInstanceId}
                  </p>
                )}
              </div>
              <button
                className="rounded-full p-2 text-[#86909c] hover:bg-gray-100"
                onClick={closeDetailDrawer}
                aria-label={t.common.close}
              >
                <X className="h-4 w-4" />
              </button>
            </div>
            <div className="h-full overflow-y-auto px-5 py-4 pb-24">
              {detailLoading && (
                <div className="py-6 text-center text-sm text-[#86909c]">
                  {t.common.loading}
                </div>
              )}
              {!detailLoading && detailItem && (
                <div className="space-y-6">
                  <div className="rounded-lg border border-[#e5e6eb] bg-[#f7f8fa] px-4 py-3">
                    <div className="flex flex-wrap gap-x-6 gap-y-2 text-sm text-[#4e5969]">
                      <span>
                        {t.approvals.adminAnalytics.detail.status}：{statusLabel(detailItem.status)}
                      </span>
                      <span>
                        {t.approvals.adminAnalytics.detail.submitter}：
                        {detailItem.submitter.displayName || detailItem.submitter.name}
                      </span>
                      <span>
                        {t.approvals.adminAnalytics.detail.submittedAt}：
                        {new Date(detailItem.submittedAt).toLocaleString(locale)}
                      </span>
                      <span>
                        {t.approvals.adminAnalytics.detail.approvalRequired}：
                        {detailItem.approvalRequired
                          ? t.approvals.adminAnalytics.filters.approvalRequired
                          : t.approvals.adminAnalytics.filters.approvalNotRequired}
                      </span>
                    </div>
                    <div className="mt-3 flex flex-wrap gap-2">
                      {detailItem.instanceId && (
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={() =>
                            window.open(
                              `/approval-center?tab=admin&view=processing&instanceId=${detailItem.instanceId}`,
                              '_blank'
                            )
                          }
                        >
                          {t.approvals.adminAnalytics.detail.openApproval}
                        </Button>
                      )}
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() =>
                          window.open(`/forms/instances/${detailItem.businessInstanceId}`, '_blank')
                        }
                      >
                        {t.approvals.adminAnalytics.detail.openFormInstance}
                      </Button>
                    </div>
                  </div>

                  <div className="space-y-3">
                    <h4 className="text-sm font-semibold text-[#1d2129]">
                      {t.approvals.adminAnalytics.detail.formDataTitle}
                    </h4>
                    {detailFormSchema ? (
                      <FormRenderer
                        schema={detailFormSchema as any}
                        uiSchema={detailFormUiSchema as any}
                        formData={detailFormData || {}}
                        disabled
                        showSaveButton={false}
                        showSubmitButton={false}
                        showSubmitterInfo={false}
                        locale={locale === 'en' ? 'en-US' : 'zh-CN'}
                      />
                    ) : (
                      <div className="text-sm text-[#86909c]">
                        {t.approvals.adminAnalytics.detail.formDataEmpty}
                      </div>
                    )}
                  </div>

                  <div className="space-y-3">
                    <h4 className="text-sm font-semibold text-[#1d2129]">
                      {t.approvals.adminAnalytics.detail.approvalHistoryTitle}
                    </h4>
                    {detailItem.instanceId ? (
                      detailHistory && detailHistory.length > 0 ? (
                        <ApprovalTimeline history={detailHistory} locale={locale === 'en' ? 'en' : 'zh'} />
                      ) : (
                        <div className="text-sm text-[#86909c]">
                          {t.approvals.adminAnalytics.detail.noApprovalHistory}
                        </div>
                      )
                    ) : (
                      <div className="text-sm text-[#86909c]">
                        {t.approvals.adminAnalytics.detail.notRequired}
                      </div>
                    )}
                  </div>
                </div>
              )}
            </div>
          </div>
        </>
      )}
    </div>
  );
}

function KpiCard({ label, value }: { label: string; value: string | number }) {
  return (
    <Card className="border-[#e5e6eb]">
      <CardContent className="min-h-[96px] py-5">
        <p className="text-xs text-[#646a73]">{label}</p>
        <p className="text-xl font-semibold text-[#1d2129] mt-2">{value}</p>
      </CardContent>
    </Card>
  );
}

function formatDuration(ms: number) {
  if (!ms) return '-';
  const seconds = Math.floor(ms / 1000);
  if (seconds < 60) return `${seconds}s`;
  const minutes = Math.floor(seconds / 60);
  if (minutes < 60) return `${minutes}m`;
  const hours = Math.floor(minutes / 60);
  return `${hours}h`;
}