'use client'

import { motion } from 'motion/react'
import { daysUntil } from '@/lib/utils'

type PipelineRound = {
  id: string
  name: string
  roundType: string
  status: string
  projectStates: {
    PENDING: number
    IN_PROGRESS: number
    PASSED: number
    REJECTED: number
    COMPLETED: number
    WITHDRAWN: number
    total: number
  }
  windowCloseAt: Date | null
}

type RoundStatsSubmissionProps = {
  round: PipelineRound
}

export function RoundStatsSubmission({ round }: RoundStatsSubmissionProps) {
  const { projectStates } = round
  const completedPct = projectStates.total > 0
    ? ((projectStates.COMPLETED / projectStates.total) * 100).toFixed(0)
    : '0'

  const deadlineDays = round.windowCloseAt ? daysUntil(new Date(round.windowCloseAt)) : null
  const deadlineLabel =
    deadlineDays === null
      ? 'No deadline'
      : deadlineDays <= 0
        ? 'Closed'
        : deadlineDays === 1
          ? '1 day left'
          : `${deadlineDays} days left`

  const stats = [
    {
      value: projectStates.total,
      label: 'In round',
      detail: 'Total projects',
      accent: 'text-brand-blue',
    },
    {
      value: projectStates.COMPLETED,
      label: 'Completed',
      detail: `${completedPct}% done`,
      accent: 'text-emerald-600',
    },
    {
      value: projectStates.IN_PROGRESS,
      label: 'In progress',
      detail: projectStates.IN_PROGRESS > 0 ? 'Working on submissions' : 'None in progress',
      accent: projectStates.IN_PROGRESS > 0 ? 'text-amber-600' : 'text-emerald-600',
    },
    {
      value: deadlineDays ?? '—',
      label: 'Deadline',
      detail: deadlineLabel,
      accent: deadlineDays !== null && deadlineDays <= 3 ? 'text-red-600' : 'text-brand-teal',
    },
  ]

  return (
    <>
      <p className="mb-2 text-[11px] font-semibold uppercase tracking-widest text-muted-foreground/70">
        {round.name} &mdash; Submission
      </p>

      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 0.4 }}
        className="flex items-baseline justify-between border-b border-t py-3 md:hidden"
      >
        {stats.map((s, i) => (
          <div key={i} className={`flex-1 text-center ${i > 0 ? 'border-l border-border/50' : ''}`}>
            <span className="text-xl font-bold tabular-nums tracking-tight">{s.value}</span>
            <p className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground mt-0.5">{s.label}</p>
          </div>
        ))}
      </motion.div>

      <div className="hidden md:block">
        <div className="grid grid-cols-4 gap-px rounded-lg bg-border/40 overflow-hidden">
          {stats.map((s, i) => (
            <motion.div
              key={i}
              initial={{ opacity: 0, y: 8 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.3, delay: i * 0.06 }}
              className="bg-background px-5 py-4 group hover:bg-muted/30 transition-colors"
            >
              <span className="text-3xl font-bold tabular-nums tracking-tight">{s.value}</span>
              <p className="text-xs font-medium text-muted-foreground mt-1">{s.label}</p>
              <p className={`text-xs mt-0.5 ${s.accent}`}>{s.detail}</p>
            </motion.div>
          ))}
        </div>
      </div>
    </>
  )
}
