'use client'

import { motion } from 'motion/react'
import { Layers } from 'lucide-react'
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { formatEnumLabel } from '@/lib/utils'

type CategoryBreakdownProps = {
  categories: Array<{ competitionCategory: string | null; _count: number }>
  issues: Array<{ oceanIssue: string | null; _count: number }>
}

export function CategoryBreakdown({ categories: rawCategories, issues: rawIssues }: CategoryBreakdownProps) {
  const categories = rawCategories
    .filter((c) => c.competitionCategory !== null)
    .map((c) => ({
      label: formatEnumLabel(c.competitionCategory!),
      count: c._count,
    }))
    .sort((a, b) => b.count - a.count)

  const issues = rawIssues
    .filter((i) => i.oceanIssue !== null)
    .map((i) => ({
      label: formatEnumLabel(i.oceanIssue!),
      count: i._count,
    }))
    .sort((a, b) => b.count - a.count)
    .slice(0, 5)

  const maxCategoryCount = Math.max(...categories.map((c) => c.count), 1)
  const maxIssueCount = Math.max(...issues.map((i) => i.count), 1)

  return (
    <Card className="h-full">
      <CardHeader className="pb-3">
        <div className="flex items-center gap-2.5">
          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-violet-500/10">
            <Layers className="h-4 w-4 text-violet-500" />
          </div>
          <CardTitle className="text-base">Categories</CardTitle>
        </div>
      </CardHeader>
      <CardContent>
        {categories.length === 0 && issues.length === 0 ? (
          <div className="flex flex-col items-center justify-center py-8 text-center">
            <Layers className="h-8 w-8 text-muted-foreground/30" />
            <p className="mt-2 text-xs text-muted-foreground">
              No category data
            </p>
          </div>
        ) : (
          <div className="space-y-5">
            {categories.length > 0 && (
              <div className="space-y-2">
                <p className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
                  Competition Type
                </p>
                {categories.map((cat) => (
                  <div key={cat.label} className="space-y-1">
                    <div className="flex items-center justify-between text-xs">
                      <span className="truncate mr-2">{cat.label}</span>
                      <span className="font-bold tabular-nums">{cat.count}</span>
                    </div>
                    <div className="h-1.5 rounded-full bg-muted overflow-hidden">
                      <motion.div
                        className="h-full rounded-full bg-gradient-to-r from-brand-blue to-brand-teal"
                        initial={{ width: 0 }}
                        animate={{ width: `${(cat.count / maxCategoryCount) * 100}%` }}
                        transition={{ duration: 0.6, delay: 0.3, ease: 'easeOut' }}
                      />
                    </div>
                  </div>
                ))}
              </div>
            )}
            {issues.length > 0 && (
              <div className="space-y-2">
                <p className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
                  Top Issues
                </p>
                {issues.map((issue) => (
                  <div key={issue.label} className="space-y-1">
                    <div className="flex items-center justify-between text-xs">
                      <span className="truncate mr-2">{issue.label}</span>
                      <span className="font-bold tabular-nums">{issue.count}</span>
                    </div>
                    <div className="h-1.5 rounded-full bg-muted overflow-hidden">
                      <motion.div
                        className="h-full rounded-full bg-gradient-to-r from-brand-teal to-brand-teal-light"
                        initial={{ width: 0 }}
                        animate={{ width: `${(issue.count / maxIssueCount) * 100}%` }}
                        transition={{ duration: 0.6, delay: 0.4, ease: 'easeOut' }}
                      />
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        )}
      </CardContent>
    </Card>
  )
}
