import { useState, type ReactNode } from "react";
import { Printer, Search } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import type { Row } from "@/lib/crud";

export type StatementColumn = { name: string; label: string; align?: "right"; render?: (row: Row) => ReactNode };

export function StatementList({
  title,
  description,
  rows,
  isLoading,
  searchField,
  columns,
  onPrint,
}: {
  title: string;
  description: string;
  rows: Row[];
  isLoading?: boolean;
  searchField: string;
  columns: StatementColumn[];
  onPrint: (row: Row) => void;
}) {
  const [query, setQuery] = useState("");
  const visible = rows.filter((row) =>
    String(row[searchField] ?? "").toLowerCase().includes(query.toLowerCase()),
  );

  return (
    <div className="space-y-6">
      <div>
        <h1 className="font-display text-2xl font-bold">{title}</h1>
        <p className="text-sm text-muted-foreground">{description}</p>
      </div>
      <Card className="overflow-hidden p-0">
        <div className="flex items-center gap-2 border-b p-4">
          <Search className="size-4 text-muted-foreground" />
          <Input
            value={query}
            onChange={(event) => setQuery(event.target.value)}
            placeholder="Search..."
            className="max-w-sm"
          />
        </div>
        <Table>
          <TableHeader>
            <TableRow>
              {columns.map((column) => (
                <TableHead key={column.name} className={column.align === "right" ? "text-right" : undefined}>
                  {column.label}
                </TableHead>
              ))}
              <TableHead className="text-right">Document</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {isLoading ? (
              <TableRow>
                <TableCell colSpan={columns.length + 1} className="py-10 text-center text-muted-foreground">
                  Loading...
                </TableCell>
              </TableRow>
            ) : visible.length === 0 ? (
              <TableRow>
                <TableCell colSpan={columns.length + 1} className="py-10 text-center text-muted-foreground">
                  Nothing here yet
                </TableCell>
              </TableRow>
            ) : (
              visible.map((row) => (
                <TableRow key={String(row["id"])}>
                  {columns.map((column) => (
                    <TableCell
                      key={column.name}
                      className={column.align === "right" ? "text-right" : undefined}
                    >
                      {column.render ? column.render(row) : (row[column.name] ?? "—")}
                    </TableCell>
                  ))}
                  <TableCell className="text-right">
                    <Button variant="outline" size="sm" onClick={() => onPrint(row)}>
                      <Printer className="mr-1 size-4" /> Statement
                    </Button>
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </Card>
    </div>
  );
}