FluxAnalysis

"use client";

import * as React from "react";
import { cn } from "@/lib/ledger/cn";
import { formatTimestamp } from "@/lib/ledger/fiscal-period";
import type { MoneyValue, Polarity } from "@/lib/ledger/money.types";
import { Button } from "@/components/ledger/button";
import { Delta } from "@/components/ledger/delta";
import { ChatBubbleLeftIcon, CheckIcon, ExclamationTriangleIcon } from "@/components/ledger/icons";
import { Money } from "@/components/ledger/money";

/** "Revenue up 12%" is not an explanation; "volume up 18%, price down 5%" is. */
export const FLUX_DRIVERS = [
  "Volume",
  "Price",
  "Mix",
  "Timing",
  "One-time item",
  "FX",
  "Reclassification",
  "Error correction",
] as const;

export type FluxItem = {
  id: string;
  line: string;
  current: MoneyValue;
  prior: MoneyValue;
  variance: MoneyValue;
  percent: number | null;
  polarity: Polarity;
  material: boolean;
  explanation?: { driver: string; text: string; author: string; at: Date };
};

export interface FluxAnalysisProps {
  className?: string;
  items: FluxItem[];
  /** Displayed, so a reviewer knows what they are *not* seeing. */
  materiality: { absolute: MoneyValue; relative: number };
  onExplain?: (id: string, driver: string, text: string) => void;
}

/**
 * The actual month-end close workflow, and no library supports it.
 * Unexplained material variances are the reviewer's worklist.
 */
export function FluxAnalysis({ items, materiality, onExplain, className }: FluxAnalysisProps) {
  const [drafting, setDrafting] = React.useState<string | null>(null);
  const [driver, setDriver] = React.useState<string>(FLUX_DRIVERS[0]);
  const [text, setText] = React.useState("");

  const unexplained = items.filter((i) => i.material && !i.explanation);

  return (
    <div className={cn("space-y-4", className)}>
      <div className="flex flex-wrap items-center gap-3 rounded-md border border-border bg-surface px-4 py-3">
        <span className="text-label font-medium">Flux analysis</span>
        <span className="text-caption text-text-secondary">
          Flagging variances over <Money size="xs" tone="inherit" value={materiality.absolute} /> and{" "}
          <span className="numeric">{materiality.relative}%</span> — both must be exceeded.
        </span>
        <span
          className={cn(
            "ml-auto flex items-center gap-1.5 rounded-sm px-2 py-1 text-caption font-medium",
            unexplained.length === 0 ? "bg-positive-subtle text-positive" : "bg-warning-subtle text-warning",
          )}
        >
          {unexplained.length === 0 ? (
            <CheckIcon aria-hidden="true" className="size-3.5" />
          ) : (
            <ExclamationTriangleIcon aria-hidden="true" className="size-3.5" />
          )}
          {unexplained.length === 0
            ? "All material variances explained"
            : `${unexplained.length} unexplained`}
        </span>
      </div>

      <ul className="space-y-2">
        {items.map((item) => (
          <li
            className={cn(
              "rounded-md border bg-surface p-4",
              item.material && !item.explanation ? "border-[var(--warning)]" : "border-border",
            )}
            key={item.id}
          >
            <div className="flex flex-wrap items-baseline justify-between gap-3">
              <span className="text-body font-medium">{item.line}</span>
              <span className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
                <Money accounting tone="secondary" value={item.prior} />
                <span aria-hidden="true" className="text-text-tertiary">
                  →
                </span>
                <Money accounting value={item.current} />
                <Delta
                  percent={item.percent === null ? undefined : { kind: "relative", value: item.percent }}
                  polarity={item.polarity}
                  value={item.variance}
                />
              </span>
            </div>

            {item.explanation ? (
              <div className="mt-3 rounded-sm bg-surface-sunken p-3">
                <p className="text-caption font-medium text-text-secondary">{item.explanation.driver}</p>
                <p className="mt-0.5 text-body">{item.explanation.text}</p>
                <p className="mt-1 text-caption text-text-tertiary">
                  {item.explanation.author} · {formatTimestamp(item.explanation.at)}
                </p>
              </div>
            ) : item.material ? (
              drafting === item.id ? (
                <div className="mt-3 space-y-2">
                  <select
                    aria-label="Variance driver"
                    className="h-8 rounded-sm border border-border bg-surface px-2 text-label outline-none focus-visible:border-accent focus-visible:ring-2 focus-visible:ring-accent-subtle"
                    onChange={(e) => setDriver(e.target.value)}
                    value={driver}
                  >
                    {FLUX_DRIVERS.map((d) => (
                      <option key={d}>{d}</option>
                    ))}
                  </select>
                  <textarea
                    aria-label="Explanation"
                    className="w-full rounded-sm border border-border bg-surface p-2 text-body outline-none focus-visible:border-accent"
                    onChange={(e) => setText(e.target.value)}
                    placeholder="What drove it? Be specific — volume, price, mix."
                    rows={2}
                    value={text}
                  />
                  <div className="flex gap-2">
                    <Button
                      disabled={!text.trim()}
                      onClick={() => {
                        onExplain?.(item.id, driver, text);
                        setDrafting(null);
                        setText("");
                      }}
                      size="sm"
                      variant="primary"
                    >
                      Save explanation
                    </Button>
                    <Button onClick={() => setDrafting(null)} size="sm" variant="ghost">
                      Cancel
                    </Button>
                  </div>
                </div>
              ) : (
                <Button className="mt-3" onClick={() => setDrafting(item.id)} size="sm" variant="secondary">
                  <ChatBubbleLeftIcon aria-hidden="true" className="size-3.5" />
                  Explain this variance
                </Button>
              )
            ) : null}
          </li>
        ))}
      </ul>
    </div>
  );
}