"use client";

import * as React from "react";
import { FileText, Pencil, Plus, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import { ConfirmDialog, PromptDialog } from "@/components/ui/confirm-dialog";
import { cn } from "@/lib/utils";

export type Draft = {
  id: string;
  name: string;
  content: string;
  updatedAt: number;
};

type Props = {
  drafts: Draft[];
  activeId: string;
  onSelect: (id: string) => void;
  onCreate: () => void;
  onClose: (id: string) => void;
  onRename: (id: string, name: string) => void;
};

export function DraftsBar({ drafts, activeId, onSelect, onCreate, onClose, onRename }: Props) {
  const [renameTarget, setRenameTarget] = React.useState<Draft | null>(null);
  const [closeTarget, setCloseTarget] = React.useState<Draft | null>(null);

  return (
    <>
      <div className="no-print flex items-center gap-1 overflow-x-auto border-b border-border/60 bg-muted/30 px-2 py-1.5">
        {drafts.map((draft) => {
          const active = draft.id === activeId;
          return (
            <div
              key={draft.id}
              className={cn(
                "group flex shrink-0 items-center gap-1 rounded-md border px-2 py-1 text-xs transition-colors",
                active
                  ? "border-border bg-background text-foreground shadow-sm"
                  : "border-transparent text-muted-foreground hover:bg-background/60",
              )}
            >
              <button
                type="button"
                onClick={() => onSelect(draft.id)}
                onDoubleClick={() => setRenameTarget(draft)}
                className="flex items-center gap-1.5"
                aria-current={active ? "page" : undefined}
                title="Double-click to rename"
              >
                <FileText className="h-3.5 w-3.5" />
                <span className="max-w-[12rem] truncate">{draft.name}</span>
              </button>
              <button
                type="button"
                onClick={() => setRenameTarget(draft)}
                aria-label={`Rename ${draft.name}`}
                className={cn(
                  "rounded p-0.5 opacity-0 transition-opacity hover:bg-accent",
                  active ? "group-hover:opacity-100" : "group-hover:opacity-60",
                )}
              >
                <Pencil className="h-3 w-3" />
              </button>
              {drafts.length > 1 ? (
                <button
                  type="button"
                  onClick={() =>
                    draft.content.trim().length > 0
                      ? setCloseTarget(draft)
                      : onClose(draft.id)
                  }
                  aria-label={`Close ${draft.name}`}
                  className="rounded p-0.5 opacity-0 transition-opacity hover:bg-accent group-hover:opacity-100"
                >
                  <X className="h-3 w-3" />
                </button>
              ) : null}
            </div>
          );
        })}
        <Button
          size="icon-sm"
          variant="ghost"
          onClick={onCreate}
          aria-label="New draft"
          className="shrink-0"
        >
          <Plus className="h-4 w-4" />
        </Button>
      </div>

      <PromptDialog
        open={renameTarget !== null}
        onOpenChange={(open) => {
          if (!open) setRenameTarget(null);
        }}
        title="Rename draft"
        description="Give this draft a recognizable name."
        defaultValue={renameTarget?.name ?? ""}
        label="Draft name"
        placeholder="My document"
        confirmLabel="Rename"
        onConfirm={(name) => {
          if (renameTarget) onRename(renameTarget.id, name);
        }}
      />

      <ConfirmDialog
        open={closeTarget !== null}
        onOpenChange={(open) => {
          if (!open) setCloseTarget(null);
        }}
        title="Close this draft?"
        description={
          <>
            <strong>{closeTarget?.name}</strong> will be removed from your local
            drafts. This can't be undone.
          </>
        }
        confirmLabel="Close draft"
        destructive
        onConfirm={() => {
          if (closeTarget) onClose(closeTarget.id);
        }}
      />
    </>
  );
}