import { AlertTriangle, MessageSquare } from "lucide-react";
import { Button } from "../ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "../ui/dialog";
import { Input } from "../ui/input";

type WorkspaceDialogsProps = {
  deleteOpen: boolean;
  setDeleteOpen: (value: boolean) => void;
  deleteConfirm: string;
  setDeleteConfirm: (value: string) => void;
  workspaceName: string;
  onDeleteConfirm: () => void;
  feedbackOpen: boolean;
  setFeedbackOpen: (value: boolean) => void;
  feedbackCategory: "issue" | "idea";
  setFeedbackCategory: (value: "issue" | "idea") => void;
  feedbackTitle: string;
  setFeedbackTitle: (value: string) => void;
  feedbackEmail: string;
  setFeedbackEmail: (value: string) => void;
  feedbackMessage: string;
  setFeedbackMessage: (value: string) => void;
  feedbackSubmitting: boolean;
  onSubmitFeedback: () => void;
};

export function WorkspaceDialogs(props: WorkspaceDialogsProps) {
  const {
    deleteOpen,
    setDeleteOpen,
    deleteConfirm,
    setDeleteConfirm,
    workspaceName,
    onDeleteConfirm,
    feedbackOpen,
    setFeedbackOpen,
    feedbackCategory,
    setFeedbackCategory,
    feedbackTitle,
    setFeedbackTitle,
    feedbackEmail,
    setFeedbackEmail,
    feedbackMessage,
    setFeedbackMessage,
    feedbackSubmitting,
    onSubmitFeedback,
  } = props;

  return (
    <>
      <Dialog
        open={deleteOpen}
        onOpenChange={(open) => {
          setDeleteOpen(open);
          if (!open) setDeleteConfirm("");
        }}
      >
        <DialogContent>
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2 text-destructive">
              <AlertTriangle className="h-4 w-4" /> Delete workspace
            </DialogTitle>
            <DialogDescription>
              This action is permanent and cannot be reversed. Type
              <span className="font-mono font-semibold text-foreground ml-1 mr-1">
                {workspaceName}
              </span>
              below to confirm.
            </DialogDescription>
          </DialogHeader>
          <Input
            value={deleteConfirm}
            onChange={(e) => setDeleteConfirm(e.target.value)}
            placeholder={workspaceName}
            className="font-mono text-sm"
          />
          <DialogFooter>
            <Button
              variant="outline"
              onClick={() => {
                setDeleteOpen(false);
                setDeleteConfirm("");
              }}
            >
              Cancel
            </Button>
            <Button
              variant="destructive"
              disabled={deleteConfirm !== workspaceName}
              onClick={onDeleteConfirm}
            >
              Delete workspace
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <Dialog open={feedbackOpen} onOpenChange={setFeedbackOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <MessageSquare className="h-4 w-4 text-primary" /> Share feedback
            </DialogTitle>
            <DialogDescription>
              Send an issue report or product idea straight from the workspace
              UI.
            </DialogDescription>
          </DialogHeader>

          <div className="space-y-3">
            <div className="grid grid-cols-2 gap-2">
              <Button
                type="button"
                variant={feedbackCategory === "issue" ? "default" : "outline"}
                onClick={() => setFeedbackCategory("issue")}
              >
                Issue
              </Button>
              <Button
                type="button"
                variant={feedbackCategory === "idea" ? "default" : "outline"}
                onClick={() => setFeedbackCategory("idea")}
              >
                Idea
              </Button>
            </div>

            <Input
              value={feedbackTitle}
              onChange={(e) => setFeedbackTitle(e.target.value)}
              placeholder="Title (optional)"
            />
            <Input
              value={feedbackEmail}
              onChange={(e) => setFeedbackEmail(e.target.value)}
              placeholder="Your email (optional)"
            />
            <textarea
              value={feedbackMessage}
              onChange={(e) => setFeedbackMessage(e.target.value)}
              placeholder="What would you like to share?"
              className="min-h-28 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground outline-none transition-colors focus:border-primary"
            />
          </div>

          <DialogFooter>
            <Button variant="outline" onClick={() => setFeedbackOpen(false)}>
              Cancel
            </Button>
            <Button onClick={onSubmitFeedback} disabled={feedbackSubmitting}>
              {feedbackSubmitting ? "Sending..." : "Send feedback"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  );
}
