"use client";

import { useEffect, useMemo, useState } from "react";
import { DOWNTIME_RANGES, type DowntimeRange } from "@/lib/analytics/downtimeRange";
import Link from "next/link";
import {
  Bar,
  CartesianGrid,
  ComposedChart,
  Line,
  ReferenceLine,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts";
import { useI18n } from "@/lib/i18n/useI18n";


type ParetoRow = {
  reasonCode: string;
  reasonLabel: string;
  minutesLost?: number; // downtime
  scrapQty?: number; // scrap (future)
  pctOfTotal: number; // 0..100
  cumulativePct: number; // 0..100
};

type ParetoResponse = {
  ok?: boolean;
  rows?: ParetoRow[];
  top3?: ParetoRow[];
  totalMinutesLost?: number;
  threshold80?: { reasonCode: string; reasonLabel: string; index: number } | null;
  error?: string;
};

type CoverageResponse = {
  ok?: boolean;
  totalDowntimeMinutes?: number;
  receivedMinutes?: number;
  receivedCoveragePct?: number; // could be 0..1 or 0..100 depending on your impl
  pendingEpisodesCount?: number;
};

function clampLabel(s: string, max = 18) {
  if (!s) return "";
  return s.length > max ? `${s.slice(0, max - 1)}…` : s;
}

function normalizePct(v?: number | null) {
  if (v == null || Number.isNaN(v)) return null;
  // If API returns 0..1, convert to 0..100
  return v <= 1 ? v * 100 : v;
}

export default function DowntimeParetoCard({
  machineId,
  range = "7d",
  showCoverage = true,
  showOpenFullReport = true,
  variant = "summary",
  maxBars,
}: {
  machineId?: string;
  range?: DowntimeRange;
  showCoverage?: boolean;
  showOpenFullReport?: boolean;
  variant?: "summary" | "full";
  maxBars?: number; // optional override
}) {
  const { t } = useI18n();
  const isSummary = variant === "summary";
  const barsLimit = maxBars ?? (isSummary ? 5 : 12);
  const chartHeightClass = isSummary ? "h-[240px]" : "h-[360px]";
  const containerPad = isSummary ? "p-4" : "p-5";
  const [loading, setLoading] = useState(true);
  const [err, setErr] = useState<string | null>(null);
  const [pareto, setPareto] = useState<ParetoResponse | null>(null);
  const [coverage, setCoverage] = useState<CoverageResponse | null>(null);

  useEffect(() => {
    const controller = new AbortController();

    async function load() {
      setLoading(true);
      setErr(null);

      try {
        const qs = new URLSearchParams();
        qs.set("kind", "downtime");
        qs.set("range", range);
        if (machineId) qs.set("machineId", machineId);

        const res = await fetch(`/api/analytics/pareto?${qs.toString()}`, {
          cache: "no-cache",
          credentials: "include",
          signal: controller.signal,
        });

        const json = (await res.json().catch(() => ({}))) as ParetoResponse;

        if (!res.ok || json?.ok === false) {
          setPareto(null);
          setErr(json?.error ?? "Failed to load pareto.");
          setLoading(false);
          return;
        }

        setPareto(json);

        // Optional coverage (fail silently if endpoint not ready)
        if (showCoverage) {
          const cqs = new URLSearchParams();
          cqs.set("kind", "downtime");
          cqs.set("range", range);
          if (machineId) cqs.set("machineId", machineId);

          fetch(`/api/analytics/coverage?${cqs.toString()}`, {
            cache: "no-cache",
            credentials: "include",
            signal: controller.signal,
          })
            .then((r) => (r.ok ? r.json() : null))
            .then((cj) => (cj ? (cj as CoverageResponse) : null))
            .then((cj) => {
              if (cj) setCoverage(cj);
            })
            .catch(() => {
              // ignore
            });
        }

        setLoading(false);
      } catch (e: any) {
        if (e?.name === "AbortError") return;
        setErr("Network error.");
        setLoading(false);
      }
    }

    load();
    return () => controller.abort();
  }, [machineId, range, showCoverage]);

  const rows = pareto?.rows ?? [];

  const chartData = useMemo(() => {
    return rows.slice(0, barsLimit).map((r, idx) => ({
      i: idx,
      reasonCode: r.reasonCode,
      reasonLabel: r.reasonLabel,
      label: clampLabel(r.reasonLabel || r.reasonCode, isSummary ? 16 : 22),
      minutes: Number(r.minutesLost ?? 0),
      pctOfTotal: Number(r.pctOfTotal ?? 0),
      cumulativePct: Number(r.cumulativePct ?? 0),
    }));
  }, [rows, barsLimit, isSummary]);


  const top3 = useMemo(() => {
    if (pareto?.top3?.length) return pareto.top3.slice(0, 3);
    return [...rows]
      .sort((a, b) => Number(b.minutesLost ?? 0) - Number(a.minutesLost ?? 0))
      .slice(0, 3);
  }, [pareto?.top3, rows]);

  const totalMinutes = Number(pareto?.totalMinutesLost ?? 0);

  const covPct = normalizePct(coverage?.receivedCoveragePct ?? null);
  const pending = coverage?.pendingEpisodesCount ?? null;

  const title =
    range === "24h"
      ? "Downtime Pareto (24h)"
      : range === "30d"
        ? "Downtime Pareto (30d)"
        : range === "mtd"
          ? "Downtime Pareto (MTD)"
          : "Downtime Pareto (7d)";


  const reportHref = machineId
    ? `/downtime?machineId=${encodeURIComponent(machineId)}&range=${encodeURIComponent(range)}`
    : `/downtime?range=${encodeURIComponent(range)}`;

  return (
    <div className={`rounded-2xl border border-white/10 bg-white/5 ${containerPad}`}>
      <div className="flex flex-wrap items-start justify-between gap-3">
        <div>
          <div className="text-sm font-semibold text-white">{title}</div>
          <div className="mt-1 text-xs text-zinc-400">
            Total: <span className="text-white">{totalMinutes.toFixed(0)} min</span>
            {covPct != null ? (
              <>
                <span className="mx-2 text-zinc-600">•</span>
                Coverage: <span className="text-white">{covPct.toFixed(0)}%</span>
                {pending != null ? (
                  <>
                    <span className="mx-2 text-zinc-600">•</span>
                    Pending: <span className="text-white">{pending}</span>
                  </>
                ) : null}
              </>
            ) : null}
          </div>
        </div>
          {showOpenFullReport ? (
            <Link
              href={reportHref}
              className="rounded-xl border border-white/10 bg-white/5 px-3 py-1.5 text-xs text-white hover:bg-white/10"
            >
              View full report →
            </Link>
          ) : null}
      </div>

      {loading ? (
        <div className="mt-4 text-sm text-zinc-400">{t("machine.detail.loading")}</div>
      ) : err ? (
        <div className="mt-4 rounded-2xl border border-red-500/20 bg-red-500/10 p-4 text-sm text-red-200">
          {err}
        </div>
      ) : rows.length === 0 ? (
        <div className="mt-4 text-sm text-zinc-400">No downtime reasons found for this range.</div>
      ) : (
        <div className="mt-4 grid grid-cols-1 gap-4 lg:grid-cols-3">
          <div
            className={`${chartHeightClass} rounded-3xl border border-white/10 bg-black/30 p-4 backdrop-blur lg:col-span-2`}
            style={{ boxShadow: "var(--app-chart-shadow)" }}
          >
            <ResponsiveContainer width="100%" height="100%">
              <ComposedChart data={chartData} margin={{ top: 10, right: 24, left: 0, bottom: 10 }}>
                <CartesianGrid strokeDasharray="3 3" stroke="var(--app-chart-grid)" />
                <XAxis
                  dataKey="label"
                  interval={0}
                  tick={{ fill: "var(--app-chart-tick)", fontSize: 11 }}
                />
                <YAxis
                  yAxisId="left"
                  tick={{ fill: "var(--app-chart-tick)" }}
                  width={40}
                />
                <YAxis
                  yAxisId="right"
                  orientation="right"
                  domain={[0, 100]}
                  tick={{ fill: "var(--app-chart-tick)" }}
                  tickFormatter={(v) => `${v}%`}
                  width={44}
                />
                <Tooltip
                  cursor={{ stroke: "var(--app-chart-grid)" }}
                  contentStyle={{
                    background: "var(--app-chart-tooltip-bg)",
                    border: "1px solid var(--app-chart-tooltip-border)",
                  }}
                  labelStyle={{ color: "var(--app-chart-label)" }}
                  formatter={(val: any, name: any, ctx: any) => {
                    if (name === "minutes") return [`${Number(val).toFixed(1)} min`, "Minutes"];
                    if (name === "cumulativePct") return [`${Number(val).toFixed(1)}%`, "Cumulative"];
                    return [val, name];
                  }}
                />

                <ReferenceLine
                  yAxisId="right"
                  y={80}
                  stroke="rgba(255,255,255,0.25)"
                  strokeDasharray="6 6"
                />

                <Bar
                  yAxisId="left"
                  dataKey="minutes"
                  radius={[10, 10, 0, 0]}
                  isAnimationActive={false}
                  fill="#FF7A00"
                />
                <Line
                  yAxisId="right"
                  dataKey="cumulativePct"
                  dot={false}
                  strokeWidth={2}
                  isAnimationActive={false}
                  stroke="#12D18E"
                />
              </ComposedChart>
            </ResponsiveContainer>
          </div>

          <div className={`rounded-2xl border border-white/10 bg-black/20 ${isSummary ? "p-3" : "p-4"}`}>
            <div className="text-xs font-semibold text-white">Top 3 reasons</div>
            <div className="mt-3 space-y-3">
              {top3.map((r) => (
                <div key={r.reasonCode} className="rounded-xl border border-white/10 bg-white/5 p-3">
                  <div className="flex items-start justify-between gap-3">
                    <div className="min-w-0">
                      <div className="truncate text-sm font-semibold text-white">
                        {r.reasonLabel || r.reasonCode}
                      </div>
                      <div className="mt-1 text-xs text-zinc-400">{r.reasonCode}</div>
                    </div>
                    <div className="shrink-0 text-right">
                      <div className="text-sm font-semibold text-white">
                        {(r.minutesLost ?? 0).toFixed(0)}m
                      </div>
                      <div className="text-xs text-zinc-400">{(r.pctOfTotal ?? 0).toFixed(1)}%</div>
                    </div>
                  </div>
                </div>
              ))}
            </div>

            {!isSummary && pareto?.threshold80 ? (
              <div className="mt-4 rounded-xl border border-white/10 bg-white/5 p-3 text-xs text-zinc-300">
                80% cutoff:{" "}
                <span className="text-white">
                  {pareto.threshold80.reasonLabel} ({pareto.threshold80.reasonCode})
                </span>
              </div>
            ) : null}
          </div>
        </div>
      )}
    </div>
  );
}