import { createFileRoute, useParams, useNavigate } from '@tanstack/react-router'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { repairBatchDetailOptions, repairBatchMutations, repairBatchKeys, repairBatchTicketsOptions } from '@/api/repairs'
import { usePagination } from '@/hooks/use-pagination'
import { DataTable, type Column } from '@/components/shared/data-table'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Skeleton } from '@/components/ui/skeleton'
import { ArrowLeft, Check, X, Plus, FileText } from 'lucide-react'
import { BatchStatusProgress } from '@/components/repairs/batch-status-progress'
import { toast } from 'sonner'
import { useAuthStore } from '@/stores/auth.store'
import jsPDF from 'jspdf'
import type { RepairTicket } from '@/types/repair'

export const Route = createFileRoute('/_authenticated/repair-batches/$batchId')({
  validateSearch: (search: Record<string, unknown>) => ({
    page: Number(search.page) || 1,
    limit: Number(search.limit) || 100,
    q: (search.q as string) || undefined,
    sort: (search.sort as string) || undefined,
    order: (search.order as 'asc' | 'desc') || 'asc',
  }),
  component: RepairBatchDetailPage,
})

const STATUS_LABELS: Record<string, string> = {
  new: 'New', in_transit: 'In Transit', intake: 'Intake', diagnosing: 'Diagnosing',
  pending_approval: 'Pending Approval', approved: 'Approved', in_progress: 'In Progress',
  pending_parts: 'Pending Parts', ready: 'Ready', picked_up: 'Picked Up',
  delivered: 'Delivered', cancelled: 'Cancelled',
}

const ticketColumns: Column<RepairTicket>[] = [
  { key: 'ticket_number', header: 'Ticket #', sortable: true, render: (t) => <span className="font-mono text-sm">{t.ticketNumber}</span> },
  { key: 'item_description', header: 'Item', render: (t) => <>{t.itemDescription ?? '-'}</> },
  { key: 'problem', header: 'Problem', render: (t) => <span className="truncate max-w-[200px] block">{t.problemDescription}</span> },
  { key: 'status', header: 'Status', sortable: true, render: (t) => <Badge variant="outline">{STATUS_LABELS[t.status] ?? t.status}</Badge> },
  {
    key: 'estimated_cost',
    header: 'Estimate',
    render: (t) => <>{t.estimatedCost ? `$${t.estimatedCost}` : '-'}</>,
  },
]

