"use client"

import { useState } from "react"
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 {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
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: "Full Stack Developer", status: "active" },
    { id: "2", name: "Maria Santos", position: "UX/UI Designer", status: "active" },
    { id: "3", name: "Carlos Oliveira", position: "Product Manager", status: "pending" },
    { id: "4", name: "Ana Costa", position: "Data Engineer", status: "active" },
    { id: "5", name: "Pedro Alves", position: "DevOps Engineer", status: "inactive" },
]

export function AdminDashboardContent() {
    const [isDialogOpen, setIsDialogOpen] = useState(false)
    const companyOptions = Array.from(new Set(mockJobs.map((job) => job.company))).sort()

    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">Overview of the jobs portal</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="Active jobs"
                    value={mockStats.activeJobs}
                    icon={Briefcase}
                    description="Total posted jobs"
                />
                <StatsCard
                    title="Total candidates"
                    value={mockStats.totalCandidates}
                    icon={Users}
                    description="Registered users"
                />
                <StatsCard
                    title="New applications"
                    value={mockStats.newApplications}
                    icon={FileText}
                    description="Last 7 days"
                />
                <StatsCard title="Conversion rate" value="12.5%" icon={TrendingUp} description="Applications per job" />
            </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>Job management</CardTitle>
                        <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
                            <DialogTrigger asChild>
                                <Button>
                                    <Plus className="mr-2 h-4 w-4" />
                                    Add job
                                </Button>
                            </DialogTrigger>
                            <DialogContent className="max-w-2xl">
                                <DialogHeader>
                                    <DialogTitle>Create new job</DialogTitle>
                                    <DialogDescription>Fill in the details for the new job opening</DialogDescription>
                                </DialogHeader>
                                <div className="grid gap-4 py-4">
                                    <div className="grid gap-2">
                                        <Label htmlFor="dashboard-title">Job title</Label>
                                        <Input id="dashboard-title" placeholder="e.g. Full Stack Developer" />
                                    </div>
                                    <div className="grid gap-2">
                                        <Label htmlFor="dashboard-company">Company</Label>
                                        <Select>
                                            <SelectTrigger id="dashboard-company">
                                                <SelectValue placeholder="Select a company" />
                                            </SelectTrigger>
                                            <SelectContent>
                                                {companyOptions.map((company) => (
                                                    <SelectItem key={company} value={company}>
                                                        {company}
                                                    </SelectItem>
                                                ))}
                                            </SelectContent>
                                        </Select>
                                    </div>
                                    <div className="grid grid-cols-2 gap-4">
                                        <div className="grid gap-2">
                                            <Label htmlFor="dashboard-location">Location</Label>
                                            <Input id="dashboard-location" placeholder="São Paulo, SP" />
                                        </div>
                                        <div className="grid gap-2">
                                            <Label htmlFor="dashboard-type">Type</Label>
                                            <Select>
                                                <SelectTrigger id="dashboard-type">
                                                    <SelectValue placeholder="Select" />
                                                </SelectTrigger>
                                                <SelectContent>
                                                    <SelectItem value="full-time">Full time</SelectItem>
                                                    <SelectItem value="part-time">Part time</SelectItem>
                                                    <SelectItem value="contract">Contract</SelectItem>
                                                    <SelectItem value="remote">Remote</SelectItem>
                                                </SelectContent>
                                            </Select>
                                        </div>
                                    </div>
                                    <div className="grid grid-cols-2 gap-4">
                                        <div className="grid gap-2">
                                            <Label htmlFor="dashboard-salary">Salary</Label>
                                            <Input id="dashboard-salary" placeholder="R$ 8,000 - R$ 12,000" />
                                        </div>
                                        <div className="grid gap-2">
                                            <Label htmlFor="dashboard-level">Level</Label>
                                            <Select>
                                                <SelectTrigger id="dashboard-level">
                                                    <SelectValue placeholder="Select" />
                                                </SelectTrigger>
                                                <SelectContent>
                                                    <SelectItem value="junior">Junior</SelectItem>
                                                    <SelectItem value="mid">Mid-level</SelectItem>
                                                    <SelectItem value="senior">Senior</SelectItem>
                                                </SelectContent>
                                            </Select>
                                        </div>
                                    </div>
                                    <div className="grid gap-2">
                                        <Label htmlFor="dashboard-description">Description</Label>
                                        <Textarea
                                            id="dashboard-description"
                                            placeholder="Describe the responsibilities and requirements..."
                                            rows={4}
                                        />
                                    </div>
                                </div>
                                <DialogFooter>
                                    <Button variant="outline" onClick={() => setIsDialogOpen(false)}>
                                        Cancel
                                    </Button>
                                    <Button onClick={() => setIsDialogOpen(false)}>Publish job</Button>
                                </DialogFooter>
                            </DialogContent>
                        </Dialog>
                    </CardHeader>
                    <CardContent>
                        <Table>
                            <TableHeader>
                                <TableRow>
                                    <TableHead>Title</TableHead>
                                    <TableHead>Company</TableHead>
                                    <TableHead>Location</TableHead>
                                    <TableHead>Status</TableHead>
                                    <TableHead>Applications</TableHead>
                                    <TableHead className="text-right">Actions</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">Active</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>Candidate management</CardTitle>
                    </CardHeader>
                    <CardContent>
                        <Table>
                            <TableHeader>
                                <TableRow>
                                    <TableHead>Name</TableHead>
                                    <TableHead>Desired role</TableHead>
                                    <TableHead>Status</TableHead>
                                    <TableHead className="text-right">Actions</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">Active</Badge>}
                                            {candidate.status === "pending" && <Badge variant="secondary">Pending</Badge>}
                                            {candidate.status === "inactive" && <Badge variant="outline">Inactive</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>
    )
}
