"use client";

import { useState } from "react";
import { Button } from "@/components/ui/Button";
import { parseApiResponse } from "@/lib/api-client";
import { toUtc8Date } from "@/app/observe/lib/formatters";
import type { GitStatus } from "@/lib/git";
import type { Architecture, ComponentType, Environment, Region } from "@/lib/types";
import StatusDot from "@/components/StatusDot";
import { useDashboardData } from "@/lib/hooks/use-dashboard-data";

const dashboardTableHeaderCellClass =
  "whitespace-nowrap px-3 py-1.5 text-left text-[11px] font-semibold uppercase tracking-wider text-text-muted";
const dashboardTableBodyCellClass = "whitespace-nowrap px-3 py-1.5";
const versionDetailPillClass =
  "inline-flex items-center rounded-md border px-2 py-0.5 text-[11px] font-medium uppercase";

const architecturePillClass: Record<Architecture, string> = {
  dedicated: "bg-arch-dedicated/10 text-arch-dedicated border-arch-dedicated/30",
  nextgen: "bg-arch-nextgen/10 text-arch-nextgen border-arch-nextgen/30",
  serverless: "bg-arch-serverless/10 text-arch-serverless border-arch-serverless/30",
  byoc: "bg-arch-byoc/10 text-arch-byoc border-arch-byoc/30",
};

function DashboardSkeleton() {
  return (
    <div className="space-y-6 animate-pulse">
      <div className="h-7 w-32 bg-surface-1 rounded" />
      <div className="bg-surface-0 border border-surface-2 rounded-lg p-4 space-y-3">
        <div className="h-5 w-36 bg-surface-1 rounded" />
        <div className="grid grid-cols-2 gap-2">
          <div className="h-4 bg-surface-1 rounded" />
          <div className="h-4 bg-surface-1 rounded" />
          <div className="h-4 bg-surface-1 rounded" />
          <div className="h-4 bg-surface-1 rounded" />
        </div>
      </div>
      <div className="grid grid-cols-5 gap-4">
        {Array.from({ length: 5 }).map((_, i) => (
          <div
            key={i}
            className="bg-surface-0 border border-surface-2 rounded-lg p-4 text-center space-y-2"
          >
            <div className="h-8 w-12 bg-surface-1 rounded mx-auto" />
            <div className="h-4 w-20 bg-surface-1 rounded mx-auto" />
          </div>
        ))}
      </div>
      <div className="flex gap-3">
        <div className="h-9 w-28 bg-surface-1 rounded-lg" />
        <div className="h-9 w-28 bg-surface-1 rounded-lg" />
        <div className="h-9 w-28 bg-surface-1 rounded-lg" />
      </div>
      <div className="h-6 w-40 bg-surface-1 rounded" />
      <div className="bg-surface-0 border border-surface-2 rounded-lg overflow-hidden">
        <div className="h-10 bg-surface-1" />
        {Array.from({ length: 3 }).map((_, i) => (
          <div key={i} className="h-9 border-b border-surface-2/50" />
        ))}
      </div>
    </div>
  );
}

