'use client';

import { useParams, useRouter, useSearchParams } from 'next/navigation';
import { ArrowLeft } from 'lucide-react';

import { Button } from '@/components/ui/button';

import { TicketDetailHeader } from './components/TicketDetailHeader';
import {
  TicketOverviewCardSkeleton,
  TicketOverviewHeaderSkeleton,
} from './components/TicketOverviewSkeleton';
import {
  TicketClassActionsSkeleton,
  TicketClassContentSkeleton,
} from './components/TicketClassDetailSkeleton';

import { TicketHistoryCard } from './components/TicketHistoryCard';
import { TicketOverviewCard } from './components/TicketOverviewCard';
import { TicketStatusActions } from './components/TicketStatusActions';
import { TicketDefectClassTabs } from './components/TicketDefectClassTabs';
import { useTicketDetailEvents } from '../hooks/useTicketDetailEvents';
import {
  useTicketClassDetailQuery,
  useTicketOverviewQuery,
} from '../hooks/useTicketQueries';

export default function TicketDetailPage() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const { ticketId } = useParams() as { ticketId: string };
  const defectClass = searchParams.get('defect_class') ?? undefined;

  const overviewQuery = useTicketOverviewQuery(ticketId);
  const classDetailQuery = useTicketClassDetailQuery(ticketId, defectClass);
  const overview = overviewQuery.data;
  const classDetail = classDetailQuery.data;
  const isClassDetailLoading = Boolean(
    defectClass && classDetailQuery.isLoading,
  );

  useTicketDetailEvents(ticketId, defectClass, Boolean(ticketId));

  if (overviewQuery.isError) {
    return (
      <div className="flex min-h-[60vh] flex-col items-center justify-center gap-3">
        <p className="text-sm text-destructive">Failed to load ticket.</p>
        <Button
          variant="outline"
          size="sm"
          onClick={() => router.push('/ticket')}
        >
          <ArrowLeft />
          Back to Tickets
        </Button>
      </div>
    );
  }

  return (
    <main className="relative z-10 space-y-5 xl:flex xl:h-[calc(100vh-6.5rem)] xl:min-h-0 xl:flex-col xl:gap-5 xl:space-y-0 xl:overflow-hidden">
      <div className="xl:shrink-0">
        {overview ? (
          <TicketDetailHeader ticket={overview} />
        ) : (
          <TicketOverviewHeaderSkeleton />
        )}
      </div>

      <div className="grid items-start gap-5 xl:min-h-0 xl:flex-1 xl:grid-cols-[minmax(0,7fr)_minmax(0,3fr)] xl:items-stretch xl:overflow-hidden">
        <div className="space-y-5 xl:min-h-0 xl:overflow-y-auto xl:overscroll-contain xl:pr-2">
          {overview ? (
            <TicketOverviewCard ticket={overview} />
          ) : (
            <TicketOverviewCardSkeleton />
          )}
          <TicketDefectClassTabs ticketId={ticketId} ticket={overview} />
          {isClassDetailLoading ? <TicketClassContentSkeleton /> : null}
          {!isClassDetailLoading && classDetail ? (
            <TicketHistoryCard ticket={classDetail} />
          ) : null}
        </div>

        <div className="space-y-3 self-start xl:min-h-0 xl:self-stretch xl:overflow-y-auto xl:overscroll-contain xl:pr-2">
          {isClassDetailLoading ? <TicketClassActionsSkeleton /> : null}
          {!isClassDetailLoading && classDetail ? (
            <TicketStatusActions ticket={classDetail} />
          ) : null}
        </div>
      </div>
    </main>
  );
}
