"use client"

import { useEffect, useState, useCallback } from "react"
import {
    Card,
    CardContent,
    CardHeader,
    CardTitle,
} from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select"
import { Input } from "@/components/ui/input"
import {
    Search,
    Plus,
    Edit,
    Trash2,
    Eye,
    Users,
    Calendar,
    MapPin,
    DollarSign,
    MoreVertical,
    Briefcase,
    Clock,
    TrendingUp,
    Copy,
    ExternalLink,
    Pause,
    Play,
    Zap,
    Loader2,
} from "lucide-react"
import Link from "next/link"
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { toast } from "sonner"
import { authApi, jobsApi, ApiJob, ApiUser } from "@/lib/api"
import { formatDistanceToNow } from "date-fns"
import { ptBR } from "date-fns/locale"

const statusConfig = {
    active: { label: "Active", color: "bg-green-100 text-green-800 border-green-200" },
    paused: { label: "Paused", color: "bg-yellow-100 text-yellow-800 border-yellow-200" },
    closed: { label: "Closed", color: "bg-gray-100 text-gray-800 border-gray-200" },
    draft: { label: "Draft", color: "bg-blue-100 text-blue-800 border-blue-200" },
    published: { label: "Active", color: "bg-green-100 text-green-800 border-green-200" }, // Mapping published to active style
    open: { label: "Active", color: "bg-green-100 text-green-800 border-green-200" },
}

const workModeConfig = {
    remote: { label: "Remote", color: "bg-cyan-100 text-cyan-800" },
    hybrid: { label: "Hybrid", color: "bg-violet-100 text-violet-800" },
    onsite: { label: "On-site", color: "bg-orange-100 text-orange-800" },
}

