"use client";

import Image from "next/image";
import { useEffect, useMemo, useState } from "react";
import { HaloIcon } from "@/components/ui/HaloIcon";
import {
  dealerFlowStages,
  dealerFlowVehicles,
  type DealerFlowStageId,
  type DealerFlowVehicle
} from "@/content/dealer-presentation";
import styles from "./dealer-flows-demo.module.css";

type BoardView = "board" | "table";

const heroStock = "#9217";

function getLiveVehicle(vehicle: DealerFlowVehicle, advanced: boolean): DealerFlowVehicle {
  if (vehicle.stockNumber !== heroStock || !advanced) return vehicle;

  return {
    ...vehicle,
    stage: "imagery",
    owner: "Merchandising",
    time: "Just now",
    status: "Capture started",
    event: "Secure SMS opened · Guided Capture has begun"
  };
}

function statusTone(vehicle: DealerFlowVehicle) {
  if (vehicle.sla === "At risk") return "review";
  if (vehicle.status === "Published") return "published";
  if (vehicle.status.includes("Capture") || vehicle.status === "Notified") return "capturing";
  if (vehicle.status === "In progress") return "processing";
  return "queued";
}

function VehicleCard({
  selected,
  vehicle,
  onSelect
}: {
  selected: boolean;
  vehicle: DealerFlowVehicle;
  onSelect: () => void;
}) {
  return (
    <button
      aria-pressed={selected}
      className={styles.vehicleCard}
      data-featured={vehicle.stockNumber === heroStock ? "true" : "false"}
      data-selected={selected ? "true" : "false"}
      data-sla={vehicle.sla}
      data-stage={dealerFlowStages.find((stage) => stage.id === vehicle.stage)?.label}
      data-stock={vehicle.stockNumber}
      onClick={onSelect}
      type="button"
    >
      <span className={styles.cardTop}>
        <span>{vehicle.stockNumber}</span>
        <small data-sla={vehicle.sla}>{vehicle.sla}</small>
      </span>
      <strong>{vehicle.vehicle}</strong>
      {vehicle.observation ? <em>{vehicle.observation}</em> : null}
      <span className={styles.cardStatus} data-tone={statusTone(vehicle)}>
        {vehicle.status}
      </span>
      <span className={styles.cardFooter}>
        <span>{vehicle.time}</span>
        <span>{vehicle.owner}</span>
      </span>
    </button>
  );
}

