ClaudeMarketing/components/thumbs-down-modal.tsx

"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";

const REASON_TAGS = [
  "Too dark",
  "Bad composition",
  "Stock photo feel",
  "Wrong colors",
  "Too busy",
  "Off brand",
];

interface ThumbsDownModalProps {
  assetId: string;
  onClose: () => void;
  onSubmitted: (vote: "down") => void;
}

export function ThumbsDownModal({ assetId, onClose, onSubmitted }: ThumbsDownModalProps) {
  const [selectedTags, setSelectedTags] = useState<Set<string>>(new Set());
  const [freeform, setFreeform] = useState("");
  const [loading, setLoading] = useState(false);

  function toggleTag(tag: string) {
    setSelectedTags((prev) => {
      const next = new Set(prev);
      if (next.has(tag)) next.delete(tag);
      else next.add(tag);
      return next;
    });
  }

  async function handleSubmit() {
    setLoading(true);
    const parts = [...selectedTags];
    if (freeform.trim()) parts.push(freeform.trim());
    const reason = parts.join("; ") || "Not preferred";

    // Optimistic update — show disliked immediately
    onSubmitted("down");

    try {
      const res = await fetch(`/api/assets/${assetId}/preference`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ vote: "down", reason }),
      });
      if (!res.ok) {
        console.error("Preference API error:", res.status, await res.text());
      }
    } catch (err) {
      console.error("Preference API failed:", err);
    }
    setLoading(false);
    onClose();
  }

  return (
    <Dialog open onOpenChange={onClose}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>What didn&apos;t you like?</DialogTitle>
          <DialogDescription>
            Your feedback helps the AI avoid this style in future generations.
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-3 py-2">
          <div className="flex flex-wrap gap-2">
            {REASON_TAGS.map((tag) => (
              <button
                key={tag}
                onClick={() => toggleTag(tag)}
                className={`rounded-full border px-3 py-1.5 text-sm transition-colors ${
                  selectedTags.has(tag)
                    ? "border-red-300 bg-red-50 text-red-700"
                    : "border-border bg-background text-muted-foreground hover:bg-muted/50"
                }`}
              >
                {tag}
              </button>
            ))}
          </div>
          <textarea
            placeholder="Anything else? (optional)"
            value={freeform}
            onChange={(e) => setFreeform(e.target.value)}
            className="w-full rounded-md border bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
            rows={2}
          />
        </div>

        <DialogFooter>
          <Button variant="outline" onClick={onClose}>Cancel</Button>
          <Button
            variant="destructive"
            onClick={handleSubmit}
            disabled={loading}
          >
            {loading ? "Saving..." : "Submit Feedback"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}