"use client"

import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import {
    Briefcase,
    Users,
    Eye,
    TrendingUp,
    Plus,
    MoreVertical,
    Calendar,
    MapPin,
    DollarSign,
    MessageSquare,
    BarChart3,
} from "lucide-react"
import Link from "next/link"

export function CompanyDashboardContent() {
    const companyStats = {
        activeJobs: 12,
        totalApplications: 234,
        totalViews: 1542,
        thisMonth: 89,
    }

    const recentJobs = [
        {
            id: "1",
            title: "Desenvolvedor Full Stack Sênior",
            type: "Tempo Integral",
            location: "São Paulo, SP",
            salary: "R$ 12.000 - R$ 18.000",
            applications: 45,
            views: 320,
            postedAt: "2 dias atrás",
            status: "active",
        },
        {
            id: "2",
            title: "Designer UX/UI",
            type: "Remoto",
            location: "Remoto",
            salary: "R$ 8.000 - R$ 12.000",
            applications: 32,
            views: 256,
            postedAt: "5 dias atrás",
            status: "active",
        },
        {
            id: "3",
            title: "Product Manager",
            type: "Tempo Integral",
            location: "São Paulo, SP",
            salary: "R$ 15.000 - R$ 20.000",
            applications: 28,
            views: 189,
            postedAt: "1 semana atrás",
            status: "active",
        },
    ]

    const recentApplications = [
        {
            id: "1",
            candidateName: "Ana Silva",
            candidateAvatar: "",
            jobTitle: "Desenvolvedor Full Stack Sênior",
            appliedAt: "Há 2 horas",
            status: "pending",
        },
        {
            id: "2",
            candidateName: "Carlos Santos",
            candidateAvatar: "",
            jobTitle: "Designer UX/UI",
            appliedAt: "Há 5 horas",
            status: "pending",
        },
        {
            id: "3",
            candidateName: "Maria Oliveira",
            candidateAvatar: "",
            jobTitle: "Product Manager",
            appliedAt: "Há 1 dia",
            status: "reviewing",
        },
    ]

    const statusColors = {
        pending: "bg-yellow-500",
        reviewing: "bg-blue-500",
        accepted: "bg-green-500",
        rejected: "bg-red-500",
    }

    return (
        <div className="space-y-8">
            {/* Header */}
            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div>
                    <h1 className="text-2xl sm:text-3xl font-bold text-foreground mb-2">
                        Dashboard
                    </h1>
                    <p className="text-muted-foreground">
                        Bem-vindo de volta, TechCorp! 👋
                    </p>
                </div>
                <Link href="/dashboard/my-jobs">
                    <Button size="lg" className="w-full sm:w-auto">
                        <Plus className="h-5 w-5 mr-2" />
                        Nova Vaga
                    </Button>
                </Link>
            </div>

            {/* Stats Cards */}
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
                <Card>
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                        <CardTitle className="text-sm font-medium">
                            Vagas Ativas
                        </CardTitle>
                        <Briefcase className="h-4 w-4 text-muted-foreground" />
                    </CardHeader>
                    <CardContent>
                        <div className="text-2xl font-bold">
                            {companyStats.activeJobs}
                        </div>
                        <p className="text-xs text-muted-foreground mt-1">
                            Publicadas no momento
                        </p>
                    </CardContent>
                </Card>

                <Card>
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                        <CardTitle className="text-sm font-medium">
                            Candidaturas
                        </CardTitle>
                        <Users className="h-4 w-4 text-muted-foreground" />
                    </CardHeader>
                    <CardContent>
                        <div className="text-2xl font-bold">
                            {companyStats.totalApplications}
                        </div>
                        <p className="text-xs text-muted-foreground mt-1">
                            +{companyStats.thisMonth} este mês
                        </p>
                    </CardContent>
                </Card>

                <Card>
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                        <CardTitle className="text-sm font-medium">
                            Visualizações
                        </CardTitle>
                        <Eye className="h-4 w-4 text-muted-foreground" />
                    </CardHeader>
                    <CardContent>
                        <div className="text-2xl font-bold">
                            {companyStats.totalViews}
                        </div>
                        <p className="text-xs text-muted-foreground mt-1">
                            Nas suas vagas
                        </p>
                    </CardContent>
                </Card>

                <Card>
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                        <CardTitle className="text-sm font-medium">
                            Taxa de Conversão
                        </CardTitle>
                        <TrendingUp className="h-4 w-4 text-muted-foreground" />
                    </CardHeader>
                    <CardContent>
                        <div className="text-2xl font-bold">15.2%</div>
                        <p className="text-xs text-green-600 mt-1">
                            +2.5% vs mês passado
                        </p>
                    </CardContent>
                </Card>
            </div>

            <div className="grid lg:grid-cols-3 gap-6">
                {/* Vagas Recentes */}
                <div className="lg:col-span-2">
                    <Card>
                        <CardHeader>
                            <div className="flex items-center justify-between">
                                <div>
                                    <CardTitle>Vagas Recentes</CardTitle>
                                    <CardDescription>
                                        Suas últimas vagas publicadas
                                    </CardDescription>
                                </div>
                                <Link href="/dashboard/jobs">
                                    <Button variant="ghost" size="sm">
                                        Ver todas
                                    </Button>
                                </Link>
                            </div>
                        </CardHeader>
                        <CardContent className="space-y-4">
                            {recentJobs.map((job) => (
                                <div
                                    key={job.id}
                                    className="border rounded-lg p-4 hover:bg-muted/50 transition-colors"
                                >
                                    <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3">
                                        <div className="flex-1 min-w-0">
                                            <h3 className="font-semibold text-base sm:text-lg mb-2 truncate">
                                                {job.title}
                                            </h3>
                                            <div className="flex flex-wrap gap-2 text-sm text-muted-foreground mb-3">
                                                <div className="flex items-center gap-1">
                                                    <MapPin className="h-4 w-4 shrink-0" />
                                                    <span className="truncate">{job.location}</span>
                                                </div>
                                                <Badge
                                                    variant="secondary"
                                                    className="whitespace-nowrap"
                                                >
                                                    {job.type}
                                                </Badge>
                                                <div className="flex items-center gap-1">
                                                    <DollarSign className="h-4 w-4 shrink-0" />
                                                    <span className="whitespace-nowrap">
                                                        {job.salary}
                                                    </span>
                                                </div>
                                            </div>
                                            <div className="flex flex-wrap gap-4 text-sm">
                                                <span className="flex items-center gap-1">
                                                    <Users className="h-4 w-4" />
                                                    {job.applications} candidaturas
                                                </span>
                                                <span className="flex items-center gap-1">
                                                    <Eye className="h-4 w-4" />
                                                    {job.views} visualizações
                                                </span>
                                                <span className="flex items-center gap-1">
                                                    <Calendar className="h-4 w-4" />
                                                    {job.postedAt}
                                                </span>
                                            </div>
                                        </div>
                                        <Button
                                            variant="ghost"
                                            size="icon"
                                            className="shrink-0"
                                        >
                                            <MoreVertical className="h-4 w-4" />
                                        </Button>
                                    </div>
                                </div>
                            ))}
                        </CardContent>
                    </Card>
                </div>

                {/* Candidaturas Recentes */}
                <div>
                    <Card>
                        <CardHeader>
                            <div className="flex items-center justify-between">
                                <div>
                                    <CardTitle>Candidaturas</CardTitle>
                                    <CardDescription>Novas candidaturas</CardDescription>
                                </div>
                                <Link href="/dashboard/candidates">
                                    <Button variant="ghost" size="sm">
                                        Ver todas
                                    </Button>
                                </Link>
                            </div>
                        </CardHeader>
                        <CardContent className="space-y-4">
                            {recentApplications.map((application) => (
                                <div
                                    key={application.id}
                                    className="flex items-start gap-3 p-3 rounded-lg border hover:bg-muted/50 transition-colors cursor-pointer"
                                >
                                    <div className="relative">
                                        <Avatar className="h-10 w-10">
                                            <AvatarImage src={application.candidateAvatar} />
                                            <AvatarFallback className="bg-primary/10 text-primary text-sm">
                                                {application.candidateName
                                                    .split(" ")
                                                    .map((n) => n[0])
                                                    .join("")
                                                    .toUpperCase()
                                                    .slice(0, 2)}
                                            </AvatarFallback>
                                        </Avatar>
                                        <span
                                            className={`absolute -top-1 -right-1 h-3 w-3 rounded-full ${statusColors[
                                                application.status as keyof typeof statusColors
                                            ]
                                                } border-2 border-background`}
                                        />
                                    </div>
                                    <div className="flex-1 min-w-0">
                                        <p className="font-medium text-sm truncate">
                                            {application.candidateName}
                                        </p>
                                        <p className="text-xs text-muted-foreground truncate">
                                            {application.jobTitle}
                                        </p>
                                        <p className="text-xs text-muted-foreground mt-1">
                                            {application.appliedAt}
                                        </p>
                                    </div>
                                </div>
                            ))}
                        </CardContent>
                    </Card>
                </div>
            </div>
        </div>
    )
}