export default function MyJobsPage() {
    const [jobs, setJobs] = useState<ApiJob[]>([])
    const [isLoading, setIsLoading] = useState(true)
    const [user, setUser] = useState<ApiUser | null>(null)
    const [statusFilter, setStatusFilter] = useState("all")
    const [searchTerm, setSearchTerm] = useState("")

    const fetchJobs = useCallback(async () => {
        try {
            setIsLoading(true)
            // 1. Get User to know Company ID
            const currentUser = await authApi.getCurrentUser()
            setUser(currentUser)

            if (!currentUser.companyId) {
                // If user has no company, they shouldn't see jobs or should be prompted to create one
                // For now just show empty list
                setJobs([])
                return
            }

            // 2. Fetch Jobs for that Company
            const response = await jobsApi.list({
                companyId: currentUser.companyId,
                limit: 100 // Fetch all for now to client-side filter
            })
            setJobs(response.data)

        } catch (error) {
            console.error("Error fetching jobs:", error)
            toast.error("Failed to load jobs")
        } finally {
            setIsLoading(false)
        }
    }, [])

    useEffect(() => {
        fetchJobs()
    }, [fetchJobs])


    const filteredJobs = jobs.filter((job) => {
        const matchesStatus = statusFilter === "all" || job.status === statusFilter
        const matchesSearch =
            job.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
            job.location.toLowerCase().includes(searchTerm.toLowerCase())
        return matchesStatus && matchesSearch
    })

    const stats = {
        total: jobs.length,
        active: jobs.filter((j) => j.status === "published" || j.status === "open").length,
        applications: jobs.reduce((acc, j) => acc + (j.applicationCount || 0), 0),
        views: 0, // Backend does not strictly track views yet per ApiJob interface
    }

    // Helper to format currency
    const formatSalary = (min?: number, max?: number) => {
        if (!min && !max) return "Negotiable"
        if (min && max) return `R$ ${min.toLocaleString()} - R$ ${max.toLocaleString()}`
        if (min) return `From R$ ${min.toLocaleString()}`
        return `Up to R$ ${max?.toLocaleString()}`
    }

    if (isLoading) {
        return (
            <div className="flex items-center justify-center min-h-[400px]">
                <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
            </div>
        )
    }

    return (
        <div className="space-y-6">
            {/* 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">
                        My Jobs
                    </h1>
                    <p className="text-muted-foreground">
                        Manage your job postings for {user?.companyId ? "your company" : "..."}
                    </p>
                </div>
                <Link href="/dashboard/company/jobs/new">
                    <Button size="lg" className="w-full sm:w-auto">
                        <Plus className="h-5 w-5 mr-2" />
                        Post New Job
                    </Button>
                </Link>
            </div>

            {/* Stats */}
            <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
                <Card>
                    <CardContent className="p-4">
                        <div className="flex items-center gap-2">
                            <Briefcase className="h-5 w-5 text-muted-foreground" />
                            <div>
                                <div className="text-2xl font-bold">{stats.total}</div>
                                <p className="text-xs text-muted-foreground">Total Jobs</p>
                            </div>
                        </div>
                    </CardContent>
                </Card>
                <Card>
                    <CardContent className="p-4">
                        <div className="flex items-center gap-2">
                            <TrendingUp className="h-5 w-5 text-green-500" />
                            <div>
                                <div className="text-2xl font-bold text-green-600">{stats.active}</div>
                                <p className="text-xs text-muted-foreground">Active</p>
                            </div>
                        </div>
                    </CardContent>
                </Card>
                <Card>
                    <CardContent className="p-4">
                        <div className="flex items-center gap-2">
                            <Users className="h-5 w-5 text-blue-500" />
                            <div>
                                <div className="text-2xl font-bold text-blue-600">{stats.applications}</div>
                                <p className="text-xs text-muted-foreground">Applications</p>
                            </div>
                        </div>
                    </CardContent>
                </Card>
                <Card>
                    <CardContent className="p-4">
                        <div className="flex items-center gap-2">
                            <Eye className="h-5 w-5 text-purple-500" />
                            <div>
                                <div className="text-2xl font-bold text-purple-600">{stats.views}</div>
                                <p className="text-xs text-muted-foreground">Total Views</p>
                            </div>
                        </div>
                    </CardContent>
                </Card>
            </div>

            {/* Filters */}
            <div className="flex flex-col sm:flex-row gap-4">
                <div className="relative flex-1">
                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                    <Input
                        placeholder="Search jobs..."
                        className="pl-10"
                        value={searchTerm}
                        onChange={(e) => setSearchTerm(e.target.value)}
                    />
                </div>
                <Select value={statusFilter} onValueChange={setStatusFilter}>
                    <SelectTrigger className="w-full sm:w-[180px]">
                        <SelectValue placeholder="Filter by status" />
                    </SelectTrigger>
                    <SelectContent>
                        <SelectItem value="all">All Status</SelectItem>
                        <SelectItem value="published">Active (Published)</SelectItem>
                        <SelectItem value="draft">Draft</SelectItem>
                        <SelectItem value="closed">Closed</SelectItem>
                    </SelectContent>
                </Select>
            </div>

            {/* Jobs List */}
            <div className="space-y-4">
                {filteredJobs.length === 0 ? (
                    <Card>
                        <CardContent className="p-8 text-center text-muted-foreground">
                            <Briefcase className="h-12 w-12 mx-auto mb-4 opacity-50" />
                            <h3 className="font-semibold text-lg mb-2">No jobs found</h3>
                            <p>Start by posting your first job using the button above.</p>
                            <Link href="/dashboard/company/jobs/new">
                                <Button className="mt-4">
                                    <Plus className="h-4 w-4 mr-2" />
                                    Post New Job
                                </Button>
                            </Link>
                        </CardContent>
                    </Card>
                ) : (
                    filteredJobs.map((job) => (
                        <Card key={job.id} className="hover:border-primary/50 transition-colors">
                            <CardContent className="p-4 sm:p-6">
                                <div className="flex flex-col lg:flex-row lg:items-center gap-4">
                                    {/* Job Info */}
                                    <div className="flex-1 min-w-0">
                                        <div className="flex items-start justify-between gap-2 mb-2">
                                            <div className="flex items-center gap-2 flex-wrap">
                                                <h3 className="font-semibold text-lg">{job.title}</h3>
                                                <Badge
                                                    variant="outline"
                                                    className={statusConfig[job.status as keyof typeof statusConfig]?.color || "bg-gray-100"}
                                                >
                                                    {statusConfig[job.status as keyof typeof statusConfig]?.label || job.status}
                                                </Badge>
                                                <Badge
                                                    variant="secondary"
                                                    className={workModeConfig[job.workMode as keyof typeof workModeConfig]?.color || "bg-gray-100"}
                                                >
                                                    {workModeConfig[job.workMode as keyof typeof workModeConfig]?.label || job.workMode}
                                                </Badge>
                                            </div>
                                            <DropdownMenu>
                                                <DropdownMenuTrigger asChild>
                                                    <Button variant="ghost" size="icon" className="shrink-0">
                                                        <MoreVertical className="h-4 w-4" />
                                                    </Button>
                                                </DropdownMenuTrigger>
                                                <DropdownMenuContent align="end">
                                                    <DropdownMenuItem>
                                                        <Eye className="h-4 w-4 mr-2" />
                                                        View
                                                    </DropdownMenuItem>
                                                    <DropdownMenuItem>
                                                        <Edit className="h-4 w-4 mr-2" />
                                                        Edit
                                                    </DropdownMenuItem>
                                                    <DropdownMenuItem>
                                                        <Copy className="h-4 w-4 mr-2" />
                                                        Duplicate
                                                    </DropdownMenuItem>
                                                    <DropdownMenuItem>
                                                        <ExternalLink className="h-4 w-4 mr-2" />
                                                        Preview
                                                    </DropdownMenuItem>

                                                    {/* Boost Feature (Roadmap) */}
                                                    <DropdownMenuSeparator />
                                                    <DropdownMenuItem className="text-amber-600 font-medium cursor-pointer">
                                                        <Zap className="h-4 w-4 mr-2" />
                                                        Boost Job
                                                    </DropdownMenuItem>
                                                    <DropdownMenuSeparator />

                                                    {job.status === "published" || job.status === "open" ? (
                                                        <DropdownMenuItem>
                                                            <Pause className="h-4 w-4 mr-2" />
                                                            Pause
                                                        </DropdownMenuItem>
                                                    ) : (
                                                        <DropdownMenuItem>
                                                            <Play className="h-4 w-4 mr-2" />
                                                            Activate
                                                        </DropdownMenuItem>
                                                    )}
                                                    <DropdownMenuItem className="text-destructive">
                                                        <Trash2 className="h-4 w-4 mr-2" />
                                                        Delete
                                                    </DropdownMenuItem>
                                                </DropdownMenuContent>
                                            </DropdownMenu>
                                        </div>

                                        <div className="flex flex-wrap gap-4 text-sm text-muted-foreground mb-3">
                                            <span className="flex items-center gap-1">
                                                <MapPin className="h-4 w-4" />
                                                {job.location}
                                            </span>
                                            <span className="flex items-center gap-1">
                                                <DollarSign className="h-4 w-4" />
                                                {formatSalary(job.salaryMin, job.salaryMax)}
                                            </span>
                                            <span className="flex items-center gap-1">
                                                <Clock className="h-4 w-4" />
                                                Posted {formatDistanceToNow(new Date(job.createdAt), { addSuffix: true })}
                                            </span>
                                        </div>

                                        <div className="flex flex-wrap gap-6 text-sm">
                                            <div className="flex items-center gap-2">
                                                <Users className="h-4 w-4 text-blue-500" />
                                                <span className="font-medium">{job.applicationCount || 0}</span>
                                                <span className="text-muted-foreground">applications</span>
                                            </div>
                                            <div className="flex items-center gap-2">
                                                <Eye className="h-4 w-4 text-purple-500" />
                                                <span className="font-medium">{0}</span>
                                                <span className="text-muted-foreground">views</span>
                                            </div>
                                            <div className="flex items-center gap-2">
                                                <Calendar className="h-4 w-4 text-gray-500" />
                                                <span className="text-muted-foreground">
                                                    Created {new Date(job.createdAt).toLocaleDateString()}
                                                </span>
                                            </div>
                                        </div>
                                    </div>

                                    {/* Actions */}
                                    <div className="flex flex-row lg:flex-col gap-2">
                                        <Link href={`/dashboard/applications?job=${job.id}`} className="flex-1 lg:flex-none">
                                            <Button variant="outline" size="sm" className="w-full">
                                                <Users className="h-4 w-4 mr-2" />
                                                Applications
                                            </Button>
                                        </Link>
                                        <Link href={`/jobs/${job.id}/edit`} className="flex-1 lg:flex-none">
                                            <Button variant="outline" size="sm" className="w-full">
                                                <Edit className="h-4 w-4 mr-2" />
                                                Edit
                                            </Button>
                                        </Link>
                                    </div>
                                </div>
                            </CardContent>
                        </Card>
                    ))
                )}
            </div>
        </div>
    )
}
