import React from "react";
import { cn } from "@/lib/utils";
import { formatCurrency } from "@/lib/format-currency";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";

/**
 * Displays a read-only list of income entries with edit/delete actions and an
 * "Add income" CTA. Extracted from the loan application income tab.
 * Consumers pre-calculate per-year totals before passing them in.
 */

export type IncomeSummaryItem = {
  /** Primary label — e.g. "Developer at Acme Corp" or "Rental Income" */
  title: string;
  /** Annualised income in whole dollars */
  amountPerYear: number;
  /** Optional duration string — "Employed for 3.5 yrs" */
  employmentDuration?: string;
  /** Small tag chips — employment status, basis, type */
  statusTags?: string[];
  /** Non-PAYG income source label */
  source?: string;
};

export type IncomeSummaryComponentProps = {
  incomes: IncomeSummaryItem[];
  onAdd: () => void;
  onEdit: (index: number) => void;
  onDelete: (index: number) => void;
  className?: string;
};

export function IncomeSummaryComponent({
  incomes,
  onAdd,
  onEdit,
  onDelete,
  className,
}: IncomeSummaryComponentProps) {
  if (!incomes.length) {
    return (
      <div className={cn("flex flex-col gap-4", className)}>
        <p className="text-sm text-muted-foreground">No incomes added yet.</p>
        <Button type="button" variant="outline" onClick={onAdd}>
          + Add an income
        </Button>
      </div>
    );
  }

  return (
    <div className={cn("flex flex-col gap-4", className)}>
      <div className="flex flex-col gap-3">
        {incomes.map((income, index) => (
          <div
            key={index}
            className="flex flex-col gap-2 border border-border p-4"
          >
            {/* Title row + actions */}
            <div className="flex items-center justify-between gap-2">
              <span className="text-base font-semibold">{income.title}</span>
              <div className="flex gap-2">
                <Button
                  type="button"
                  variant="outline"
                  size="sm"
                  onClick={() => onEdit(index)}
                >
                  Edit
                </Button>
                <Button
                  type="button"
                  variant="outline"
                  size="sm"
                  onClick={() => onDelete(index)}
                  className="border-destructive text-destructive hover:bg-destructive/10"
                >
                  Delete
                </Button>
              </div>
            </div>

            {/* Amount + duration */}
            <div className="flex items-center justify-between text-sm">
              <span>{formatCurrency(income.amountPerYear)} Per Year</span>
              {income.employmentDuration && (
                <span className="text-muted-foreground">
                  {income.employmentDuration}
                </span>
              )}
            </div>

            {/* Status tags */}
            {income.statusTags && income.statusTags.length > 0 && (
              <div className="flex flex-wrap gap-2">
                {income.statusTags.map((tag) => (
                  <Badge key={tag} variant="secondary">
                    {tag}
                  </Badge>
                ))}
              </div>
            )}

            {/* Non-PAYG source */}
            {income.source && (
              <span className="text-sm text-muted-foreground">
                Source: {income.source}
              </span>
            )}
          </div>
        ))}
      </div>

      <Button type="button" variant="outline" onClick={onAdd}>
        + Add an income
      </Button>
    </div>
  );
}