"use client";

import { useQuery } from "convex/react";
import { api } from "@/convex/_generated/api";
import { DEFAULT_TENANT_ID } from "@/lib/constants";
import { mapTicketWithDetailsFromServer } from "@/lib/mappers/ticket";
import type { Id } from "@/convex/_generated/dataModel";
import type { TicketWithDetails } from "@/lib/schemas/ticket";
import { getTicketById } from "@/lib/mocks/tickets";
import { Card, CardContent } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { TicketComments } from "@/components/tickets/ticket-comments.rich";
import { TicketDetailsPanel } from "@/components/tickets/ticket-details-panel";
import { TicketSummaryHeader } from "@/components/tickets/ticket-summary-header";
import { TicketTimeline } from "@/components/tickets/ticket-timeline";
import { useAuth } from "@/lib/auth-client";

export function TicketDetailView({ id }: { id: string }) {
  const isMockId = id.startsWith("ticket-");
  const { convexUserId } = useAuth();
  const shouldSkip = isMockId || !convexUserId;
  const t = useQuery(
    api.tickets.getById,
    shouldSkip
      ? "skip"
      : {
          tenantId: DEFAULT_TENANT_ID,
          id: id as Id<"tickets">,
          viewerId: convexUserId as Id<"users">,
        }
  );
  let ticket: TicketWithDetails | null = null;
  if (t) {
    ticket = mapTicketWithDetailsFromServer(t as unknown);
  } else if (isMockId) {
    ticket = getTicketById(id) ?? null;
  }
  if (!ticket) return (
    <div className="flex flex-col gap-6 px-4 lg:px-6">
      <Card className="rounded-2xl border border-slate-200 bg-white shadow-sm">
        <CardContent className="space-y-3 p-6">
          <div className="flex items-center gap-2"><Skeleton className="h-5 w-24" /><Skeleton className="h-5 w-20" /></div>
          <Skeleton className="h-7 w-2/3" />
          <Skeleton className="h-4 w-1/2" />
        </CardContent>
      </Card>
      <div className="grid gap-6 lg:grid-cols-[2fr_1fr]">
        <Card className="rounded-2xl border border-slate-200 bg-white shadow-sm">
          <CardContent className="space-y-4 p-6">
            {Array.from({ length: 3 }).map((_, i) => (
              <div key={i} className="space-y-2">
                <div className="flex items-center gap-2"><Skeleton className="h-4 w-28" /><Skeleton className="h-3 w-24" /></div>
                <Skeleton className="h-16 w-full" />
              </div>
            ))}
          </CardContent>
        </Card>
        <Card className="rounded-2xl border border-slate-200 bg-white shadow-sm">
          <CardContent className="space-y-3 p-6">
            {Array.from({ length: 5 }).map((_, i) => (<Skeleton key={i} className="h-3 w-full" />))}
          </CardContent>
        </Card>
      </div>
    </div>
  );
  return (
    <div className="flex flex-col gap-6 px-4 lg:px-6">
      <TicketSummaryHeader ticket={ticket} />
      <div className="grid gap-6 lg:grid-cols-[2fr_1fr]">
        <div className="space-y-6">
          <TicketComments ticket={ticket} />
          <TicketTimeline ticket={ticket} />
        </div>
        <TicketDetailsPanel ticket={ticket} />
      </div>
    </div>
  );
}
