'use client'

import Link from 'next/link'
import { trpc } from '@/lib/trpc/client'
import { Card, CardContent } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { FileText, Video, CheckCircle2, Circle, Clock, Upload } from 'lucide-react'

export function FinalDocumentsBanner() {
  const { data: status } = trpc.applicant.getFinalDocumentStatus.useQuery()
  if (!status) return null

  const fmt = new Intl.DateTimeFormat(undefined, { dateStyle: 'long', timeStyle: 'short' })
  const zone = new Intl.DateTimeFormat(undefined, { timeZoneName: 'short' })
    .formatToParts(new Date()).find((p) => p.type === 'timeZoneName')?.value
  const uploadedCount = status.requirements.filter((r) => r.uploaded).length
  const total = status.requirements.length
  const done = status.allRequiredUploaded

  return (
    <Card className={done ? 'border-emerald-200 bg-emerald-50/50' : 'border-brand-blue/30 bg-brand-blue/5'}>
      <CardContent className="py-4 space-y-3">
        <div className="flex items-center justify-between gap-3 flex-wrap">
          <div className="flex items-center gap-2">
            {done ? <CheckCircle2 className="h-5 w-5 text-emerald-600" /> : <Upload className="h-5 w-5 text-brand-blue" />}
            <span className="font-semibold">
              {done ? 'Grand Final documents submitted' : 'Upload your Grand Final documents'}
            </span>
            <span className="text-sm text-muted-foreground">({uploadedCount} of {total})</span>
          </div>
          {status.deadline && (
            <span className={`flex items-center gap-1.5 text-sm ${status.deadlinePassed ? 'text-destructive' : 'text-muted-foreground'}`}>
              <Clock className="h-4 w-4" />
              {status.deadlinePassed ? 'Deadline passed' : 'Due'}: {fmt.format(new Date(status.deadline))}
              {zone ? ` (${zone})` : ''}
            </span>
          )}
        </div>
        <div className="flex flex-wrap gap-3">
          {status.requirements.map((r) => {
            const Icon = r.acceptedMimeTypes.some((m) => m.startsWith('video/')) ? Video : FileText
            return (
              <span key={r.id} className="flex items-center gap-1.5 text-sm">
                {r.uploaded ? <CheckCircle2 className="h-4 w-4 text-emerald-600" /> : <Circle className="h-4 w-4 text-muted-foreground/50" />}
                <Icon className="h-4 w-4 text-muted-foreground" />
                {r.name}
              </span>
            )
          })}
        </div>
        {!done && (
          <Button asChild size="sm" className="bg-brand-blue hover:bg-brand-blue-light">
            <Link href="/applicant/documents">
              <Upload className="mr-2 h-4 w-4" /> Upload documents
            </Link>
          </Button>
        )}
      </CardContent>
    </Card>
  )
}