"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import { Alert, Card, Col, Row, Select, Spin, Statistic, Table, Typography } from "antd";
import { BarChartOutlined } from "@ant-design/icons";

import { CmsSectionTitle } from "@/components/admin/CmsSectionTitle";

const apiBase = () => process.env.NEXT_PUBLIC_API_BASE_URL ?? "";

type OverviewResponse = {
  range?: string;
  windowStart?: string | null;
  windowEnd?: string;
  totals?: Record<string, unknown>;
  funnels?: Record<string, unknown>;
  archetypes?: { top?: { key: string; count: number }[] };
  revisit?: Record<string, unknown>;
  feedback?: Record<string, unknown>;
  compatibility?: { runs?: number };
};

export default function AnalyticsOverviewPage() {
  const [range, setRange] = useState("7d");
  const [data, setData] = useState<OverviewResponse | null>(null);
  const [err, setErr] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);

  const load = useCallback(async () => {
    setLoading(true);
    setErr(null);
    const token =
      typeof window !== "undefined" ? window.localStorage.getItem("accessToken") : null;
    if (!token) {
      setErr("Not signed in.");
      setData(null);
      setLoading(false);
      return;
    }
    const res = await fetch(`${apiBase()}/internal/analytics/overview?range=${encodeURIComponent(range)}`, {
      headers: { Authorization: `Bearer ${token}` },
    });
    if (res.status === 403) {
      setErr(
        "This view requires SUPER_ADMIN. Ask an administrator to grant the role or call the API with a super-admin token.",
      );
      setData(null);
      setLoading(false);
      return;
    }
    if (!res.ok) {
      setErr(`Request failed (${res.status}).`);
      setData(null);
      setLoading(false);
      return;
    }
    setData((await res.json()) as OverviewResponse);
    setLoading(false);
  }, [range]);

  useEffect(() => {
    void load();
  }, [load]);

  const funnelRows = useMemo(() => {
    const counts = (data?.funnels as { telemetryCounts?: Record<string, number> } | undefined)?.telemetryCounts;
    if (!counts) return [];
    return Object.entries(counts)
      .map(([event, count]) => ({ key: event, event, count }))
      .sort((a, b) => b.count - a.count);
  }, [data]);

  const archetypeRows = useMemo(
    () =>
      (data?.archetypes?.top ?? []).map((r, i) => ({
        key: `${r.key}-${i}`,
        archetypeKey: r.key,
        count: r.count,
      })),
    [data],
  );

  const totals = data?.totals as Record<string, number | null | unknown[]> | undefined;

  return (
    <Card className="cms-surface-card" styles={{ body: { padding: "24px 28px" } }}>
      <CmsSectionTitle
        icon={<BarChartOutlined />}
        title="Operational analytics"
        description="Aggregated product health — SUPER_ADMIN only. Numbers refresh when you change the window."
      />

      <div className="mb-5 flex flex-wrap items-center gap-3">
        <Typography.Text className="text-white/80">Window</Typography.Text>
        <Select
          value={range}
          onChange={(v) => setRange(v)}
          style={{ minWidth: 120 }}
          options={[
            { value: "today", label: "Today (UTC)" },
            { value: "7d", label: "Last 7 days" },
            { value: "30d", label: "Last 30 days" },
            { value: "all", label: "All time" },
          ]}
        />
        <Typography.Text type="secondary" className="text-xs text-white/45">
          {data?.windowStart ? `${data.windowStart} → ${data?.windowEnd ?? ""}` : data?.windowEnd ?? ""}
        </Typography.Text>
      </div>

      {err ?
        <Alert type="warning" message={err} showIcon className="mb-4" />
      : null}

      {loading ?
        <div className="py-16 text-center">
          <Spin />
        </div>
      : !err && data ?
        <>
          <Typography.Title level={5} className="!mb-3 !text-white/90">
            Totals
          </Typography.Title>
          <Row gutter={[16, 16]} className="mb-6">
            <Col xs={24} sm={12} md={8} lg={6}>
              <Card size="small" className="h-full !bg-white/[0.04] !border-white/10">
                <Statistic title="Chart records (DB)" value={Number(totals?.tuViChartRecordsCreated ?? 0)} />
              </Card>
            </Col>
            <Col xs={24} sm={12} md={8} lg={6}>
              <Card size="small" className="h-full !bg-white/[0.04] !border-white/10">
                <Statistic title="Saved readings" value={Number(totals?.savedReadings ?? 0)} />
              </Card>
            </Col>
            <Col xs={24} sm={12} md={8} lg={6}>
              <Card size="small" className="h-full !bg-white/[0.04] !border-white/10">
                <Statistic title="Premium interest leads" value={Number(totals?.premiumInterestLeads ?? 0)} />
              </Card>
            </Col>
            <Col xs={24} sm={12} md={8} lg={6}>
              <Card size="small" className="h-full !bg-white/[0.04] !border-white/10">
                <Statistic title="Result views (telemetry)" value={Number(totals?.readingsTelemetryResultViews ?? 0)} />
              </Card>
            </Col>
            <Col xs={24} sm={12} md={8} lg={6}>
              <Card size="small" className="h-full !bg-white/[0.04] !border-white/10">
                <Statistic
                  title="Google share (new users)"
                  value={
                    totals?.googleSignupShareAmongNewUsers != null ?
                      Math.round(Number(totals.googleSignupShareAmongNewUsers) * 1000) / 10
                    : 0
                  }
                  suffix="%"
                />
              </Card>
            </Col>
            <Col xs={24} sm={12} md={8} lg={6}>
              <Card size="small" className="h-full !bg-white/[0.04] !border-white/10">
                <Statistic
                  title="OTP completion"
                  value={
                    (data.funnels as { otpCompletionRate?: number | null } | undefined)?.otpCompletionRate != null ?
                      Math.round(Number((data.funnels as { otpCompletionRate: number }).otpCompletionRate) * 1000) / 10
                    : 0
                  }
                  suffix="%"
                />
              </Card>
            </Col>
            <Col xs={24} sm={12} md={8} lg={6}>
              <Card size="small" className="h-full !bg-white/[0.04] !border-white/10">
                <Statistic title="Compatibility runs" value={Number(data.compatibility?.runs ?? 0)} />
              </Card>
            </Col>
          </Row>

          <Typography.Title level={5} className="!mb-3 !text-white/90">
            Funnel telemetry
          </Typography.Title>
          <Table
            size="small"
            pagination={false}
            className="mb-6"
            columns={[
              { title: "Event", dataIndex: "event", key: "event" },
              { title: "Count", dataIndex: "count", key: "count", width: 120 },
            ]}
            dataSource={funnelRows}
          />

          <Typography.Title level={5} className="!mb-3 !text-white/90">
            Top archetypes
          </Typography.Title>
          <Table
            size="small"
            pagination={false}
            className="mb-6"
            columns={[
              { title: "Key", dataIndex: "archetypeKey", key: "archetypeKey" },
              { title: "Count", dataIndex: "count", key: "count", width: 120 },
            ]}
            dataSource={archetypeRows}
          />

          <Typography.Title level={5} className="!mb-3 !text-white/90">
            Deeper topics (premium lead sources)
          </Typography.Title>
          <Table
            size="small"
            pagination={false}
            className="mb-6"
            columns={[
              { title: "Source", dataIndex: "source", key: "source" },
              { title: "Count", dataIndex: "count", key: "count", width: 120 },
            ]}
            dataSource={
              (totals?.topRequestedDeeperTopics as { source: string; count: number }[] | undefined) ?? []
            }
          />

          <Typography.Title level={5} className="!mb-3 !text-white/90">
            Revisit
          </Typography.Title>
          <Row gutter={[16, 16]} className="mb-6">
            {Object.entries(data.revisit ?? {}).map(([k, v]) => (
              <Col xs={24} sm={12} md={8} lg={6} key={k}>
                <Card size="small" className="h-full !bg-white/[0.04] !border-white/10">
                  <Statistic title={k} value={typeof v === "number" ? v : 0} />
                </Card>
              </Col>
            ))}
          </Row>

          <Typography.Title level={5} className="!mb-3 !text-white/90">
            Feedback
          </Typography.Title>
          <Row gutter={[16, 16]} className="mb-4">
            <Col xs={24} sm={8}>
              <Card size="small" className="h-full !bg-white/[0.04] !border-white/10">
                <Statistic
                  title="Submissions"
                  value={Number((data.feedback as { submissions?: number } | undefined)?.submissions ?? 0)}
                />
              </Card>
            </Col>
            <Col xs={24} sm={8}>
              <Card size="small" className="h-full !bg-white/[0.04] !border-white/10">
                <Statistic
                  title="Avg overall"
                  value={
                    (data.feedback as { avgOverall?: number | null } | undefined)?.avgOverall != null ?
                      Number((data.feedback as { avgOverall: number }).avgOverall)
                    : "—"
                  }
                />
              </Card>
            </Col>
            <Col xs={24} sm={8}>
              <Card size="small" className="h-full !bg-white/[0.04] !border-white/10">
                <Statistic
                  title="Wanted-more (count)"
                  value={Number(
                    (data.feedback as { submissionsWithWantedMoreTopic?: number } | undefined)
                      ?.submissionsWithWantedMoreTopic ?? 0,
                  )}
                />
              </Card>
            </Col>
          </Row>
          <Typography.Text className="mb-2 block text-white/55">Feedback by source</Typography.Text>
          <Table
            size="small"
            pagination={false}
            columns={[
              { title: "Source", dataIndex: "source", key: "source" },
              { title: "Count", dataIndex: "count", key: "count", width: 120 },
            ]}
            dataSource={
              (data.feedback as { bySource?: { source: string; count: number }[] } | undefined)?.bySource ?? []
            }
          />
        </>
      : null}
    </Card>
  );
}