"use client";

import { useEffect, useRef, useState, type KeyboardEvent } from "react";
import { MerRoasChart, PipelineChart } from "@/components/home/MetricCharts";
import { PlusMinus } from "@/components/ui/Icons";
import { IllustrativeTag } from "@/components/ui/Structured";
import type { BusinessModel, MetricDefinition } from "@/content/types";
import { cn } from "@/lib/cn";

const MODELS: { id: BusinessModel; label: string }[] = [
  { id: "saas", label: "SaaS" },
  { id: "ecommerce", label: "E-commerce" },
];

interface MetricPanelProps {
  metricsByModel: Record<BusinessModel, MetricDefinition[]>;
  chartTitles: Record<BusinessModel, { title: string; caption: string }>;
  footnote: string;
}

export function MetricPanel({ metricsByModel, chartTitles, footnote }: MetricPanelProps) {
  const [model, setModel] = useState<BusinessModel>("saas");
  const [selected, setSelected] = useState<Record<BusinessModel, number>>({ saas: 0, ecommerce: 0 });
  const [visible, setVisible] = useState(false);
  const panelRef = useRef<HTMLDivElement>(null);
  const tabRefs = useRef<Record<BusinessModel, HTMLButtonElement | null>>({ saas: null, ecommerce: null });

  useEffect(() => {
    const element = panelRef.current;
    if (!element) return;
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setVisible(true);
          observer.disconnect();
        }
      },
      { threshold: 0.25 },
    );
    observer.observe(element);
    return () => observer.disconnect();
  }, []);

  const onTabKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
    if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) return;
    event.preventDefault();
    const next: BusinessModel =
      event.key === "Home" ? "saas" : event.key === "End" ? "ecommerce" : model === "saas" ? "ecommerce" : "saas";
    setModel(next);
    tabRefs.current[next]?.focus();
  };

  const metrics = metricsByModel[model];
  const chart = chartTitles[model];

  return (
    <div ref={panelRef} className="mt-14 lg:mt-20">
      <div className="flex flex-wrap items-center justify-between gap-4">
        <div role="tablist" aria-label="Business model" className="inline-flex rounded-md border border-night-line p-1" onKeyDown={onTabKeyDown}>
          {MODELS.map((item) => (
            <button
              key={item.id}
              ref={(node) => {
                tabRefs.current[item.id] = node;
              }}
              type="button"
              role="tab"
              id={`metrics-tab-${item.id}`}
              aria-selected={model === item.id}
              aria-controls="metrics-tabpanel"
              tabIndex={model === item.id ? 0 : -1}
              onClick={() => setModel(item.id)}
              className={cn(
                "h-10 rounded-[0.375rem] px-5 text-sm font-medium transition-colors duration-300",
                model === item.id ? "bg-paper text-ink" : "text-night-muted hover:text-night-text",
              )}
            >
              {item.label}
            </button>
          ))}
        </div>
        <IllustrativeTag tone="dark" />
      </div>

      <div id="metrics-tabpanel" role="tabpanel" aria-labelledby={`metrics-tab-${model}`} className="mt-8 grid gap-8 lg:grid-cols-12 lg:gap-6">
        <div className="lg:col-span-5">
          <ul className="border-t border-night-line" aria-label={`${model === "saas" ? "SaaS" : "E-commerce"} metrics`}>
            {metrics.map((metric, index) => {
              const isOpen = selected[model] === index;
              const detailId = `metric-detail-${model}-${index}`;
              return (
                <li key={`${model}-${metric.code}`} className="border-b border-night-line">
                  <button
                    type="button"
                    aria-expanded={isOpen}
                    aria-controls={detailId}
                    onClick={() => setSelected((current) => ({ ...current, [model]: isOpen ? -1 : index }))}
                    className="group flex min-h-14 w-full items-center gap-4 py-3 text-left"
                  >
                    <span className={cn("w-24 shrink-0 font-mono text-sm transition-colors", isOpen ? "text-signal-bright" : "text-night-muted")}>
                      {metric.code}
                    </span>
                    <span className={cn("flex-1 transition-colors", isOpen ? "text-night-text" : "text-night-text/85 group-hover:text-night-text")}>
                      {metric.name}
                    </span>
                    <PlusMinus size={14} className={cn("shrink-0 text-night-muted transition-transform duration-300", isOpen && "rotate-45")} />
                  </button>
                  <div
                    id={detailId}
                    className="grid transition-[grid-template-rows] duration-500 ease-out-expo"
                    style={{ gridTemplateRows: isOpen ? "1fr" : "0fr" }}
                    inert={!isOpen}
                  >
                    <div className="overflow-hidden">
                      <dl className="grid gap-4 pb-6 text-[0.9375rem] sm:grid-cols-2 sm:pl-28 lg:grid-cols-1 xl:grid-cols-2">
                        <div>
                          <dt className="text-label uppercase text-night-muted">What it tells you</dt>
                          <dd className="mt-2 text-night-text/90">{metric.definition}</dd>
                        </div>
                        <div>
                          <dt className="text-label uppercase text-night-muted">Decision it informs</dt>
                          <dd className="mt-2 text-night-text/90">{metric.decision}</dd>
                        </div>
                      </dl>
                    </div>
                  </div>
                </li>
              );
            })}
          </ul>
        </div>

        <div className="lg:col-span-7">
          <figure key={model} className="fade-rise rounded-lg border border-night-line bg-night-raised p-5 sm:p-8">
            <figcaption className="mb-5 text-title">{chart.title}</figcaption>
            {model === "saas" ? <PipelineChart visible={visible} /> : <MerRoasChart visible={visible} />}
            <p className="mt-5 border-t border-night-line pt-4 text-[0.9375rem] text-night-muted">{chart.caption}</p>
          </figure>
          <p className="mt-4 text-xs text-night-muted">{footnote}</p>
        </div>
      </div>
    </div>
  );
}