"use client";

import { useEffect, useRef, useState, type ReactNode } from "react";
import { BarChart3, Building2, CalendarDays, Loader2, RefreshCw, RotateCcw, Users } from "lucide-react";
import { crossfadeIn, pulseFeedback, revealChildren, runScopedMotion } from "@/lib/ui/motion";
import { usagePresetRange, type AdminUsageReport } from "@/lib/usage";

type UsageFilters = {
  startDate: string;
  endDate: string;
  organizationId: string;
  ownerId: string;
  capability: string;
  provider: string;
};

function initialFilters(): UsageFilters {
  const range = usagePresetRange("month");
  return {
    startDate: range.startDate,
    endDate: range.endDate,
    organizationId: "",
    ownerId: "",
    capability: "",
    provider: ""
  };
}

export function UsageManager({ isSuperAdmin }: { isSuperAdmin: boolean }) {
  const [filters, setFilters] = useState<UsageFilters>(initialFilters);
  const [report, setReport] = useState<AdminUsageReport | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const managerRef = useRef<HTMLDivElement | null>(null);
  const contentRef = useRef<HTMLDivElement | null>(null);
  const feedbackRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    const controller = new AbortController();
    void loadUsage(controller.signal);
    return () => controller.abort();
  }, [filters]);

  useEffect(() => runScopedMotion(managerRef, (scope) => revealChildren(scope)), []);

  useEffect(() => {
    crossfadeIn(contentRef.current);
  }, [report]);

  useEffect(() => {
    pulseFeedback(feedbackRef.current);
  }, [error, report?.warnings]);

  async function loadUsage(signal?: AbortSignal) {
    setLoading(true);
    setError(null);
    try {
      const params = new URLSearchParams();
      for (const [key, value] of Object.entries(filters)) {
        if (value) params.set(key, value);
      }
      const response = await fetch(`/api/admin/usage?${params.toString()}`, {
        cache: "no-store",
        signal
      });
      const payload = await response.json() as AdminUsageReport & { error?: string };
      if (!response.ok) throw new Error(payload.error || "读取用量数据失败");
      setReport(payload);
    } catch (nextError) {
      if (nextError instanceof DOMException && nextError.name === "AbortError") return;
      setError(nextError instanceof Error ? nextError.message : String(nextError));
    } finally {
      if (!signal?.aborted) setLoading(false);
    }
  }

  function updateFilter(key: keyof UsageFilters, value: string) {
    setFilters((current) => ({ ...current, [key]: value }));
  }

  function resetFilters() {
    setFilters(initialFilters());
  }

  return (
    <div className="usage-manager" ref={managerRef}>
      <div className="workspace-head" data-animate>
        <div>
          <h1 className="workspace-title">用量管理</h1>
          <p className="workspace-copy">按成功任务统计平台内账号与组织的真实服务用量。</p>
        </div>
        <div className="workspace-meta">
          <span className="status">北京时间</span>
          <span className="status running">{report?.range.label || "本月"}</span>
        </div>
      </div>

      <section className="panel usage-filters" data-animate aria-label="用量筛选">
        <label className="field">
          <span>开始日期</span>
          <input
            type="date"
            value={filters.startDate}
            max={filters.endDate}
            onChange={(event) => updateFilter("startDate", event.target.value)}
          />
        </label>
        <label className="field">
          <span>结束日期</span>
          <input
            type="date"
            value={filters.endDate}
            min={filters.startDate}
            onChange={(event) => updateFilter("endDate", event.target.value)}
          />
        </label>
        {isSuperAdmin ? (
          <>
            <label className="field">
              <span>组织</span>
              <select value={filters.organizationId} onChange={(event) => updateFilter("organizationId", event.target.value)}>
                <option value="">全部组织</option>
                {report?.options.organizations.map((option) => (
                  <option value={option.value} key={option.value}>{option.label}</option>
                ))}
              </select>
            </label>
            <label className="field">
              <span>账号</span>
              <select value={filters.ownerId} onChange={(event) => updateFilter("ownerId", event.target.value)}>
                <option value="">全部账号</option>
                {report?.options.accounts.map((option) => (
                  <option value={option.value} key={option.value}>{option.label}</option>
                ))}
              </select>
            </label>
          </>
        ) : null}
        <label className="field">
          <span>功能类型</span>
          <select value={filters.capability} onChange={(event) => updateFilter("capability", event.target.value)}>
            <option value="">全部功能</option>
            {report?.options.capabilities.map((option) => (
              <option value={option.value} key={option.value}>{option.label}</option>
            ))}
          </select>
        </label>
        <label className="field">
          <span>服务商</span>
          <select value={filters.provider} onChange={(event) => updateFilter("provider", event.target.value)}>
            <option value="">全部服务商</option>
            {report?.options.providers.map((option) => (
              <option value={option.value} key={option.value}>{option.label}</option>
            ))}
          </select>
        </label>
        <div className="usage-filter-actions">
          <button className="button" type="button" onClick={resetFilters} disabled={loading}>
            <RotateCcw aria-hidden="true" />重置
          </button>
          <button className="button" type="button" onClick={() => void loadUsage()} disabled={loading}>
            {loading ? <Loader2 className="spin" aria-hidden="true" /> : <RefreshCw aria-hidden="true" />}刷新
          </button>
        </div>
      </section>

      {error || report?.warnings?.length ? (
        <div ref={feedbackRef} className="usage-feedback">
          {error ? <div className="callout" role="alert">{error}</div> : null}
          {!error && report?.warnings?.length ? (
            <div className="callout usage-warning" role="status">{report.warnings.join("；")}</div>
          ) : null}
        </div>
      ) : null}

      {loading && !report ? (
        <section className="panel settings-loading">
          <Loader2 className="spin" aria-hidden="true" />正在汇总用量
        </section>
      ) : report ? (
        <div className={loading ? "usage-content refreshing" : "usage-content"} ref={contentRef}>
          <section className="usage-metrics" data-animate aria-label="用量概览">
            <UsageMetric icon={<BarChart3 />} label="成功任务" value={report.summary.total} suffix="次" />
            <UsageMetric icon={<Users />} label="活跃账号" value={report.summary.activeAccounts} suffix="个" />
            <UsageMetric icon={<Building2 />} label="活跃组织" value={report.summary.activeOrganizations} suffix="个" />
            <UsageMetric icon={<CalendarDays />} label="日均用量" value={report.summary.averagePerDay} suffix="次" />
          </section>

          <div className="usage-analysis-grid" data-animate>
            <section className="panel usage-trend-panel">
              <div className="panel-head">
                <div>
                  <h2>用量趋势</h2>
                  <p>{report.range.dayCount > 62 ? "按月汇总" : "按日汇总"}</p>
                </div>
              </div>
              <UsageTrend report={report} />
            </section>
            <section className="panel usage-breakdown-panel">
              <div className="panel-head">
                <div>
                  <h2>功能分布</h2>
                  <p>每个成功任务计 1 次</p>
                </div>
              </div>
              <UsageBreakdown items={report.byCapability} total={report.summary.total} />
              <div className="usage-provider-divider" />
              <div className="panel-head compact">
                <div><h3>服务商分布</h3></div>
              </div>
              <UsageBreakdown items={report.byProvider} total={report.summary.total} compact />
            </section>
          </div>

          <section className="panel usage-table-panel" data-animate>
            <div className="panel-head">
              <div>
                <h2>组织汇总</h2>
                <p>{report.organizations.length} 个统计分组</p>
              </div>
            </div>
            <div className="usage-table usage-organization-table">
              <div className="usage-table-row usage-table-head" aria-hidden="true">
                <span>组织</span><span>活跃账号</span><span>用量</span><span>最近使用</span>
              </div>
              {report.organizations.length ? report.organizations.map((row) => (
                <div className="usage-table-row" key={row.organizationId}>
                  <strong>{row.organizationName}</strong>
                  <span>{row.accountCount} 个</span>
                  <span><b>{row.count}</b> 次</span>
                  <time dateTime={row.lastUsedAt}>{formatAdminTime(row.lastUsedAt)}</time>
                </div>
              )) : <UsageEmpty label="当前筛选下暂无组织用量" />}
            </div>
          </section>

          {isSuperAdmin ? <section className="panel usage-table-panel" data-animate>
            <div className="panel-head">
              <div>
                <h2>账号汇总</h2>
                <p>{report.accounts.length} 个活跃账号</p>
              </div>
            </div>
            <div className="usage-table usage-account-table">
              <div className="usage-table-row usage-table-head" aria-hidden="true">
                <span>账号</span><span>组织</span><span>用量</span><span>最近使用</span>
              </div>
              {report.accounts.length ? report.accounts.map((row) => (
                <div className="usage-table-row" key={row.ownerId}>
                  <div className="usage-account-name">
                    <strong>{row.accountName}</strong>
                    {row.accountUsername ? <small>{row.accountUsername}</small> : null}
                  </div>
                  <span>{row.organizationName}</span>
                  <span><b>{row.count}</b> 次</span>
                  <time dateTime={row.lastUsedAt}>{formatAdminTime(row.lastUsedAt)}</time>
                </div>
              )) : <UsageEmpty label="当前筛选下暂无账号用量" />}
            </div>
          </section> : null}

          {isSuperAdmin ? <section className="panel usage-table-panel" data-animate>
            <div className="panel-head">
              <div>
                <h2>用量明细</h2>
                <p>仅显示计量元数据，不展示创作内容</p>
              </div>
              <span className="status">最近 {report.recent.length} 条</span>
            </div>
            <div className="usage-detail-list">
              {report.recent.length ? report.recent.map((record) => (
                <article className="usage-detail-row" key={record.id}>
                  <div className="usage-account-name">
                    <strong>{record.accountName}</strong>
                    <small>{record.organizationName}</small>
                  </div>
                  <div>
                    <strong>{record.capabilityLabel}</strong>
                    <small>{record.providerLabel}{record.reqKey ? ` · ${record.reqKey}` : ""}</small>
                  </div>
                  <time dateTime={record.createdAt}>{formatAdminTime(record.createdAt)}</time>
                  <span className="status">1 次</span>
                </article>
              )) : <UsageEmpty label="当前筛选下暂无用量明细" />}
            </div>
          </section> : null}
        </div>
      ) : null}
    </div>
  );
}

