"use client";

import { deleteCommissionExtra } from "@/actions/commissions/types/extras";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Pencil, Plus, Trash2 } from "lucide-react";
import * as React from "react";
import { toast } from "sonner";
import { ExtraDialog } from "./ExtraDialog";

type Item = {
  id: string;
  name: string;
  description: string | null;
};

export function ExtraListClient({ extras }: { extras: Item[] }) {
  const [busyId, setBusyId] = React.useState<string | null>(null);

  async function onDelete(id: string) {
    try {
      setBusyId(id);
      await deleteCommissionExtra(id);
      toast.success("Extra deleted.");
    } catch (e) {
      console.error(e);
      toast.error("Failed to delete extra.");
    } finally {
      setBusyId(null);
    }
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between gap-4">
        <h1 className="text-2xl font-bold">Extras</h1>

        <ExtraDialog
          mode="create"
          trigger={
            <Button className="gap-2">
              <Plus className="h-4 w-4" />
              New extra
            </Button>
          }
        />
      </div>

      <Card>
        <CardHeader>
          <CardTitle className="text-base">All extras</CardTitle>
        </CardHeader>

        <CardContent className="p-0">
          {extras.length === 0 ? (
            <div className="p-6 text-sm text-muted-foreground italic">No extras yet.</div>
          ) : (
            <ul className="divide-y">
              {extras.map((o) => (
                <li key={o.id} className="flex items-center justify-between gap-4 px-6 py-4">
                  <div className="min-w-0">
                    <div className="flex items-center gap-2">
                      <div className="font-medium truncate">{o.name}</div>
                    </div>
                    {o.description ? (
                      <div className="text-sm text-muted-foreground truncate">{o.description}</div>
                    ) : null}
                  </div>

                  <div className="flex items-center gap-2">
                    <ExtraDialog
                      mode="edit"
                      initial={o}
                      trigger={
                        <Button variant="secondary" size="sm" className="gap-2">
                          <Pencil className="h-4 w-4" />
                          Edit
                        </Button>
                      }
                    />

                    <Button
                      variant="destructive"
                      size="sm"
                      className="gap-2"
                      disabled={busyId === o.id}
                      onClick={() => onDelete(o.id)}
                    >
                      <Trash2 className="h-4 w-4" />
                      Delete
                    </Button>
                  </div>
                </li>
              ))}
            </ul>
          )}
        </CardContent>
      </Card>
    </div>
  );
}