dumpsterChat/web/src/components/FeatureRequestsPanel.tsx

import { useEffect, useState } from "react";
import { useFeatureRequestStore, type FeatureRequest } from "../stores/featureRequest.ts";
import { useAuthStore } from "../stores/auth.ts";

interface FeatureRequestsPanelProps {
  serverId: string;
  channelId?: string;
  onClose: () => void;
}

const STATUS_LABELS: Record<string, string> = {
  open: "OPEN",
  planned: "PLANNED",
  done: "DONE",
  rejected: "REJECTED",
};

const STATUS_COLORS: Record<string, string> = {
  open: "text-gb-green",
  planned: "text-gb-yellow",
  done: "text-gb-aqua",
  rejected: "text-gb-red",
};

export function FeatureRequestsPanel({ serverId, channelId, onClose }: FeatureRequestsPanelProps) {
  const requests = useFeatureRequestStore((s) => s.requestsByServer[serverId] || []);
  const fetchRequests = useFeatureRequestStore((s) => s.fetchRequests);
  const createRequest = useFeatureRequestStore((s) => s.createRequest);
  const vote = useFeatureRequestStore((s) => s.vote);
  const unvote = useFeatureRequestStore((s) => s.unvote);
  const updateStatus = useFeatureRequestStore((s) => s.updateStatus);
  const currentUser = useAuthStore((s) => s.user);

  const [showCreate, setShowCreate] = useState(false);
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [submitting, setSubmitting] = useState(false);
  const [filter, setFilter] = useState<string>("all");

  useEffect(() => {
    fetchRequests(serverId);
  }, [serverId, fetchRequests]);

  useEffect(() => {
    const handler = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    };
    window.addEventListener("keydown", handler);
    return () => window.removeEventListener("keydown", handler);
  }, [onClose]);

  const handleCreate = async () => {
    if (!title.trim()) return;
    setSubmitting(true);
    try {
      await createRequest(serverId, title.trim(), description.trim(), channelId);
      setTitle("");
      setDescription("");
      setShowCreate(false);
    } catch {
      // silent
    } finally {
      setSubmitting(false);
    }
  };

  const handleVote = async (fr: FeatureRequest) => {
    const hasVoted = currentUser ? fr.voters.includes(currentUser.id) : false;
    if (hasVoted) {
      await unvote(serverId, fr.id);
    } else {
      await vote(serverId, fr.id);
    }
  };

  const filtered = filter === "all" ? requests : requests.filter((r) => r.status === filter);

  return (
    <div className="absolute inset-x-0 top-0 z-20 bg-gb-bg border-b border-gb-bg-t shadow-lg">
      <div className="px-3 py-2 border-b border-gb-bg-t flex items-center justify-between">
        <span className="text-xs text-gb-orange font-mono">FEATURE REQUESTS ({requests.length})</span>
        <div className="flex items-center gap-2">
          <button
            onClick={() => setShowCreate((p) => !p)}
            className="text-xs text-gb-aqua hover:text-gb-orange font-mono"
          >
            [+NEW]
          </button>
          <button onClick={onClose} className="text-xs text-gb-red hover:text-gb-orange">[x]</button>
        </div>
      </div>

      {/* Filter tabs */}
      <div className="px-3 py-1 border-b border-gb-bg-t flex gap-3 text-[10px] font-mono">
        {["all", "open", "planned", "done", "rejected"].map((s) => (
          <button
            key={s}
            onClick={() => setFilter(s)}
            className={`${filter === s ? "text-gb-orange" : "text-gb-fg-f hover:text-gb-orange"}`}
          >
            {s.toUpperCase()}
          </button>
        ))}
      </div>

      {/* Create form */}
      {showCreate && (
        <div className="px-3 py-2 border-b border-gb-bg-t">
          <input
            type="text"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            placeholder="Feature title..."
            className="w-full bg-gb-bg-s border border-gb-bg-t text-gb-fg text-xs font-mono px-2 py-1 mb-1 outline-none focus:border-gb-orange"
            maxLength={255}
          />
          <textarea
            value={description}
            onChange={(e) => setDescription(e.target.value)}
            placeholder="Description (optional)..."
            className="w-full bg-gb-bg-s border border-gb-bg-t text-gb-fg text-xs font-mono px-2 py-1 mb-1 outline-none focus:border-gb-orange resize-none h-16"
          />
          <div className="flex gap-2">
            <button
              onClick={handleCreate}
              disabled={submitting || !title.trim()}
              className="text-xs text-gb-green hover:text-gb-orange font-mono disabled:opacity-40"
            >
              [SUBMIT]
            </button>
            <button
              onClick={() => { setShowCreate(false); setTitle(""); setDescription(""); }}
              className="text-xs text-gb-fg-f hover:text-gb-red font-mono"
            >
              [CANCEL]
            </button>
          </div>
        </div>
      )}

      {/* List */}
      <div className="max-h-80 overflow-y-auto font-mono text-xs">
        {filtered.length === 0 ? (
          <div className="px-3 py-4 text-center text-gb-fg-f">
            {requests.length === 0 ? "[no feature requests yet]" : "[none matching filter]"}
          </div>
        ) : (
          filtered.map((fr) => {
            const hasVoted = currentUser ? fr.voters.includes(currentUser.id) : false;
            return (
              <div
                key={fr.id}
                className="w-full px-3 py-2 border-b border-gb-bg-t last:border-b-0 hover:bg-gb-bg-s/20"
              >
                <div className="flex items-start justify-between gap-2">
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2">
                      <button
                        onClick={() => handleVote(fr)}
                        className={`shrink-0 px-1 border text-[10px] ${
                          hasVoted
                            ? "border-gb-orange text-gb-orange bg-gb-orange/10"
                            : "border-gb-bg-t text-gb-fg-f hover:border-gb-orange hover:text-gb-orange"
                        }`}
                        title={hasVoted ? "Remove vote" : "Vote"}
                      >
                        ▲ {fr.vote_count}
                      </button>
                      <span className="text-gb-fg font-bold truncate">{fr.title}</span>
                      <span className={`text-[10px] ${STATUS_COLORS[fr.status]}`}>
                        [{STATUS_LABELS[fr.status]}]
                      </span>
                    </div>
                    {fr.description && (
                      <div className="text-gb-fg-f mt-1 pl-8 text-[11px] break-words whitespace-pre-wrap">
                        {fr.description}
                      </div>
                    )}
                    <div className="text-[10px] text-gb-fg-f mt-1 pl-8">
                      {new Date(fr.created_at).toLocaleDateString()}
                    </div>
                  </div>
                  {/* Status selector for admins - simple cycle */}
                  <select
                    value={fr.status}
                    onChange={(e) => updateStatus(serverId, fr.id, e.target.value)}
                    className="bg-gb-bg-s border border-gb-bg-t text-gb-fg-f text-[10px] font-mono px-1 py-0.5 cursor-pointer"
                  >
                    <option value="open">Open</option>
                    <option value="planned">Planned</option>
                    <option value="done">Done</option>
                    <option value="rejected">Rejected</option>
                  </select>
                </div>
              </div>
            );
          })
        )}
      </div>
    </div>
  );
}