export function DealerFlowsDemo() {
  const [advanced, setAdvanced] = useState(false);
  const [advancing, setAdvancing] = useState(false);
  const [collapsed, setCollapsed] = useState(true);
  const [query, setQuery] = useState("");
  const [stageFilter, setStageFilter] = useState<DealerFlowStageId | "all">("all");
  const [mobileStage, setMobileStage] = useState<DealerFlowStageId>("detail");
  const [selectedStock, setSelectedStock] = useState<string | null>(null);
  const [view, setView] = useState<BoardView>("board");

  useEffect(() => {
    if (!advancing) return;
    const timer = window.setTimeout(() => {
      setAdvanced(true);
      setAdvancing(false);
      setMobileStage("imagery");
      setSelectedStock(heroStock);
    }, 620);
    return () => window.clearTimeout(timer);
  }, [advancing]);

  const liveVehicles = useMemo(
    () => dealerFlowVehicles.map((vehicle) => getLiveVehicle(vehicle, advanced)),
    [advanced]
  );

  const filteredVehicles = useMemo(() => {
    const normalized = query.trim().toLowerCase();
    return liveVehicles.filter((vehicle) => {
      if (stageFilter !== "all" && vehicle.stage !== stageFilter) return false;
      if (!normalized) return true;
      return [vehicle.stockNumber, vehicle.vin, vehicle.vehicle, vehicle.owner, vehicle.status]
        .join(" ")
        .toLowerCase()
        .includes(normalized);
    });
  }, [liveVehicles, query, stageFilter]);

  const selectedVehicle = selectedStock
    ? (liveVehicles.find((vehicle) => vehicle.stockNumber === selectedStock) ?? null)
    : null;
  const readyForImagery = liveVehicles.filter((vehicle) => vehicle.stage === "detail").length;
  const attentionCount = liveVehicles.filter((vehicle) => vehicle.sla === "At risk").length;
  const listedCount = liveVehicles.filter((vehicle) => vehicle.stage === "listed").length;

  function resetDemo() {
    setAdvanced(false);
    setAdvancing(false);
    setQuery("");
    setStageFilter("all");
    setMobileStage("detail");
    setSelectedStock(null);
    setView("board");
  }

  return (
    <div
      aria-label="Halo Operations Board presentation view"
      className={styles.demo}
      data-advanced={advanced ? "true" : "false"}
      data-advancing={advancing ? "true" : "false"}
    >
      <div className={styles.shell} data-sidebar={collapsed ? "collapsed" : "expanded"}>
        <aside className={styles.sidebar} aria-label="Operations Board navigation">
          <button
            aria-label={collapsed ? "Expand dashboard navigation" : "Collapse dashboard navigation"}
            aria-expanded={!collapsed}
            className={styles.sidebarToggle}
            onClick={() => setCollapsed((current) => !current)}
            type="button"
          >
            <HaloIcon name={collapsed ? "chevronRight" : "chevronLeft"} size="xs" />
          </button>
          <div className={styles.brand}>
            <Image alt="Halo" height={100} src="/brand/halo-prism-icon-light.svg" width={77} />
            <strong>HALO</strong>
          </div>
          <nav>
            {[
              ["grid", "Overview", "38"],
              ["car", "Vehicles", "142"],
              ["route", "Workflows", "12"],
              ["alert", "Alerts", "2"]
            ].map(([icon, label, count]) => (
              <button aria-current={label === "Workflows" ? "page" : undefined} key={label} type="button">
                <HaloIcon name={icon as "grid" | "car" | "route" | "alert"} size="sm" />
                <span>{label}</span>
                <small>{count}</small>
              </button>
            ))}
          </nav>
          <div className={styles.today}>
            <span>Today</span>
            <strong>38</strong>
            <small>active vehicles</small>
          </div>
        </aside>

        <section className={styles.workspace}>
          <header className={styles.mobileHeader}>
            <Image alt="Halo" height={100} src="/brand/halo-prism-icon-light.svg" width={77} />
            <span>
              <strong>Workflows</strong>
              Downtown Motors
            </span>
            <span className={styles.live}>Live</span>
          </header>

          <div className={styles.commandBar}>
            <label className={styles.search}>
              <HaloIcon name="search" size="sm" />
              <input
                aria-label="Search the Operations Board"
                onChange={(event) => setQuery(event.target.value)}
                placeholder="Search stock, VIN, vehicle, or owner"
                type="search"
                value={query}
              />
            </label>
            <span className={styles.rooftop}>Downtown Motors</span>
            <span className={styles.workflow}>Merchandising</span>
            <span className={styles.live}>Live</span>
          </div>

          <main className={styles.content}>
            <section className={styles.summary}>
              <div>
                <span>HALO FLOWS · MERCHANDISING</span>
                <h3>Operations Board</h3>
                <p>Vehicles moving through merchandising in real time.</p>
              </div>
              <div className={styles.kpis} aria-label="Operations Board summary">
                <article>
                  <strong>{readyForImagery}</strong>
                  <span>Ready for imagery</span>
                </article>
                <article>
                  <strong>{attentionCount}</strong>
                  <span>At risk</span>
                </article>
                <article>
                  <strong>{listedCount}</strong>
                  <span>Listed today</span>
                </article>
              </div>
            </section>

            <section className={styles.boardPanel}>
              <div className={styles.toolbar}>
                <strong>Board</strong>
                <div>
                  <label>
                    <span>Stage</span>
                    <select
                      aria-label="Filter dashboard by stage"
                      onChange={(event) => setStageFilter(event.target.value as DealerFlowStageId | "all")}
                      value={stageFilter}
                    >
                      <option value="all">All stages</option>
                      {dealerFlowStages.map((stage) => (
                        <option key={stage.id} value={stage.id}>
                          {stage.label}
                        </option>
                      ))}
                    </select>
                  </label>
                  <div className={styles.segmented} aria-label="Dashboard view">
                    <button aria-pressed={view === "board"} onClick={() => setView("board")} type="button">
                      <HaloIcon name="board" size="xs" /> Board
                    </button>
                    <button aria-pressed={view === "table"} onClick={() => setView("table")} type="button">
                      <HaloIcon name="table" size="xs" /> Table
                    </button>
                  </div>
                  <button
                    className={styles.handoffButton}
                    disabled={advanced || advancing}
                    onClick={() => setAdvancing(true)}
                    type="button"
                  >
                    <HaloIcon name={advanced ? "check" : "arrow-right"} size="xs" />
                    {advancing ? "Moving #9217…" : advanced ? "#9217 moved" : "Complete Detail · #9217"}
                  </button>
                  <button
                    aria-label="Reset dashboard demonstration"
                    className={styles.reset}
                    onClick={resetDemo}
                    type="button"
                  >
                    <HaloIcon name="retry" size="xs" />
                  </button>
                </div>
              </div>

              {view === "board" ? (
                <div className={styles.boardViewport}>
                  <div className={styles.mobileStages} aria-label="Workflow stages">
                    {dealerFlowStages.map((stage) => (
                      <button
                        aria-current={mobileStage === stage.id ? "true" : undefined}
                        key={stage.id}
                        onClick={() => setMobileStage(stage.id)}
                        type="button"
                      >
                        {stage.shortLabel}
                        <span>{filteredVehicles.filter((vehicle) => vehicle.stage === stage.id).length}</span>
                      </button>
                    ))}
                  </div>
                  <div className={styles.kanban} aria-label="Vehicle workflow Kanban board">
                    {dealerFlowStages.map((stage) => {
                      const vehicles = filteredVehicles.filter((vehicle) => vehicle.stage === stage.id);
                      return (
                        <section
                          aria-label={`${stage.label}, ${vehicles.length} vehicles`}
                          className={styles.lane}
                          data-mobile-active={mobileStage === stage.id ? "true" : "false"}
                          key={stage.id}
                        >
                          <header>
                            <span>
                              <strong>{stage.label}</strong>
                              <small>{stage.team}</small>
                            </span>
                            <b>{vehicles.length}</b>
                          </header>
                          <div>
                            {vehicles.map((vehicle) => (
                              <VehicleCard
                                key={vehicle.stockNumber}
                                onSelect={() => setSelectedStock(vehicle.stockNumber)}
                                selected={selectedStock === vehicle.stockNumber}
                                vehicle={vehicle}
                              />
                            ))}
                            {!vehicles.length ? <p>No matching vehicles</p> : null}
                          </div>
                        </section>
                      );
                    })}
                  </div>
                </div>
              ) : (
                <div className={styles.tableWrap}>
                  <table>
                    <thead>
                      <tr>
                        <th>Stock / Vehicle</th>
                        <th>Stage</th>
                        <th>Owner</th>
                        <th>Status</th>
                        <th>SLA</th>
                      </tr>
                    </thead>
                    <tbody>
                      {filteredVehicles.map((vehicle) => (
                        <tr
                          data-featured={vehicle.stockNumber === heroStock ? "true" : "false"}
                          key={vehicle.stockNumber}
                        >
                          <td>
                            <button onClick={() => setSelectedStock(vehicle.stockNumber)} type="button">
                              <strong>{vehicle.stockNumber}</strong>
                              <span>{vehicle.vehicle}</span>
                            </button>
                          </td>
                          <td>{dealerFlowStages.find((stage) => stage.id === vehicle.stage)?.label}</td>
                          <td>{vehicle.owner}</td>
                          <td>{vehicle.status}</td>
                          <td>{vehicle.sla}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )}
            </section>

            {selectedVehicle ? (
              <div className={styles.drawerLayer}>
                <aside
                  className={styles.drawer}
                  aria-label={`${selectedVehicle.stockNumber} vehicle workflow detail`}
                >
                  <header>
                    <span>VEHICLE WORKFLOW</span>
                    <button
                      aria-label="Close vehicle detail"
                      onClick={() => setSelectedStock(null)}
                      type="button"
                    >
                      <HaloIcon name="x" size="sm" />
                    </button>
                    <strong>{selectedVehicle.stockNumber}</strong>
                    <small>{selectedVehicle.vehicle}</small>
                  </header>
                  <div className={styles.drawerMetrics}>
                    <article>
                      <span>Current stage</span>
                      <strong>
                        {dealerFlowStages.find((stage) => stage.id === selectedVehicle.stage)?.label}
                      </strong>
                    </article>
                    <article>
                      <span>Time in stage</span>
                      <strong>{selectedVehicle.time}</strong>
                    </article>
                  </div>
                  <section>
                    <span>Owner and next action</span>
                    <strong>{selectedVehicle.owner}</strong>
                    <p>{selectedVehicle.event}</p>
                  </section>
                  {selectedVehicle.observation ? (
                    <section>
                      <span>Vehicle Observations</span>
                      <p className={styles.observation}>Exterior cleaning recommended before publication.</p>
                    </section>
                  ) : null}
                  <section>
                    <span>VIN-linked progression</span>
                    <ol>
                      {dealerFlowStages.map((stage) => {
                        const currentIndex = dealerFlowStages.findIndex(
                          (item) => item.id === selectedVehicle.stage
                        );
                        const stageIndex = dealerFlowStages.findIndex((item) => item.id === stage.id);
                        return (
                          <li
                            data-state={
                              stageIndex < currentIndex
                                ? "complete"
                                : stageIndex === currentIndex
                                  ? "active"
                                  : "pending"
                            }
                            key={stage.id}
                          >
                            {stage.label}
                          </li>
                        );
                      })}
                    </ol>
                  </section>
                </aside>
              </div>
            ) : null}
          </main>
        </section>
      </div>
    </div>
  );
}