export default function DashboardPage() {
  const {
    gitStatus,
    regions,
    versionStats,
    loading,
    error,
    refetch,
  } = useDashboardData();
  const [syncingMain, setSyncingMain] = useState(false);
  const [syncError, setSyncError] = useState("");
  const [gitStatusOverride, setGitStatusOverride] = useState<GitStatus | null>(null);

  const effectiveGitStatus = gitStatusOverride ?? gitStatus;

  async function syncWithMain() {
    setSyncingMain(true);
    setSyncError("");

    try {
      const res = await fetch("/api/git/sync", { method: "POST" });
      const payload = await parseApiResponse<GitStatus>(res);

      if (payload.ok) {
        setGitStatusOverride(payload.data);
      } else {
        setSyncError(payload.error.message);
      }
    } catch (e) {
      setSyncError((e as Error).message);
    } finally {
      setSyncingMain(false);
    }
  }

  if (loading) return <DashboardSkeleton />;
  if (error) {
    return (
      <div className="bg-danger-muted border border-danger/20 rounded-lg p-4 flex items-start gap-3">
        <div className="w-5 h-5 rounded-full bg-danger/20 flex items-center justify-center shrink-0 mt-0.5">
          <span className="text-danger text-xs font-bold">!</span>
        </div>
        <div>
          <p className="text-sm text-danger font-medium">{error}</p>
          <Button
            onClick={() => {
              void refetch();
            }}
            variant="danger"
            size="sm"
            className="mt-2"
          >
            Try again
          </Button>
        </div>
      </div>
    );
  }

  const byArch = {
    dedicated: regions.filter((r) => r.architecture === "dedicated").length,
    nextgen: regions.filter((r) => r.architecture === "nextgen").length,
    serverless: regions.filter((r) => r.architecture === "serverless").length,
    byoc: regions.filter((r) => r.architecture === "byoc").length,
  };

  return (
    <div className="space-y-6 animate-fade-in">
      <section>
        <h2 className="text-xl font-semibold tracking-tight">Dashboard</h2>
      </section>

      {effectiveGitStatus && (
        <section>
        <div className="bg-surface-0 rounded-lg border border-surface-2 p-4">
          <div className="flex items-center justify-between gap-3 mb-3">
            <div className="flex items-center gap-2">
              <StatusDot
                status={
                  effectiveGitStatus.isDirty || effectiveGitStatus.behind > 0
                    ? "danger"
                    : "success"
                }
              />
              <h3 className="text-sm font-semibold uppercase tracking-wider text-text-secondary">
                Repository Status
              </h3>
            </div>
            <div className="flex flex-wrap items-center justify-end gap-3">
              <Button
                type="button"
                onClick={syncWithMain}
                disabled={syncingMain}
                aria-busy={syncingMain}
                variant="subtle"
                size="xs"
              >
                {syncingMain ? "Syncing..." : "Sync"}
              </Button>
            </div>
          </div>
          <div className="grid grid-cols-2 gap-x-6 gap-y-2 text-sm">
            <div className="flex items-center gap-2">
              <span className="text-text-muted text-xs uppercase tracking-wider w-16 shrink-0">
                Branch
              </span>
                <code className="font-mono text-[13px] bg-surface-1 px-2 py-0.5 rounded text-accent">
                  {effectiveGitStatus.currentBranch}
                </code>
              </div>
            <div className="flex items-center gap-2">
              <span className="text-text-muted text-xs uppercase tracking-wider w-16 shrink-0">
                State
              </span>
              {effectiveGitStatus.isDirty ? (
                <span className="text-danger text-sm">Dirty</span>
              ) : (
                <span className="text-success text-sm">Clean</span>
              )}
            </div>
            <div className="flex items-center gap-2">
              <span className="text-text-muted text-xs uppercase tracking-wider w-16 shrink-0">
                Commit
              </span>
                <code className="font-mono text-[13px] bg-surface-1 px-2 py-0.5 rounded text-accent">
                  {effectiveGitStatus.lastCommit.hash}
                </code>
              </div>
            <div className="flex items-center gap-2">
              <span className="text-text-muted text-xs uppercase tracking-wider w-16 shrink-0">
                Time
              </span>
              <div className="flex min-w-0 items-center gap-2">
                <time
                  dateTime={effectiveGitStatus.lastCommit.date || undefined}
                  title={effectiveGitStatus.lastCommit.date || undefined}
                  className="font-mono text-[13px] bg-surface-1 px-2 py-0.5 rounded border border-surface-2/70 text-accent"
                >
                  {formatGitCommitTime(effectiveGitStatus.lastCommit.date)}
                </time>
              </div>
            </div>
            <div className="flex items-center gap-2">
              <span className="text-text-muted text-xs uppercase tracking-wider w-16 shrink-0">
                Remote
              </span>
                <code className="font-mono text-[13px] bg-surface-1 px-2 py-0.5 rounded text-accent">
                  {effectiveGitStatus.remoteBranch}@{effectiveGitStatus.remoteCommit}
                </code>
              </div>
            <div className="flex items-center gap-2 min-w-0">
              <span className="text-text-muted text-xs uppercase tracking-wider w-16 shrink-0">
                Message
              </span>
              <span className="text-sm truncate text-text-secondary">
                {effectiveGitStatus.lastCommit.message.split("\n")[0]}
              </span>
            </div>
          </div>
          {syncError && (
            <p className="text-xs text-danger mt-3">{syncError}</p>
          )}
        </div>
        </section>
      )}

      <section className="grid grid-cols-5 gap-4">
        <StatCard label="Total Regions" value={regions.length} />
        <StatCard
          label="Dedicated"
          value={byArch.dedicated}
          glowColor="var(--arch-dedicated)"
        />
        <StatCard
          label="NextGen"
          value={byArch.nextgen}
          glowColor="var(--arch-nextgen)"
        />
        <StatCard
          label="Serverless"
          value={byArch.serverless}
          glowColor="var(--arch-serverless)"
        />
        <StatCard
          label="BYOC"
          value={byArch.byoc}
          glowColor="var(--arch-byoc)"
        />
      </section>

      <section className="space-y-2">
        <h3 className="text-sm font-semibold uppercase tracking-wider text-text-secondary">
          Version Stats
        </h3>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
          <VersionStatsCard
            label="ACS"
            component="acs"
            stats={versionStats.acs}
            regions={regions}
          />
          <VersionStatsCard
            label="Vector"
            component="vector"
            stats={versionStats.vector}
            regions={regions}
          />
          <VersionStatsCard
            label="VMagent"
            component="vmagent"
            stats={versionStats.vmagent}
            regions={regions}
          />
        </div>
      </section>

    </div>
  );
}