function RepairBatchDetailPage() {
  const { batchId } = useParams({ from: '/_authenticated/repair-batches/$batchId' })
  const navigate = useNavigate()
  const queryClient = useQueryClient()
  const hasPermission = useAuthStore((s) => s.hasPermission)
  const token = useAuthStore((s) => s.token)
  const { params, setPage, setSort } = usePagination()

  const { data: batch, isLoading } = useQuery(repairBatchDetailOptions(batchId))
  const { data: ticketsData, isLoading: ticketsLoading } = useQuery(repairBatchTicketsOptions(batchId, params))

  const approveMutation = useMutation({
    mutationFn: () => repairBatchMutations.approve(batchId),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: repairBatchKeys.detail(batchId) })
      toast.success('Batch approved')
    },
    onError: (err) => toast.error(err.message),
  })

  const rejectMutation = useMutation({
    mutationFn: () => repairBatchMutations.reject(batchId),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: repairBatchKeys.detail(batchId) })
      toast.success('Batch rejected')
    },
    onError: (err) => toast.error(err.message),
  })

  const statusMutation = useMutation({
    mutationFn: (status: string) => repairBatchMutations.updateStatus(batchId, status),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: repairBatchKeys.detail(batchId) })
      toast.success('Status updated')
    },
    onError: (err) => toast.error(err.message),
  })

  if (isLoading) {
    return <div className="space-y-4"><Skeleton className="h-8 w-48" /><Skeleton className="h-64 w-full" /></div>
  }

  if (!batch) {
    return <p className="text-muted-foreground">Batch not found</p>
  }

  const tickets = ticketsData?.data ?? []
  const repairCount = ticketsData?.pagination.total ?? 0
  const totalEstimate = tickets.reduce((sum, t) => sum + (t.estimatedCost ? parseFloat(t.estimatedCost) : 0), 0)
  const totalActual = tickets.reduce((sum, t) => sum + (t.actualCost ? parseFloat(t.actualCost) : 0), 0)

  function handleTicketClick(ticket: RepairTicket) {
    navigate({ to: '/repairs/$ticketId', params: { ticketId: ticket.id }, search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })
  }

  function handleAddRepair() {
    // Navigate to new repair with batch and account pre-linked
    navigate({ to: '/repairs/new', search: { batchId, batchName: batch!.batchNumber ?? '', accountId: batch!.accountId, contactName: batch!.contactName ?? '' } })
  }

  async function generateBatchPdf() {
    if (!batch) return
    const doc = new jsPDF()
    let y = 20

    doc.setFontSize(18)
    doc.setFont('helvetica', 'bold')
    doc.text('LunarFront', 14, y)
    y += 8
    doc.setFontSize(12)
    doc.setFont('helvetica', 'normal')
    doc.text('Repair Batch Summary', 14, y)

    doc.setFontSize(14)
    doc.setFont('helvetica', 'bold')
    doc.text(`Batch #${batch.batchNumber ?? ''}`, 196, 20, { align: 'right' })
    doc.setFontSize(10)
    doc.setFont('helvetica', 'normal')
    doc.text(STATUS_LABELS[batch.status] ?? batch.status, 196, 28, { align: 'right' })

    y += 12
    doc.setDrawColor(200)
    doc.line(14, y, 196, y)
    y += 8

    // Contact info
    doc.setFontSize(10)
    doc.setFont('helvetica', 'bold')
    doc.text('Contact', 14, y)
    y += 5
    doc.setFont('helvetica', 'normal')
    if (batch.contactName) { doc.text(batch.contactName, 14, y); y += 5 }
    if (batch.contactPhone) { doc.text(batch.contactPhone, 14, y); y += 5 }
    if (batch.contactEmail) { doc.text(batch.contactEmail, 14, y); y += 5 }
    y += 3

    // Summary
    doc.setFont('helvetica', 'bold')
    doc.text(`Repairs: ${repairCount}`, 14, y)
    if (batch.dueDate) doc.text(`Due: ${new Date(batch.dueDate).toLocaleDateString()}`, 100, y)
    y += 8

    if (batch.notes) {
      doc.setFont('helvetica', 'normal')
      doc.setFontSize(9)
      const noteLines = doc.splitTextToSize(batch.notes, 180)
      doc.text(noteLines, 14, y)
      y += noteLines.length * 4 + 4
    }

    // Repairs table
    doc.setDrawColor(200)
    doc.line(14, y, 196, y)
    y += 6

    doc.setFontSize(10)
    doc.setFont('helvetica', 'bold')
    doc.text('Repairs', 14, y)
    y += 6

    // Table header
    doc.setFontSize(8)
    doc.setFillColor(245, 245, 245)
    doc.rect(14, y - 3, 182, 6, 'F')
    doc.text('Ticket #', 16, y)
    doc.text('Item', 40, y)
    doc.text('Problem', 100, y)
    doc.text('Status', 155, y)
    doc.text('Estimate', 190, y, { align: 'right' })
    y += 5

    doc.setFont('helvetica', 'normal')
    for (const ticket of tickets) {
      if (y > 270) { doc.addPage(); y = 20 }
      doc.text(ticket.ticketNumber ?? '-', 16, y)
      doc.text((ticket.itemDescription ?? '-').slice(0, 30), 40, y)
      doc.text(ticket.problemDescription.slice(0, 28), 100, y)
      doc.text(STATUS_LABELS[ticket.status] ?? ticket.status, 155, y)
      doc.text(ticket.estimatedCost ? `$${ticket.estimatedCost}` : '-', 190, y, { align: 'right' })
      y += 5
    }

    // Totals
    y += 3
    doc.setDrawColor(200)
    doc.line(140, y, 196, y)
    y += 5
    doc.setFont('helvetica', 'bold')
    doc.setFontSize(10)
    doc.text('Estimated Total:', 155, y, { align: 'right' })
    doc.text(`$${totalEstimate.toFixed(2)}`, 190, y, { align: 'right' })
    y += 5
    if (totalActual > 0) {
      doc.text('Actual Total:', 155, y, { align: 'right' })
      doc.text(`$${totalActual.toFixed(2)}`, 190, y, { align: 'right' })
      y += 5
    }

    // Footer
    y = 280
    doc.setFontSize(8)
    doc.setFont('helvetica', 'normal')
    doc.setTextColor(150)
    doc.text(`Generated ${new Date().toLocaleString()} — Batch #${batch.batchNumber}`, 105, y, { align: 'center' })

    const filename = `repair-batch-${batch.batchNumber}.pdf`
    doc.save(filename)

    // Upload to batch documents
    const blob = doc.output('blob')
    const formData = new FormData()
    formData.append('file', new File([blob], filename, { type: 'application/pdf' }))
    formData.append('entityType', 'repair_ticket')
    formData.append('entityId', batchId)
    formData.append('category', 'document')
    try {
      await fetch('/v1/files', {
        method: 'POST',
        headers: { Authorization: `Bearer ${token}` },
        body: formData,
      })
    } catch { /* non-critical */ }

    toast.success('Batch PDF downloaded')
  }

  return (
    <div className="space-y-6 max-w-5xl">
      <div className="flex items-center gap-3">
        <Button variant="ghost" size="sm" onClick={() => navigate({ to: '/repair-batches', search: { page: 1, limit: 25, q: undefined, sort: undefined, order: 'asc' as const } })}>
          <ArrowLeft className="h-4 w-4" />
        </Button>
        <div className="flex-1">
          <h1 className="text-2xl font-bold">Batch #{batch.batchNumber}</h1>
          <p className="text-sm text-muted-foreground">{batch.contactName ?? 'No contact'}</p>
        </div>
        <Button variant="outline" size="sm" onClick={generateBatchPdf}>
          <FileText className="mr-2 h-4 w-4" />PDF
        </Button>
        <Badge variant="outline" className="text-sm px-3 py-1">{STATUS_LABELS[batch.status] ?? batch.status}</Badge>
        <Badge variant={batch.approvalStatus === 'approved' ? 'default' : batch.approvalStatus === 'rejected' ? 'destructive' : 'secondary'} className="text-sm px-3 py-1">
          {batch.approvalStatus}
        </Badge>
      </div>

      {/* Status Progress Bar */}
      <Card>
        <CardContent className="pt-6 pb-4">
          <BatchStatusProgress
            currentStatus={batch.status}
            onStatusClick={hasPermission('repairs.edit') ? (status) => statusMutation.mutate(status) : undefined}
          />
        </CardContent>
      </Card>

      {/* Actions */}
      <div className="flex gap-2 flex-wrap">
        {hasPermission('repairs.admin') && batch.approvalStatus === 'pending' && (
          <>
            <Button onClick={() => approveMutation.mutate()} disabled={approveMutation.isPending}>
              <Check className="mr-2 h-4 w-4" />Approve
            </Button>
            <Button variant="destructive" onClick={() => rejectMutation.mutate()} disabled={rejectMutation.isPending}>
              <X className="mr-2 h-4 w-4" />Reject
            </Button>
          </>
        )}
        {hasPermission('repairs.edit') && batch.status === 'intake' && (
          <Button variant="secondary" onClick={() => statusMutation.mutate('in_progress')}>Start Work</Button>
        )}
        {hasPermission('repairs.edit') && batch.status === 'in_progress' && (
          <Button variant="secondary" onClick={() => statusMutation.mutate('completed')}>Mark Completed</Button>
        )}
        {hasPermission('repairs.edit') && batch.status === 'completed' && (
          <Button variant="secondary" onClick={() => statusMutation.mutate('delivered')}>Mark Delivered</Button>
        )}
      </div>

      {/* Batch Info */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <Card>
          <CardHeader><CardTitle className="text-lg">Contact</CardTitle></CardHeader>
          <CardContent className="space-y-2 text-sm">
            <div><span className="text-muted-foreground">Name:</span> {batch.contactName ?? '-'}</div>
            <div><span className="text-muted-foreground">Phone:</span> {batch.contactPhone ?? '-'}</div>
            <div><span className="text-muted-foreground">Email:</span> {batch.contactEmail ?? '-'}</div>
          </CardContent>
        </Card>
        <Card>
          <CardHeader><CardTitle className="text-lg">Summary</CardTitle></CardHeader>
          <CardContent className="space-y-2 text-sm">
            <div><span className="text-muted-foreground">Repairs:</span> <span className="font-semibold">{repairCount}</span></div>
            <div><span className="text-muted-foreground">Due:</span> {batch.dueDate ? new Date(batch.dueDate).toLocaleDateString() : '-'}</div>
            <div><span className="text-muted-foreground">Estimated Total:</span> <span className="font-semibold">${totalEstimate.toFixed(2)}</span></div>
            {totalActual > 0 && <div><span className="text-muted-foreground">Actual Total:</span> <span className="font-semibold">${totalActual.toFixed(2)}</span></div>}
            {batch.notes && <div><span className="text-muted-foreground">Notes:</span> {batch.notes}</div>}
          </CardContent>
        </Card>
      </div>

      {/* Tickets in batch */}
      <Card>
        <CardHeader className="flex flex-row items-center justify-between">
          <CardTitle className="text-lg">Repairs ({repairCount})</CardTitle>
          {hasPermission('repairs.edit') && (
            <Button size="sm" onClick={handleAddRepair}>
              <Plus className="mr-2 h-4 w-4" />Add Repair
            </Button>
          )}
        </CardHeader>
        <CardContent>
          <DataTable
            columns={ticketColumns}
            data={tickets}
            loading={ticketsLoading}
            page={params.page}
            totalPages={ticketsData?.pagination.totalPages ?? 1}
            total={repairCount}
            sort={params.sort}
            order={params.order}
            onPageChange={setPage}
            onSort={setSort}
            onRowClick={handleTicketClick}
          />
        </CardContent>
      </Card>
    </div>
  )
}