"use client";

import { ArrowDown, ArrowUp, Lightbulb, Wallet } from "lucide-react";

import type { DriftAllocationComparison } from "@/app/customer/[tenant]/settings/_lib/tenant-settings-server-api";
import { cn } from "@/lib/utils";
import { buildReallocationPlanItems, type ReallocationPlanItem } from "./build-reallocation-plan-items";
import { DriftSection } from "./drift-ui-primitives";
import { formatDriftAmount } from "./format-drift";

type SuggestedReallocationCardProps = {
  comparison: DriftAllocationComparison[];
  totalPortfolioValue: number;
  reportingCode: string;
  showTotalBadge?: boolean;
};

export function TotalPortfolioValueBadge({
  totalPortfolioValue,
  reportingCode,
}: {
  totalPortfolioValue: number;
  reportingCode: string;
}) {
  return (
    <div className="inline-flex items-center gap-3 rounded-2xl border border-border/70 bg-card px-5 py-4 shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
      <div className="flex size-10 shrink-0 items-center justify-center rounded-2xl border border-border/60 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400">
        <Wallet className="size-4" />
      </div>
      <div>
        <p className="font-medium text-[11px] text-muted-foreground uppercase tracking-[0.14em]">Portfolio value</p>
        <p className="mt-1 font-semibold text-2xl tabular-nums tracking-tight leading-none text-emerald-700 dark:text-emerald-400">
          {formatDriftAmount(totalPortfolioValue, reportingCode)}
        </p>
      </div>
    </div>
  );
}

export function SuggestedReallocationCard({
  comparison,
  totalPortfolioValue,
  reportingCode,
  showTotalBadge = true,
}: SuggestedReallocationCardProps) {
  const { reduceItems, addItems } = buildReallocationPlanItems(comparison);

  if (reduceItems.length === 0 && addItems.length === 0) {
    return showTotalBadge ? (
      <TotalPortfolioValueBadge totalPortfolioValue={totalPortfolioValue} reportingCode={reportingCode} />
    ) : null;
  }

  const totalReduce = reduceItems.reduce((sum, item) => sum + item.amount, 0);
  const totalAdd = addItems.reduce((sum, item) => sum + item.amount, 0);
  const isBalanced = reduceItems.length > 0 && addItems.length > 0 && Math.abs(totalReduce - totalAdd) < 0.01;

  return (
    <div className="space-y-4">
      {showTotalBadge ? (
        <TotalPortfolioValueBadge totalPortfolioValue={totalPortfolioValue} reportingCode={reportingCode} />
      ) : null}

      <DriftSection
        title="Suggested reallocation"
        description="Actions to align your portfolio with your ideal allocation targets."
        icon={Lightbulb}
      >
        <div className="grid gap-4 p-4 sm:grid-cols-2 sm:p-5">
          <PlanBlock
            title="Reduce exposure"
            tone="reduce"
            items={reduceItems}
            reportingCode={reportingCode}
            total={totalReduce}
          />
          <PlanBlock
            title="Increase allocation"
            tone="increase"
            items={addItems}
            reportingCode={reportingCode}
            total={totalAdd}
          />
        </div>

        {isBalanced ? (
          <div className="border-border/60 border-t px-5 py-4">
            <div className="flex items-center gap-3 rounded-xl border border-emerald-200/80 bg-emerald-50/80 px-4 py-3 dark:border-emerald-800/60 dark:bg-emerald-950/30">
              <div className="flex size-8 shrink-0 items-center justify-center rounded-full bg-emerald-500/15 text-emerald-600 dark:text-emerald-400">
                <ArrowUp className="size-3.5" />
              </div>
              <div>
                <p className="font-semibold text-emerald-800 text-sm dark:text-emerald-300">
                  Balanced reallocation plan
                </p>
                <p className="mt-0.5 text-emerald-700/80 text-xs dark:text-emerald-400/80">
                  Total reductions equal total increases — no net cash required.
                </p>
              </div>
            </div>
          </div>
        ) : null}
      </DriftSection>
    </div>
  );
}

function PlanBlock({
  title,
  tone,
  items,
  reportingCode,
  total,
}: {
  title: string;
  tone: "reduce" | "increase";
  items: ReallocationPlanItem[];
  reportingCode: string;
  total: number;
}) {
  const isReduce = tone === "reduce";

  return (
    <div
      className={cn(
        "overflow-hidden rounded-xl border",
        isReduce
          ? "border-red-200/80 bg-red-50/30 dark:border-red-900/50 dark:bg-red-950/20"
          : "border-emerald-200/80 bg-emerald-50/30 dark:border-emerald-900/50 dark:bg-emerald-950/20",
      )}
    >
      <div
        className={cn(
          "flex items-center justify-between gap-2 border-b px-4 py-3",
          isReduce
            ? "border-red-200/60 dark:border-red-900/40"
            : "border-emerald-200/60 dark:border-emerald-900/40",
        )}
      >
        <div className="flex items-center gap-2">
          {isReduce ? (
            <ArrowDown className="size-4 text-red-600 dark:text-red-400" />
          ) : (
            <ArrowUp className="size-4 text-emerald-600 dark:text-emerald-400" />
          )}
          <span
            className={cn(
              "font-semibold text-sm",
              isReduce ? "text-red-900 dark:text-red-200" : "text-emerald-900 dark:text-emerald-200",
            )}
          >
            {title}
          </span>
        </div>
        {items.length > 0 ? (
          <span
            className={cn(
              "font-bold text-sm tabular-nums",
              isReduce ? "text-red-700 dark:text-red-400" : "text-emerald-700 dark:text-emerald-400",
            )}
          >
            {formatDriftAmount(total, reportingCode)}
          </span>
        ) : null}
      </div>

      {items.length === 0 ? (
        <p className="px-4 py-6 text-center text-muted-foreground text-sm">No actions needed</p>
      ) : (
        <ul className="divide-y divide-border/40">
          {items.map((item) => (
            <li
              key={item.label}
              className="flex items-center justify-between gap-3 px-4 py-3 transition-colors hover:bg-background/50"
            >
              <span className="inline-flex min-w-0 flex-1 items-center gap-2.5">
                <span className="size-2.5 shrink-0 rounded-full ring-2 ring-background" style={{ background: item.color }} />
                <span className="truncate font-medium text-sm">{item.label}</span>
              </span>
              <span
                className={cn(
                  "shrink-0 font-semibold text-sm tabular-nums",
                  isReduce ? "text-red-700 dark:text-red-400" : "text-emerald-700 dark:text-emerald-400",
                )}
              >
                {formatDriftAmount(item.amount, reportingCode)}
              </span>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}