function formatGitCommitTime(date: string) {
  if (!date) return "-";

  const parsed = new Date(date);
  if (Number.isNaN(parsed.getTime())) return date;

  const utc8 = toUtc8Date(parsed.getTime());
  return `${utc8.toISOString().slice(0, 10)} ${utc8.toISOString().slice(11, 16)} UTC+8`;
}

function StatCard({
  label,
  value,
  glowColor,
}: {
  label: string;
  value: number;
  glowColor?: string;
}) {
  return (
    <div className="bg-surface-0 rounded-lg px-4 py-3 border border-surface-2 relative overflow-hidden group hover:-translate-y-0.5 hover:border-accent/30 transition-all duration-200">
      <div
        className="absolute top-0 left-0 w-16 h-16 rounded-br-[100%] opacity-50"
        style={{ backgroundColor: glowColor || "var(--accent)", opacity: 0.07 }}
      />
      <div className="relative">
        <div className="flex items-baseline gap-2">
          <div className="text-3xl font-bold tracking-tight text-text-primary">
            {value}
          </div>
          <div className="text-xs font-medium uppercase tracking-wider text-text-muted">
            {label}
          </div>
        </div>
      </div>
    </div>
  );
}

function VersionStatsCard({
  label,
  component,
  stats,
  regions,
}: {
  label: string;
  component: ComponentType;
  stats: Record<Environment, { totalRegions: number; unknownCount: number; versions: Array<{ version: string; count: number; ratio: number }> }>;
  regions: Region[];
}) {
  const envOrder: Environment[] = ["prod", "staging", "dev"];
  const [expanded, setExpanded] = useState<{
    environment: Environment;
    version: string | null;
  } | null>(null);

  function toggleExpanded(environment: Environment, version: string | null) {
    setExpanded((current) =>
      current?.environment === environment && current.version === version
        ? null
        : { environment, version }
    );
  }

  return (
    <div className="bg-surface-0 rounded-lg border border-surface-2 p-3 space-y-2">
      <div className="px-1">
        <div className="text-sm font-semibold tracking-wide text-text-primary">{label}</div>
      </div>
      {envOrder.map((env) => {
        const cell = stats[env];
        const envExpanded = expanded?.environment === env;
        const expandedRegions =
          envExpanded
            ? getVersionMatchedRegions(regions, component, env, expanded.version)
            : [];
        return (
          <div
            key={`${component}-${env}`}
            className={`rounded-md border px-2 py-1.5 space-y-1.5 transition-colors ${
              envExpanded ? "border-surface-2 bg-surface-1/60" : "border-surface-2/60 bg-surface-0"
            }`}
          >
            <div className="flex items-center justify-between text-xs uppercase tracking-wider text-text-muted">
              <span className={envExpanded ? "text-text-primary" : ""}>{env}</span>
              <span className="text-[11px] normal-case tracking-normal text-text-muted">
                Regions: {cell.totalRegions}
              </span>
            </div>

            {cell.unknownCount > 0 && (
              <button
                type="button"
                aria-label={`Show regions for ${component} ${env} unknown`}
                aria-pressed={expanded?.environment === env && expanded.version === null}
                onClick={() => toggleExpanded(env, null)}
                className={`inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-medium transition-colors hover:bg-warning/15 ${
                  expanded?.environment === env && expanded.version === null
                    ? "border-warning/40 bg-warning/15 text-warning"
                    : "border-warning/30 bg-warning/12 text-warning"
                }`}
              >
                Unknown: {cell.unknownCount}
              </button>
            )}

            {cell.versions.length === 0 ? (
              <div className="text-xs text-text-muted">No data</div>
            ) : (
              <div className="space-y-0.5">
                {cell.versions.slice(0, 5).map((item) => (
                  <VersionRowButton
                    key={`${component}-${env}-${item.version}`}
                    component={component}
                    env={env}
                    item={item}
                    active={expanded?.environment === env && expanded.version === item.version}
                    onClick={() => toggleExpanded(env, item.version)}
                  />
                ))}
              </div>
            )}

            {expanded?.environment === env && (
              <VersionRegionsTable regions={expandedRegions} />
            )}
          </div>
        );
      })}
    </div>
  );
}