function UsageMetric({ icon, label, value, suffix }: { icon: ReactNode; label: string; value: number; suffix: string }) {
  return (
    <article className="panel usage-metric">
      <div className="usage-metric-icon" aria-hidden="true">{icon}</div>
      <span>{label}</span>
      <strong>{value}<small>{suffix}</small></strong>
    </article>
  );
}

function UsageTrend({ report }: { report: AdminUsageReport }) {
  const max = Math.max(1, ...report.trend.map((point) => point.count));
  if (!report.trend.length) return <UsageEmpty label="暂无趋势数据" />;
  return (
    <div className="usage-trend" role="img" aria-label={`${report.range.label}用量趋势`}>
      {report.trend.map((point) => (
        <div className="usage-trend-point" key={point.date} title={`${point.date}：${point.count} 次`}>
          <div className="usage-trend-value">{point.count || ""}</div>
          <div className="usage-trend-track">
            <span style={{ height: `${Math.max(point.count ? 8 : 0, point.count / max * 100)}%` }} />
          </div>
          <small>{point.label}</small>
        </div>
      ))}
    </div>
  );
}

function UsageBreakdown({ items, total, compact = false }: { items: AdminUsageReport["byCapability"]; total: number; compact?: boolean }) {
  if (!items.length) return <UsageEmpty label="暂无分布数据" />;
  return (
    <div className={compact ? "usage-breakdown compact" : "usage-breakdown"}>
      {items.map((item) => (
        <div className="usage-breakdown-row" key={item.key}>
          <div><span>{item.label}</span><strong>{item.count}</strong></div>
          <div className="usage-progress"><span style={{ width: `${total ? item.count / total * 100 : 0}%` }} /></div>
        </div>
      ))}
    </div>
  );
}

function UsageEmpty({ label }: { label: string }) {
  return <div className="usage-empty">{label}</div>;
}

function formatAdminTime(value?: string): string {
  if (!value) return "—";
  return new Intl.DateTimeFormat("zh-CN", {
    timeZone: "Asia/Shanghai",
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
    hour12: false
  }).format(new Date(value));
}