"use client";

import {
  AlertTriangle,
  ArrowRight,
  BookOpen,
  ChevronDown,
  CircleCheckBig,
  Factory,
  FlaskConical,
  Gauge,
  Recycle,
  Rocket,
  Scale,
  ShieldCheck,
  Sparkles,
  Zap,
} from "lucide-react";

import { Button } from "@/components/ui/button";
import {
  HELP_COPY,
  type CalculatorRoute,
} from "@/app/lib/help-content";
import { tr } from "@/app/lib/i18n";
import type { CalculatorSection, Locale } from "@/app/lib/types";
import { CollapsiblePanel } from "./calculator-widgets";

const calculatorRoutes: Array<{
  id: CalculatorRoute;
  key:
    | "science"
    | "production"
    | "quality"
    | "recycling"
    | "qualityRecycling"
    | "rocket"
    | "energy";
  icon: React.ReactNode;
}> = [
  { id: "science", key: "science", icon: <FlaskConical /> },
  { id: "production", key: "production", icon: <Factory /> },
  { id: "quality", key: "quality", icon: <Sparkles /> },
  { id: "recycling", key: "recycling", icon: <Recycle /> },
  {
    id: "quality-recycling",
    key: "qualityRecycling",
    icon: <Recycle />,
  },
  { id: "rocket", key: "rocket", icon: <Rocket /> },
  { id: "energy", key: "energy", icon: <Zap /> },
];

function RouteButton({
  route,
  locale,
  label,
  onNavigate,
  compact = false,
}: {
  route: CalculatorRoute;
  locale: Locale;
  label: string;
  onNavigate: (section: CalculatorSection) => void;
  compact?: boolean;
}) {
  const calculator = calculatorRoutes.find((entry) => entry.id === route)!;
  return (
    <Button
      type="button"
      variant="outline"
      size={compact ? "sm" : "default"}
      className={
        compact
          ? "help-inline-action border-[#f7a72d]/25 bg-[#f7a72d]/7 text-[#f7c16e]"
          : "help-calculator-link h-auto min-h-12 justify-between whitespace-normal border-white/10 bg-[#151719] px-3 py-2.5 text-left"
      }
      onClick={() => onNavigate(route)}
    >
      <span className="flex min-w-0 items-center gap-2.5">
        <span className="help-route-icon">{calculator.icon}</span>
        <span className="truncate">{tr(locale, calculator.key)}</span>
      </span>
      {compact ? <ArrowRight className="size-3.5" /> : (
        <span className="flex items-center gap-1 font-mono text-[10px] uppercase tracking-wider text-zinc-500">
          {label}
          <ArrowRight className="size-3.5" />
        </span>
      )}
    </Button>
  );
}

