import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { Loader2, Send, Eye, Edit2 } from "lucide-react";

interface PRCommentInputProps {
  /** Initial placeholder text */
  placeholder?: string;
  /** Button label */
  buttonLabel?: string;
  /** Initial body value (for edit mode) */
  initialValue?: string;
  /** Show preview toggle */
  showPreviewToggle?: boolean;
  /** Loading state */
  loading?: boolean;
  /** Callback when submit is clicked */
  onSubmit: (body: string) => void | Promise<void>;
  /** Callback when cancel is clicked (optional) */
  onCancel?: () => void;
  /** Auto-focus on mount */
  autoFocus?: boolean;
  /** Minimum height of the textarea */
  minRows?: number;
}

export function PRCommentInput({
  placeholder = "Leave a comment...",
  buttonLabel = "Comment",
  initialValue = "",
  showPreviewToggle = true,
  loading = false,
  onSubmit,
  onCancel,
  autoFocus = false,
  minRows = 3,
}: PRCommentInputProps) {
  const [body, setBody] = useState(initialValue);
  const [isPreview, setIsPreview] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubmit = async () => {
    if (!body.trim()) return;
    setIsSubmitting(true);
    try {
      await onSubmit(body.trim());
      setBody("");
      setIsPreview(false);
    } finally {
      setIsSubmitting(false);
    }
  };

  const isDisabled = loading || isSubmitting || !body.trim();

  return (
    <div className="space-y-2">
      {showPreviewToggle && (
        <div className="flex items-center gap-1 border-b pb-2">
          <Button
            type="button"
            variant={isPreview ? "ghost" : "secondary"}
            size="sm"
            onClick={() => setIsPreview(false)}
            className="h-7 px-2 text-xs"
          >
            <Edit2 className="h-3 w-3 mr-1" />
            Write
          </Button>
          <Button
            type="button"
            variant={isPreview ? "secondary" : "ghost"}
            size="sm"
            onClick={() => setIsPreview(true)}
            className="h-7 px-2 text-xs"
          >
            <Eye className="h-3 w-3 mr-1" />
            Preview
          </Button>
        </div>
      )}

      {isPreview ? (
        <div className="min-h-[60px] rounded-md border border-input bg-muted/50 p-3 text-sm">
          {body ? (
            <div className="whitespace-pre-wrap">{body}</div>
          ) : (
            <span className="text-muted-foreground italic">Nothing to preview.</span>
          )}
        </div>
      ) : (
        <Textarea
          value={body}
          onChange={(e) => setBody(e.target.value)}
          placeholder={placeholder}
          rows={minRows}
          autoFocus={autoFocus}
          className="resize-y min-h-[60px]"
        />
      )}

      <div className="flex items-center justify-end gap-2">
        {onCancel && (
          <Button
            type="button"
            variant="ghost"
            size="sm"
            onClick={onCancel}
            disabled={isSubmitting}
          >
            Cancel
          </Button>
        )}
        <Button
          type="button"
          size="sm"
          onClick={handleSubmit}
          disabled={isDisabled}
        >
          {isSubmitting ? (
            <Loader2 className="h-4 w-4 mr-1 animate-spin" />
          ) : (
            <Send className="h-4 w-4 mr-1" />
          )}
          {buttonLabel}
        </Button>
      </div>
    </div>
  );
}
