Epicure/apps/web/components/support/support-manager.tsx

"use client";

import { useState } from "react";
import Link from "next/link";
import { useTranslations } from "next-intl";
import { toast } from "sonner";
import { ExternalLink } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Badge } from "@/components/ui/badge";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

type TicketType = "bug" | "suggestion" | "question";
type TicketStatus = "open" | "triaged" | "closed";

type Ticket = {
  id: string;
  type: TicketType;
  title: string;
  description: string;
  status: TicketStatus;
  giteaIssueUrl: string | null;
  createdAt: string;
};

function formatDate(iso: string) {
  return new Date(iso).toLocaleDateString(undefined, {
    year: "numeric",
    month: "short",
    day: "numeric",
  });
}

export function SupportManager({ initialTickets }: { initialTickets: Ticket[] }) {
  const t = useTranslations("support");
  const [tickets, setTickets] = useState<Ticket[]>(initialTickets);
  const [type, setType] = useState<TicketType>("bug");
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [submitting, setSubmitting] = useState(false);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (title.trim().length < 3 || description.trim().length < 10) return;
    setSubmitting(true);
    try {
      const res = await fetch("/api/v1/support", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ type, title: title.trim(), description: description.trim() }),
      });
      if (!res.ok) {
        const data = (await res.json()) as { error?: string };
        throw new Error(data.error ?? t("submitFailed"));
      }
      const ticket = (await res.json()) as Ticket;
      setTickets((prev) => [ticket, ...prev]);
      setTitle("");
      setDescription("");
      setType("bug");
      toast.success(t("submitSuccess"));
    } catch (err) {
      toast.error(err instanceof Error ? err.message : t("submitFailed"));
    } finally {
      setSubmitting(false);
    }
  }

  const statusVariant: Record<TicketStatus, "default" | "secondary" | "outline"> = {
    open: "default",
    triaged: "secondary",
    closed: "outline",
  };

  return (
    <div className="space-y-8">
      <form onSubmit={handleSubmit} className="space-y-4">
        <div className="space-y-2">
          <Label htmlFor="support-type">{t("typeLabel")}</Label>
          <Select value={type} onValueChange={(v) => setType(v as TicketType)}>
            <SelectTrigger id="support-type" className="w-full sm:w-64">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="bug">{t("typeBug")}</SelectItem>
              <SelectItem value="suggestion">{t("typeSuggestion")}</SelectItem>
              <SelectItem value="question">{t("typeQuestion")}</SelectItem>
            </SelectContent>
          </Select>
        </div>

        <div className="space-y-2">
          <Label htmlFor="support-title">{t("titleLabel")}</Label>
          <Input
            id="support-title"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            placeholder={t("titlePlaceholder")}
            maxLength={200}
            required
          />
        </div>

        <div className="space-y-2">
          <Label htmlFor="support-description">{t("descriptionLabel")}</Label>
          <Textarea
            id="support-description"
            value={description}
            onChange={(e) => setDescription(e.target.value)}
            placeholder={t("descriptionPlaceholder")}
            maxLength={5000}
            rows={6}
            required
          />
        </div>

        <Button type="submit" disabled={submitting || title.trim().length < 3 || description.trim().length < 10}>
          {submitting ? t("submitting") : t("submitButton")}
        </Button>
      </form>

      <div className="space-y-3">
        <h2 className="font-semibold text-lg">{t("historyTitle")}</h2>
        {tickets.length === 0 ? (
          <p className="text-sm text-muted-foreground">{t("noTickets")}</p>
        ) : (
          <div className="divide-y rounded-md border">
            {tickets.map((ticket) => (
              <div key={ticket.id} className="px-4 py-3 space-y-1.5">
                <div className="flex items-start justify-between gap-4">
                  <p className="text-sm font-medium">{ticket.title}</p>
                  <Badge variant={statusVariant[ticket.status]} className="text-xs shrink-0">
                    {t(`status.${ticket.status}`)}
                  </Badge>
                </div>
                <p className="text-sm text-muted-foreground whitespace-pre-wrap">{ticket.description}</p>
                <div className="flex items-center gap-2 text-xs text-muted-foreground pt-1">
                  <Badge variant="outline" className="text-xs">{t(`type.${ticket.type}`)}</Badge>
                  <span>{formatDate(ticket.createdAt)}</span>
                  {ticket.giteaIssueUrl && (
                    <Link
                      href={ticket.giteaIssueUrl}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="flex items-center gap-1 text-primary hover:underline"
                    >
                      {t("viewIssue")}
                      <ExternalLink className="h-3 w-3" />
                    </Link>
                  )}
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}