roboco/panel/src/components/tasks/task-detail/task-action-dialogs.tsx

"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DIALOG_SIZES,
} from "@/components/ui/dialog";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { HelpTip } from "@/components/ui/help-tip";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

// Escalate to CEO Dialog
interface EscalateToCeoDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onConfirm: (reason: string) => void;
  isPending?: boolean;
}

export function EscalateToCeoDialog({
  open,
  onOpenChange,
  onConfirm,
  isPending,
}: EscalateToCeoDialogProps) {
  const [reason, setReason] = useState("");

  const handleConfirm = () => {
    if (reason.trim()) {
      onConfirm(reason.trim());
      setReason("");
    }
  };

  const handleOpenChange = (newOpen: boolean) => {
    if (!newOpen) setReason("");
    onOpenChange(newOpen);
  };

  return (
    <Dialog open={open} onOpenChange={handleOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Escalate to CEO</DialogTitle>
          <DialogDescription>
            Explain why this task needs CEO review and approval.
          </DialogDescription>
        </DialogHeader>
        <div className="grid gap-4 py-4">
          <div className="grid gap-2">
            <HelpTip label="Shown to the CEO in their approval queue alongside this task">
              <Label htmlFor="reason" className="w-fit">
                Reason for escalation
              </Label>
            </HelpTip>
            <Textarea
              id="reason"
              value={reason}
              onChange={(e) => setReason(e.target.value)}
              placeholder="This task requires CEO approval because..."
              rows={4}
            />
          </div>
        </div>
        <DialogFooter>
          <HelpTip label="Closes without escalating; the task stays in its current status">
            <Button variant="outline" onClick={() => handleOpenChange(false)}>
              Cancel
            </Button>
          </HelpTip>
          <HelpTip label={!reason.trim() ? "Enter a reason to enable" : null}>
            <span
              className="inline-block"
              tabIndex={!reason.trim() ? 0 : undefined}
            >
              <Button
                onClick={handleConfirm}
                disabled={!reason.trim() || isPending}
              >
                {isPending ? "Escalating..." : "Escalate"}
              </Button>
            </span>
          </HelpTip>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

// CEO Reject Dialog
interface CeoRejectDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onConfirm: (notes: string) => void;
  isPending?: boolean;
}

export function CeoRejectDialog({
  open,
  onOpenChange,
  onConfirm,
  isPending,
}: CeoRejectDialogProps) {
  const [notes, setNotes] = useState("");

  const handleConfirm = () => {
    if (notes.trim()) {
      onConfirm(notes.trim());
      setNotes("");
    }
  };

  const handleOpenChange = (newOpen: boolean) => {
    if (!newOpen) setNotes("");
    onOpenChange(newOpen);
  };

  return (
    <Dialog open={open} onOpenChange={handleOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Request Changes</DialogTitle>
          <DialogDescription>
            Explain what changes are needed before this task can be approved.
          </DialogDescription>
        </DialogHeader>
        <div className="grid gap-4 py-4">
          <div className="grid gap-2">
            <HelpTip label="Recorded as the CEO's rejection reason; the task returns to needs_revision">
              <Label htmlFor="notes" className="w-fit">
                Required changes
              </Label>
            </HelpTip>
            <Textarea
              id="notes"
              value={notes}
              onChange={(e) => setNotes(e.target.value)}
              placeholder="Please address the following..."
              rows={4}
            />
          </div>
        </div>
        <DialogFooter>
          <HelpTip label="Closes without rejecting; the task stays in awaiting CEO approval">
            <Button variant="outline" onClick={() => handleOpenChange(false)}>
              Cancel
            </Button>
          </HelpTip>
          <HelpTip
            label={
              !notes.trim() ? "Explain what changes are needed to enable" : null
            }
          >
            <span
              className="inline-block"
              tabIndex={!notes.trim() ? 0 : undefined}
            >
              <Button
                variant="destructive"
                onClick={handleConfirm}
                disabled={!notes.trim() || isPending}
              >
                {isPending ? "Submitting..." : "Request Changes"}
              </Button>
            </span>
          </HelpTip>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

// Approve & Merge Dialog — simple confirmation for POST /tasks/{id}/approve-and-merge.
// The backend endpoint accepts NO notes parameter, so no text input is needed here.
interface ApproveAndMergeDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onConfirm: () => void;
  isPending?: boolean;
}

export function ApproveAndMergeDialog({
  open,
  onOpenChange,
  onConfirm,
  isPending,
}: ApproveAndMergeDialogProps) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Approve &amp; Merge</DialogTitle>
          <DialogDescription>
            This will approve the completed work and merge the pull request into
            the target branch. This action cannot be undone.
          </DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <HelpTip label="Closes without approving or merging">
            <Button
              variant="outline"
              onClick={() => onOpenChange(false)}
              disabled={isPending}
            >
              Cancel
            </Button>
          </HelpTip>
          <Button onClick={onConfirm} disabled={isPending}>
            {isPending ? "Merging..." : "Approve & Merge"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

// Explains a minChars-gated disabled submit button — the character counter
// beneath the textarea already states the minimum, but not how many more
// characters are still needed to cross it.
function remainingCharsTip(current: number, min: number): string {
  const remaining = min - current;
  if (remaining <= 0) return "";
  return `Needs ${remaining} more character${remaining === 1 ? "" : "s"} to enable`;
}

// CEO Approve Dialog — the sign-off note is the audit record for merging to
// production, so it is REQUIRED and must be substantive (>= 20 chars), matching
// the server's CEO_NOTES_REQUIRED gate.
const _CEO_NOTES_MIN = 20;

interface CeoApproveDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onConfirm: (notes: string) => void;
  isPending?: boolean;
}

export function CeoApproveDialog({
  open,
  onOpenChange,
  onConfirm,
  isPending,
}: CeoApproveDialogProps) {
  const [notes, setNotes] = useState("");
  const tooShort = notes.trim().length < _CEO_NOTES_MIN;

  const handleConfirm = () => {
    if (!tooShort) {
      onConfirm(notes.trim());
      setNotes("");
    }
  };

  const handleOpenChange = (newOpen: boolean) => {
    if (!newOpen) setNotes("");
    onOpenChange(newOpen);
  };

  return (
    <Dialog open={open} onOpenChange={handleOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Approve &amp; Merge</DialogTitle>
          <DialogDescription>
            Record why this work is approved for production. This note is the
            permanent audit record for the merge and is required.
          </DialogDescription>
        </DialogHeader>
        <div className="grid gap-4 py-4">
          <div className="grid gap-2">
            <Label htmlFor="ceo-approve-notes">Notes required</Label>
            <Textarea
              id="ceo-approve-notes"
              value={notes}
              onChange={(e) => setNotes(e.target.value)}
              placeholder="Verified against acceptance criteria; approving for production because..."
              rows={4}
            />
            <p className="text-xs text-muted-foreground">
              {notes.trim().length}/{_CEO_NOTES_MIN} characters minimum
            </p>
          </div>
        </div>
        <DialogFooter>
          <HelpTip label="Closes without approving; the task stays in awaiting CEO approval">
            <Button variant="outline" onClick={() => handleOpenChange(false)}>
              Cancel
            </Button>
          </HelpTip>
          {/* Button's own disabled:pointer-events-none would swallow hover, so
              the tip sits on a wrapping span rather than the Button itself. */}
          <HelpTip
            label={remainingCharsTip(notes.trim().length, _CEO_NOTES_MIN)}
          >
            <span className="inline-block" tabIndex={tooShort ? 0 : undefined}>
              <Button onClick={handleConfirm} disabled={tooShort || isPending}>
                {isPending ? "Approving..." : "Approve & Merge"}
              </Button>
            </span>
          </HelpTip>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

// Required Notes Dialog — a generalized version of CeoApproveDialog. Collects a
// substantive audit note (>= minChars) before confirming a decision action.
interface RequiredNotesDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onConfirm: (text: string) => void;
  isPending?: boolean;
  title: string;
  description: string;
  label: string;
  placeholder: string;
  minChars: number;
  confirmLabel: string;
  destructive?: boolean;
}

export function RequiredNotesDialog({
  open,
  onOpenChange,
  onConfirm,
  isPending,
  title,
  description,
  label,
  placeholder,
  minChars,
  confirmLabel,
  destructive,
}: RequiredNotesDialogProps) {
  const [text, setText] = useState("");
  const tooShort = text.trim().length < minChars;

  const handleConfirm = () => {
    if (!tooShort) {
      onConfirm(text.trim());
      setText("");
    }
  };

  const handleOpenChange = (newOpen: boolean) => {
    if (!newOpen) setText("");
    onOpenChange(newOpen);
  };

  return (
    <Dialog open={open} onOpenChange={handleOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>{title}</DialogTitle>
          <DialogDescription>{description}</DialogDescription>
        </DialogHeader>
        <div className="grid gap-4 py-4">
          <div className="grid gap-2">
            <Label htmlFor="required-notes">{label}</Label>
            <Textarea
              id="required-notes"
              value={text}
              onChange={(e) => setText(e.target.value)}
              placeholder={placeholder}
              rows={4}
            />
            <p className="text-xs text-muted-foreground">
              {text.trim().length}/{minChars} characters minimum
            </p>
          </div>
        </div>
        <DialogFooter>
          <HelpTip label="Closes without confirming; nothing is changed">
            <Button variant="outline" onClick={() => handleOpenChange(false)}>
              Cancel
            </Button>
          </HelpTip>
          {/* Button's own disabled:pointer-events-none would swallow hover, so
              the tip sits on a wrapping span rather than the Button itself. */}
          <HelpTip label={remainingCharsTip(text.trim().length, minChars)}>
            <span className="inline-block" tabIndex={tooShort ? 0 : undefined}>
              <Button
                variant={destructive ? "destructive" : "default"}
                onClick={handleConfirm}
                disabled={tooShort || isPending}
              >
                {isPending ? "Working..." : confirmLabel}
              </Button>
            </span>
          </HelpTip>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

// Create Branch Dialog
interface CreateBranchDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onConfirm: (branchType: string) => void;
  isPending?: boolean;
  taskId: string;
}

export function CreateBranchDialog({
  open,
  onOpenChange,
  onConfirm,
  isPending,
}: CreateBranchDialogProps) {
  const [branchType, setBranchType] = useState("feature");

  const handleConfirm = () => {
    onConfirm(branchType);
  };

  // Reset branchType to 'feature' when dialog is dismissed without confirming
  const handleOpenChange = (newOpen: boolean) => {
    if (!newOpen) setBranchType("feature");
    onOpenChange(newOpen);
  };

  return (
    <Dialog open={open} onOpenChange={handleOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Create Branch</DialogTitle>
          <DialogDescription>
            Create a new branch for this task. The branch name will be generated
            automatically.
          </DialogDescription>
        </DialogHeader>
        <div className="grid gap-4 py-4">
          <div className="grid gap-2">
            <HelpTip label="Chooses the branch-name prefix — see the naming preview below">
              <Label htmlFor="branch-type" className="w-fit">
                Branch Type
              </Label>
            </HelpTip>
            <Select value={branchType} onValueChange={setBranchType}>
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="feature">feature</SelectItem>
                <SelectItem value="bug">bug</SelectItem>
                <SelectItem value="chore">chore</SelectItem>
                <SelectItem value="docs">docs</SelectItem>
                <SelectItem value="hotfix">hotfix</SelectItem>
              </SelectContent>
            </Select>
            <p className="text-xs text-muted-foreground">
              Branch will be named: {branchType}/[team]/[task-id]
            </p>
          </div>
        </div>
        <DialogFooter>
          <HelpTip label="Closes without creating a branch">
            <Button variant="outline" onClick={() => handleOpenChange(false)}>
              Cancel
            </Button>
          </HelpTip>
          <HelpTip label="Creates and checks out the branch immediately — no confirmation after this">
            <Button onClick={handleConfirm} disabled={isPending}>
              {isPending ? "Creating..." : "Create Branch"}
            </Button>
          </HelpTip>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

// Create PR Dialog
interface CreatePRDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onConfirm: (title: string, body: string) => void;
  isPending?: boolean;
  defaultTitle?: string;
}

export function CreatePRDialog({
  open,
  onOpenChange,
  onConfirm,
  isPending,
  defaultTitle = "",
}: CreatePRDialogProps) {
  const [title, setTitle] = useState(defaultTitle);
  const [body, setBody] = useState("");

  const handleConfirm = () => {
    if (title.trim()) {
      onConfirm(title.trim(), body.trim());
      setTitle("");
      setBody("");
    }
  };

  // On open: seed title from defaultTitle. On close without confirming: reset both fields to empty.
  const handleOpenChange = (newOpen: boolean) => {
    if (newOpen) {
      if (defaultTitle) setTitle(defaultTitle);
    } else {
      // Reset both fields when dismissed without confirming
      setTitle("");
      setBody("");
    }
    onOpenChange(newOpen);
  };

  return (
    <Dialog open={open} onOpenChange={handleOpenChange}>
      <DialogContent className={DIALOG_SIZES.md}>
        <DialogHeader>
          <DialogTitle>Create Pull Request</DialogTitle>
          <DialogDescription>
            Create a pull request for this task&apos;s branch.
          </DialogDescription>
        </DialogHeader>
        <div className="grid gap-4 py-4">
          <div className="grid gap-2">
            <HelpTip label="Seeded from the task title by default — edit before creating">
              <Label htmlFor="pr-title" className="w-fit">
                Title
              </Label>
            </HelpTip>
            <Input
              id="pr-title"
              value={title}
              onChange={(e) => setTitle(e.target.value)}
              placeholder="PR title..."
            />
          </div>
          <div className="grid gap-2">
            <HelpTip label="Becomes the pull request's description on GitHub">
              <Label htmlFor="pr-body" className="w-fit">
                Description
              </Label>
            </HelpTip>
            <Textarea
              id="pr-body"
              value={body}
              onChange={(e) => setBody(e.target.value)}
              placeholder="Describe the changes..."
              rows={6}
            />
          </div>
        </div>
        <DialogFooter>
          <HelpTip label="Closes without creating a PR">
            <Button variant="outline" onClick={() => handleOpenChange(false)}>
              Cancel
            </Button>
          </HelpTip>
          <HelpTip label={!title.trim() ? "Enter a title to enable" : null}>
            <span
              className="inline-block"
              tabIndex={!title.trim() ? 0 : undefined}
            >
              <Button
                onClick={handleConfirm}
                disabled={!title.trim() || isPending}
              >
                {isPending ? "Creating..." : "Create PR"}
              </Button>
            </span>
          </HelpTip>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}