"use client";

import { Button } from "./ui/button";
import { Badge } from "./ui/badge";
import { Play, X, FileCode2 } from "lucide-react";

export type PendingEdit = {
  id: string;
  tableName: string;
  column: string;
  oldValue: string;
  newValue: string;
  rowId: string;
  sql: string;
};

type Props = {
  edits: PendingEdit[];
  onExecute: () => void;
  onClear: () => void;
  onRemove: (id: string) => void;
  executing: boolean;
};

export default function TransactionIsland({
  edits,
  onExecute,
  onClear,
  onRemove,
  executing,
}: Props) {
  if (edits.length === 0) return null;

  return (
    <div className="fixed bottom-4 left-1/2 -translate-x-1/2 z-50 animate-slide-up-island">
      <div className="flex items-center gap-3 rounded border border-border bg-card px-4 py-2.5 shadow-lg min-w-[400px] max-w-[600px]">
        <FileCode2 className="h-4 w-4 text-primary shrink-0" />
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2">
            <span className="text-xs font-medium text-foreground">
              Pending changes
            </span>
            <Badge variant="default" className="text-tiny">
              {edits.length}
            </Badge>
          </div>
          <p className="text-caption text-muted-foreground truncate mt-0.5">
            {edits.map((e) => `${e.tableName}.${e.column}`).join(", ")}
          </p>
        </div>
        <div className="flex items-center gap-1.5">
          <Button
            variant="ghost"
            size="sm"
            onClick={onClear}
            disabled={executing}
            className="h-7 text-caption"
          >
            <X className="h-3 w-3" /> Discard
          </Button>
          <Button
            size="sm"
            onClick={onExecute}
            disabled={executing}
            className="h-7 text-caption"
          >
            <Play className="h-3 w-3" />
            Execute {edits.length} change{edits.length !== 1 ? "s" : ""}
          </Button>
        </div>
      </div>
    </div>
  );
}