function VersionRowButton({
  component,
  env,
  item,
  active,
  onClick,
}: {
  component: ComponentType;
  env: Environment;
  item: { version: string; count: number; ratio: number };
  active: boolean;
  onClick: () => void;
}) {
  const ratio = item.ratio * 100;

  return (
    <button
      type="button"
      aria-label={`Show regions for ${component} ${env} version ${item.version}`}
      aria-pressed={active}
      onClick={onClick}
      className={`w-full rounded-md px-1.5 py-1 text-left transition-colors hover:bg-surface-1 ${
        active ? "border-l-4 border-l-success bg-success/10" : "border-l-4 border-l-transparent bg-transparent"
      }`}
    >
      <span className="flex items-center justify-between gap-2 text-xs">
        <span className="truncate font-mono text-text-secondary">{item.version}</span>
        <span
          className={`shrink-0 rounded px-1.5 py-0.5 text-[11px] ${
            active ? "bg-success/10 text-success" : "bg-surface-1 text-text-muted"
          }`}
        >
          {item.count} ({ratio.toFixed(1)}%)
        </span>
      </span>
      <span className="mt-1 block h-0.5 overflow-hidden rounded-full bg-surface-2/50">
        <span
          aria-label={`Coverage for ${component} ${env} ${item.version}`}
          className="block h-full rounded-full bg-success/80"
          style={{ width: `${Math.max(0, Math.min(100, ratio))}%` }}
        />
      </span>
    </button>
  );
}

function getVersionMatchedRegions(
  regions: Region[],
  component: ComponentType,
  environment: Environment,
  version: string | null
) {
  return regions.filter((region) => {
    if (region.environment !== environment) return false;

    const tag = region.componentTags[component];
    if (version === null) return !tag;
    return tag === version;
  });
}

function VersionRegionsTable({ regions }: { regions: Region[] }) {
  if (regions.length === 0) {
    return <div className="text-xs text-text-muted">No regions matched.</div>;
  }

  return (
    <div className="max-h-[164px] overflow-auto rounded-lg border border-surface-2 bg-surface-0">
      <table className="w-full text-xs">
        <thead>
          <tr className="border-b border-surface-2 bg-surface-1">
            <th className={dashboardTableHeaderCellClass}>Architecture</th>
            <th className={dashboardTableHeaderCellClass}>Provider</th>
            <th className={dashboardTableHeaderCellClass}>Region</th>
          </tr>
        </thead>
        <tbody>
          {regions.map((region) => (
            <tr key={region.id} className="border-b border-surface-2/50 last:border-0 transition-colors hover:bg-surface-1">
              <td className={dashboardTableBodyCellClass}>
                <span
                  className={`${versionDetailPillClass} ${architecturePillClass[region.architecture]}`}
                >
                  {region.architecture}
                </span>
              </td>
              <td className={`${dashboardTableBodyCellClass} font-mono text-text-secondary`}>
                {region.provider}
              </td>
              <td className={`${dashboardTableBodyCellClass} font-mono text-text-secondary`}>
                {region.regionName}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}