export function HelpWorkspace({
  locale,
  onNavigate,
}: {
  locale: Locale;
  onNavigate: (section: CalculatorSection) => void;
}) {
  const copy = HELP_COPY[locale];
  return (
    <section className="help-workspace" aria-labelledby="help-title">
      <div className="help-layout">
        <aside className="help-sidebar" aria-label={copy.contents}>
          <div className="help-sidebar-card">
            <p className="help-sidebar-label">{copy.contents}</p>
            <a className="help-toc-link" href="#help-quick-start">
              <span>00</span>
              {copy.quickStart}
            </a>
            {copy.topics.map((topic, index) => (
              <a
                className="help-toc-link"
                href={`#help-${topic.id}`}
                key={topic.id}
              >
                <span>{String(index + 1).padStart(2, "0")}</span>
                {topic.title.replace(/^\d+\.\s*/, "")}
              </a>
            ))}
          </div>
        </aside>

        <div className="help-content">
          <header className="help-hero">
            <div className="help-hero-mark">
              <BookOpen className="size-6" />
            </div>
            <div className="min-w-0">
              <p className="help-eyebrow">{copy.eyebrow}</p>
              <h2 id="help-title">{copy.title}</h2>
              <p>{copy.intro}</p>
            </div>
            <div className="help-release-badges">
              <span className="badge-orange">{copy.versionLabel}</span>
              <span className="badge-muted">{copy.releaseStatus}</span>
            </div>
          </header>

          <section className="help-calculator-jump" aria-labelledby="help-calculators">
            <div className="help-section-heading">
              <Gauge className="size-4" />
              <h3 id="help-calculators">{copy.calculators}</h3>
            </div>
            <div className="help-calculator-grid">
              {calculatorRoutes.map((entry) => (
                <RouteButton
                  key={entry.id}
                  route={entry.id}
                  locale={locale}
                  label={copy.openCalculator}
                  onNavigate={onNavigate}
                />
              ))}
            </div>
          </section>

          <section
            className="help-quick-start"
            id="help-quick-start"
            aria-labelledby="help-quick-start-title"
          >
            <div className="help-section-heading">
              <CircleCheckBig className="size-4" />
              <h3 id="help-quick-start-title">{copy.quickStart}</h3>
            </div>
            <p>{copy.quickStartIntro}</p>
            <ol className="help-step-grid">
              {copy.steps.map((step, index) => (
                <li key={step}>
                  <span>{String(index + 1).padStart(2, "0")}</span>
                  <p>{step}</p>
                </li>
              ))}
            </ol>
          </section>

          <div className="help-guide-heading">
            <p>{copy.detailsHint}</p>
          </div>

          <div className="help-topic-list">
            {copy.topics.map((topic, index) => (
              <CollapsiblePanel
                className="help-topic collapsible-panel"
                defaultOpen={index < 2}
                id={`help-${topic.id}`}
                key={topic.id}
              >
                <summary className="collapsible-summary list-none p-4">
                  <span className="summary-leading flex min-w-0 items-center gap-3">
                    <span className="help-topic-number">
                      {String(index + 1).padStart(2, "0")}
                    </span>
                    <span className="min-w-0">
                      <strong>{topic.title.replace(/^\d+\.\s*/, "")}</strong>
                      <small>{topic.intro}</small>
                    </span>
                  </span>
                  <span className="summary-trailing">
                    <ChevronDown className="details-chevron size-4 text-zinc-500 transition-transform" />
                  </span>
                </summary>
                <div className="help-topic-body">
                  <ul>
                    {topic.points.map((point) => (
                      <li key={point}>
                        <CircleCheckBig className="size-4" />
                        <span>{point}</span>
                      </li>
                    ))}
                  </ul>
                  {topic.details ? (
                    <dl className="help-panel-details">
                      {topic.details.map((detail) => (
                        <div key={detail.title}>
                          <dt>{detail.title}</dt>
                          <dd>{detail.text}</dd>
                        </div>
                      ))}
                    </dl>
                  ) : null}
                  {topic.action ? (
                    <RouteButton
                      route={topic.action}
                      locale={locale}
                      label={copy.openCalculator}
                      onNavigate={onNavigate}
                      compact
                    />
                  ) : null}
                </div>
              </CollapsiblePanel>
            ))}
          </div>

          <section className="help-legal-grid" aria-label={copy.unofficialTitle}>
            <article className="help-legal-card" data-tone="orange">
              <Scale className="size-5" />
              <div>
                <h3>{copy.unofficialTitle}</h3>
                <p>{copy.unofficialNotice}</p>
              </div>
            </article>
            <article className="help-legal-card" data-tone="blue">
              <ShieldCheck className="size-5" />
              <div>
                <h3>{copy.privacyTitle}</h3>
                <p>{copy.privacyNotice}</p>
              </div>
            </article>
            <article className="help-legal-card" data-tone="warning">
              <AlertTriangle className="size-5" />
              <div>
                <h3>{copy.publicReleaseTitle}</h3>
                <p>{copy.publicReleaseNotice}</p>
              </div>
            </article>
          </section>

        </div>
      </div>
    </section>
  );
}
