"use client"

import { useRouter } from "next/navigation"
import { StatsCard } from "@/components/stats-card"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { mockStats, mockJobs } from "@/lib/mock-data"
import { Briefcase, Users, TrendingUp, FileText, Plus, MoreHorizontal } from "lucide-react"
import { motion } from "framer-motion"

const mockCandidates = [
    { id: "1", name: "João Silva", position: "Desenvolvedor Full Stack", status: "active" },
    { id: "2", name: "Maria Santos", position: "Designer UX/UI", status: "active" },
    { id: "3", name: "Carlos Oliveira", position: "Product Manager", status: "pending" },
    { id: "4", name: "Ana Costa", position: "Engenheiro de Dados", status: "active" },
    { id: "5", name: "Pedro Alves", position: "DevOps Engineer", status: "inactive" },
]

export function AdminDashboardContent() {
    const router = useRouter()

    return (
        <div className="space-y-8">
            {/* Header */}
            <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5 }}
            >
                <h1 className="text-3xl font-bold mb-2">Dashboard</h1>
                <p className="text-muted-foreground">Visão geral do portal de empregos</p>
            </motion.div>

            {/* Stats */}
            <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: 0.1 }}
                className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"
            >
                <StatsCard
                    title="Vagas Ativas"
                    value={mockStats.activeJobs}
                    icon={Briefcase}
                    description="Total de vagas publicadas"
                />
                <StatsCard
                    title="Total de Candidatos"
                    value={mockStats.totalCandidates}
                    icon={Users}
                    description="Usuários cadastrados"
                />
                <StatsCard
                    title="Novas Candidaturas"
                    value={mockStats.newApplications}
                    icon={FileText}
                    description="Últimos 7 dias"
                />
                <StatsCard title="Taxa de Conversão" value="12.5%" icon={TrendingUp} description="Candidaturas por vaga" />
            </motion.div>

            {/* Jobs Management */}
            <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: 0.4 }}
            >
                <Card>
                    <CardHeader className="flex flex-row items-center justify-between">
                        <CardTitle>Gestão de Vagas</CardTitle>
                        <Button onClick={() => router.push('/dashboard/jobs')}>
                            <Plus className="mr-2 h-4 w-4" />
                            Adicionar Vaga
                        </Button>
                    </CardHeader>
                    <CardContent>
                        <Table>
                            <TableHeader>
                                <TableRow>
                                    <TableHead>Título</TableHead>
                                    <TableHead>Empresa</TableHead>
                                    <TableHead>Localização</TableHead>
                                    <TableHead>Status</TableHead>
                                    <TableHead>Candidaturas</TableHead>
                                    <TableHead className="text-right">Ações</TableHead>
                                </TableRow>
                            </TableHeader>
                            <TableBody>
                                {mockJobs.slice(0, 5).map((job) => (
                                    <TableRow key={job.id}>
                                        <TableCell className="font-medium">{job.title}</TableCell>
                                        <TableCell>{job.company}</TableCell>
                                        <TableCell>{job.location}</TableCell>
                                        <TableCell>
                                            <Badge variant="secondary">Ativa</Badge>
                                        </TableCell>
                                        <TableCell>{((job.id.charCodeAt(0) * 7) % 50) + 10}</TableCell>
                                        <TableCell className="text-right">
                                            <Button variant="ghost" size="icon">
                                                <MoreHorizontal className="h-4 w-4" />
                                            </Button>
                                        </TableCell>
                                    </TableRow>
                                ))}
                            </TableBody>
                        </Table>
                    </CardContent>
                </Card>
            </motion.div>

            {/* Candidates Management */}
            <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: 0.5 }}
            >
                <Card>
                    <CardHeader>
                        <CardTitle>Gestão de Candidatos</CardTitle>
                    </CardHeader>
                    <CardContent>
                        <Table>
                            <TableHeader>
                                <TableRow>
                                    <TableHead>Nome</TableHead>
                                    <TableHead>Cargo Pretendido</TableHead>
                                    <TableHead>Status</TableHead>
                                    <TableHead className="text-right">Ações</TableHead>
                                </TableRow>
                            </TableHeader>
                            <TableBody>
                                {mockCandidates.map((candidate) => (
                                    <TableRow key={candidate.id}>
                                        <TableCell className="font-medium">{candidate.name}</TableCell>
                                        <TableCell>{candidate.position}</TableCell>
                                        <TableCell>
                                            {candidate.status === "active" && <Badge className="bg-green-500">Ativo</Badge>}
                                            {candidate.status === "pending" && <Badge variant="secondary">Pendente</Badge>}
                                            {candidate.status === "inactive" && <Badge variant="outline">Inativo</Badge>}
                                        </TableCell>
                                        <TableCell className="text-right">
                                            <Button variant="ghost" size="icon">
                                                <MoreHorizontal className="h-4 w-4" />
                                            </Button>
                                        </TableCell>
                                    </TableRow>
                                ))}
                            </TableBody>
                        </Table>
                    </CardContent>
                </Card>
            </motion.div>
        </div>
    )
}
