"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { CreateTicketSheet } from "@/features/tickets/components/create-ticket-sheet";
import { TicketCard } from "@/features/tickets/components/ticket-card";
import { TicketsHeader } from "@/features/tickets/components/tickets-header";
import { ticketsDict } from "@/features/tickets/dict";
import {
  useCreateTicketMutation,
  useTickets,
} from "@/features/tickets/hooks/use-tickets";
import type { CreateTicketFormValues } from "@/features/tickets/types";
import { panelDict } from "@/features/panel/dict";

export function TicketsPageContent() {
  const router = useRouter();
  const [sheetOpen, setSheetOpen] = useState(false);
  const { data: tickets = [], isLoading } = useTickets();
  const createTicketMutation = useCreateTicketMutation();

  const handleSubmit = (values: CreateTicketFormValues) => {
    createTicketMutation.mutate(
      {
        subject: values.subject.trim(),
        body: values.body.trim(),
        category: values.category.trim() || undefined,
        priority: values.priority,
      },
      {
        onSuccess: (ticket) => {
          setSheetOpen(false);
          router.push(`/panel/support/${ticket.id}`);
        },
      },
    );
  };

  return (
    <div className="mx-auto flex w-full max-w-3xl flex-1 flex-col gap-4 pb-28 md:pb-6">
      <TicketsHeader />

      <div className="space-y-1 px-4 sm:px-6">
        <p className="text-sm text-muted-foreground">{ticketsDict.subtitle}</p>
      </div>

      <div className="flex flex-col gap-3 px-4 sm:px-6">
        {isLoading ? (
          <p className="text-sm text-muted-foreground">{panelDict.loading}</p>
        ) : tickets.length === 0 ? (
          <p className="rounded-3xl bg-card p-5 text-sm text-muted-foreground shadow-soft-sm">
            {ticketsDict.empty}
          </p>
        ) : (
          tickets.map((ticket) => (
            <TicketCard
              key={ticket.id}
              ticket={ticket}
              href={`/panel/support/${ticket.id}`}
            />
          ))
        )}
      </div>

      <button
        type="button"
        onClick={() => setSheetOpen(true)}
        className="fixed bottom-24 left-1/2 z-40 inline-flex h-14 -translate-x-1/2 items-center justify-center rounded-full bg-primary px-6 text-sm font-semibold text-primary-foreground shadow-soft md:bottom-8"
      >
        {ticketsDict.createTicket}
      </button>

      <CreateTicketSheet
        open={sheetOpen}
        isSubmitting={createTicketMutation.isPending}
        onClose={() => setSheetOpen(false)}
        onSubmit={handleSubmit}
      />
    </div>
  );
}