"use client";

import {
  Wallet,
  Coins,
  Landmark,
  Sprout,
  Banknote,
  Leaf,
  Scale,
  Gauge,
  Cloud,
  type LucideIcon,
} from "lucide-react";
import { InfoDot, moneyFull } from "./primitives";
import { COST_HELP } from "./costHelp";
import { carsOffTheRoad } from "@/lib/reporting/model";

export interface LedgerView {
  constructionCost: number;
  projectDelivery: number;
  contingency: number;
  funding: number;
  grossCost: number;
  netCost: number;
  grossPerHome: number;
  billSavings: number;
  billSavingsPerHome: number;
  carbonSaved: number;
  costPerSap: number;
  costPerCarbon: number;
}

// The cost-composition palette echoes the data-quality evidence bar: quiet
// navy → gold → grey, so the reporting surfaces read as one system.
const COST_COLORS = {
  construction: "#14163d",
  delivery: "#a07c42",
  contingency: "#c5cad8",
} as const;

function GroupLabel({
  icon: Icon,
  children,
}: {
  icon: LucideIcon;
  children: React.ReactNode;
}) {
  return (
    <div className="flex items-center gap-1.5 px-5 pb-1.5 pt-4 text-[0.68rem] font-bold uppercase tracking-wide text-[#a07c42]">
      <Icon className="h-3.5 w-3.5" />
      {children}
    </div>
  );
}

/** A row led by an icon chip. `tone` tints benefits green, keeps the rest quiet. */
function IconRow({
  icon: Icon,
  label,
  value,
  note,
  tip,
  tone = "neutral",
}: {
  icon: LucideIcon;
  label: string;
  value: string;
  note?: string;
  tip?: React.ReactNode;
  tone?: "neutral" | "benefit";
}) {
  const chip =
    tone === "benefit"
      ? "bg-[#e9f4ef] text-[#0c6b4a]"
      : "bg-gray-50 text-gray-500";
  const valueColor = tone === "benefit" ? "text-[#0c6b4a]" : "text-brandblue";
  return (
    <div className="flex items-center justify-between gap-3 py-1 text-[0.84rem]">
      <span className="inline-flex items-center gap-2 text-gray-600">
        <span
          className={`inline-flex h-6 w-6 items-center justify-center rounded-md ${chip}`}
        >
          <Icon className="h-3.5 w-3.5" />
        </span>
        {label}
        {tip && <InfoDot label={label} tip={tip} />}
      </span>
      <span
        className={`whitespace-nowrap tabular-nums font-semibold ${valueColor}`}
      >
        {value}
        {note && <span className="font-normal text-gray-500"> · {note}</span>}
      </span>
    </div>
  );
}

export function InvestmentLedger({ v }: { v: LedgerView }) {
  const costParts = [
    {
      label: "Construction works",
      value: v.constructionCost,
      color: COST_COLORS.construction,
      help: COST_HELP.construction,
    },
    {
      label: "Project delivery",
      value: v.projectDelivery,
      color: COST_COLORS.delivery,
      help: COST_HELP.projectDelivery,
    },
    {
      label: "Contingency",
      value: v.contingency,
      color: COST_COLORS.contingency,
      help: COST_HELP.contingency,
    },
  ];
  const grossForBar = v.grossCost || 1;

  return (
    <div className="flex flex-col overflow-hidden rounded-lg border border-gray-200 bg-white">
      <header className="flex items-center gap-2 px-5 pt-4">
        <Wallet className="h-4 w-4 text-brandblue" />
        <h3 className="text-[0.88rem] font-semibold text-brandblue">
          Investment ledger
        </h3>
      </header>

      {/* Net cost — the headline figure a board commits to. */}
      <div className="mx-5 mt-3 rounded-lg border border-gray-100 bg-[#f6f7fb] px-4 py-3">
        <div className="flex items-center justify-between">
          <span className="inline-flex items-center gap-1 text-[0.68rem] font-bold uppercase tracking-wide text-gray-500">
            Net cost
            <InfoDot label="Net cost" tip={COST_HELP.net} />
          </span>
          <span className="inline-flex items-center gap-1 text-[0.72rem] font-medium text-gray-500">
            {moneyFull(v.grossPerHome)}
            <span className="text-gray-400">gross/home</span>
            <InfoDot label="Gross cost per home" tip={COST_HELP.grossPerHome} />
          </span>
        </div>
        <div className="mt-1 text-[1.6rem] font-bold leading-none tabular-nums text-brandblue">
          {moneyFull(v.netCost)}
        </div>
        <div className="mt-1.5 text-[0.72rem] text-gray-500">
          {moneyFull(v.grossCost)} gross · {moneyFull(v.funding)} funding
          secured
        </div>
      </div>

      {/* Cost breakdown — a proportion bar + rows keyed to it by colour. */}
      <GroupLabel icon={Coins}>Cost breakdown</GroupLabel>
      <div className="px-5">
        <div className="mb-3 flex h-2 overflow-hidden rounded-full">
          {costParts.map((p) => (
            <span
              key={p.label}
              style={{
                width: `${(p.value / grossForBar) * 100}%`,
                background: p.color,
              }}
            />
          ))}
        </div>
        {costParts.map((p) => (
          <div
            key={p.label}
            className="flex items-center justify-between gap-3 py-1 text-[0.84rem]"
          >
            <span className="inline-flex items-center gap-2 text-gray-500">
              <span
                className="h-2 w-2 rounded-full"
                style={{ background: p.color }}
              />
              {p.label}
              <InfoDot label={p.label} tip={p.help} />
            </span>
            <span className="tabular-nums font-semibold text-brandblue">
              {moneyFull(p.value)}
            </span>
          </div>
        ))}
        <div className="mt-1 flex items-center justify-between gap-3 border-t border-gray-100 py-1 pt-2 text-[0.84rem]">
          <span className="inline-flex items-center gap-2 text-gray-600">
            <Landmark className="h-3.5 w-3.5 text-[#0c6b4a]" />
            Funding secured
          </span>
          <span className="tabular-nums font-semibold text-[#0c6b4a]">
            −{moneyFull(v.funding)}
          </span>
        </div>
      </div>

      {/* Annual benefits — recurring, so tinted green like the savings they are. */}
      <GroupLabel icon={Sprout}>Annual benefits</GroupLabel>
      <div className="px-5">
        <IconRow
          icon={Banknote}
          label="Bill savings"
          value={moneyFull(v.billSavings)}
          note={`${moneyFull(v.billSavingsPerHome)}/home`}
          tip={COST_HELP.billSavings}
          tone="benefit"
        />
        <IconRow
          icon={Leaf}
          label="Carbon saved"
          value={`${Math.round(v.carbonSaved)} t`}
          note={`≈ ${carsOffTheRoad(v.carbonSaved)} cars`}
          tip={COST_HELP.carbonSaved}
          tone="benefit"
        />
      </div>

      {/* Value for money */}
      <GroupLabel icon={Scale}>Value for money</GroupLabel>
      <div className="px-5 pb-4">
        <IconRow
          icon={Gauge}
          label="Cost per SAP point"
          value={moneyFull(v.costPerSap)}
          tip={COST_HELP.costPerSap}
        />
        <IconRow
          icon={Cloud}
          label="Cost per tCO₂/yr"
          value={moneyFull(v.costPerCarbon)}
          tip={COST_HELP.costPerCarbon}
        />
      </div>
    </div>
  );
}
