import type { AllocationWithDetails } from "@capakraken/shared";

type DemandRow = AllocationWithDetails & {
  sourceAllocationId?: string;
  requestedHeadcount?: number;
  unfilledHeadcount?: number;
};

type OpenDemandsPanelProps = {
  demands: DemandRow[];
  onEdit: (demand: AllocationWithDetails) => void;
  onRequestDelete: (demand: AllocationWithDetails) => void;
  deleteDisabled: boolean;
  formatPeriod: (alloc: AllocationWithDetails) => string;
};

export function OpenDemandsPanel({
  demands,
  onEdit,
  onRequestDelete,
  deleteDisabled,
  formatPeriod,
}: OpenDemandsPanelProps) {
  if (demands.length === 0) return null;

  return (
    <div className="app-surface mt-6 overflow-hidden border-amber-200 dark:border-amber-900/70">
      <div className="flex items-center justify-between border-b border-amber-200 bg-amber-50/70 px-4 py-3 dark:border-amber-900/70 dark:bg-amber-950/20">
        <div>
          <h2 className="text-sm font-semibold text-amber-900 dark:text-amber-200">Open Demands</h2>
          <p className="text-xs text-amber-700 dark:text-amber-300/80">
            Placeholder demand rows not yet assigned to a resource.
          </p>
        </div>
        <span className="text-xs font-medium text-amber-700 dark:text-amber-300">
          {demands.length} item{demands.length !== 1 ? "s" : ""}
        </span>
      </div>
      <div className="divide-y divide-amber-100 dark:divide-amber-900/40">
        {demands.map((demand) => (
          <div
            key={demand.id}
            className="flex items-center justify-between gap-4 px-4 py-3 hover:bg-amber-50/40 dark:hover:bg-amber-950/10"
          >
            <div className="min-w-0">
              <div className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
                {demand.project ? (
                  <>
                    <span className="font-mono text-xs">{demand.project.shortCode}</span>{" "}
                    {demand.project.name}
                  </>
                ) : (
                  "Unknown project"
                )}
              </div>
              <div className="mt-1 text-xs text-gray-500 dark:text-gray-400">
                {demand.role ?? "Placeholder role"} · {formatPeriod(demand)} · {demand.hoursPerDay}
                h/day
              </div>
            </div>
            <div className="flex flex-shrink-0 items-center gap-4">
              <div className="text-right">
                <div className="text-xs uppercase tracking-wide text-amber-700 dark:text-amber-300">
                  Unfilled
                </div>
                <div className="text-sm font-semibold text-amber-900 dark:text-amber-200">
                  {demand.unfilledHeadcount ?? demand.headcount} /{" "}
                  {demand.requestedHeadcount ?? demand.headcount}
                </div>
              </div>
              <div className="flex items-center gap-2">
                <button
                  type="button"
                  onClick={() => onEdit(demand as AllocationWithDetails)}
                  className="app-action-edit"
                >
                  Edit
                </button>
                <button
                  type="button"
                  onClick={() => onRequestDelete(demand as AllocationWithDetails)}
                  disabled={deleteDisabled}
                  className="app-action-delete disabled:opacity-50"
                >
                  Delete
                </button>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
