"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Search, Eye, Mail, Phone, MapPin, Briefcase } from "lucide-react"
import { mockCandidates } from "@/lib/mock-data"

export default function AdminCandidatesPage() {
  const [searchTerm, setSearchTerm] = useState("")
  const [selectedCandidate, setSelectedCandidate] = useState<any>(null)

  const filteredCandidates = mockCandidates.filter(
    (candidate) =>
      candidate.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      candidate.email.toLowerCase().includes(searchTerm.toLowerCase()),
  )

  return (
    <div className="space-y-8">
      {/* Header */}
      <div>
        <h1 className="text-3xl font-bold text-foreground">Gestão de Candidatos</h1>
        <p className="text-muted-foreground mt-1">Visualize e gerencie todos os candidatos cadastrados</p>
      </div>

      {/* Stats */}
      <div className="grid gap-4 md:grid-cols-4">
        <Card>
          <CardHeader className="pb-3">
            <CardDescription>Total de Candidatos</CardDescription>
            <CardTitle className="text-3xl">{mockCandidates.length}</CardTitle>
          </CardHeader>
        </Card>
        <Card>
          <CardHeader className="pb-3">
            <CardDescription>Novos (30 dias)</CardDescription>
            <CardTitle className="text-3xl">24</CardTitle>
          </CardHeader>
        </Card>
        <Card>
          <CardHeader className="pb-3">
            <CardDescription>Candidaturas Ativas</CardDescription>
            <CardTitle className="text-3xl">{"49"}</CardTitle>
          </CardHeader>
        </Card>
        <Card>
          <CardHeader className="pb-3">
            <CardDescription>Taxa de Contratação</CardDescription>
            <CardTitle className="text-3xl">8%</CardTitle>
          </CardHeader>
        </Card>
      </div>

      {/* Search and Table */}
      <Card>
        <CardHeader>
          <div className="flex items-center 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="Buscar candidatos por nome ou email..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="pl-10"
              />
            </div>
          </div>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Candidato</TableHead>
                <TableHead>Email</TableHead>
                <TableHead>Telefone</TableHead>
                <TableHead>Localização</TableHead>
                <TableHead>Candidaturas</TableHead>
                <TableHead className="text-right">Ações</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filteredCandidates.map((candidate) => (
                <TableRow key={candidate.id}>
                  <TableCell>
                    <div className="flex items-center gap-3">

                      <div>
                        <div className="font-medium">{candidate.name}</div>
                        <div className="text-sm text-muted-foreground">{candidate.title}</div>
                      </div>
                    </div>
                  </TableCell>
                  <TableCell>{candidate.email}</TableCell>
                  <TableCell>{candidate.phone}</TableCell>
                  <TableCell>{candidate.location}</TableCell>
                  <TableCell>
                    <Badge variant="secondary">{candidate.applications.length}</Badge>
                  </TableCell>
                  <TableCell className="text-right">
                    <Dialog>
                      <DialogTrigger asChild>
                        <Button variant="ghost" size="icon" onClick={() => setSelectedCandidate(candidate)}>
                          <Eye className="h-4 w-4" />
                        </Button>
                      </DialogTrigger>
                      <DialogContent className="max-w-2xl">
                        <DialogHeader>
                          <DialogTitle>Perfil do Candidato</DialogTitle>
                          <DialogDescription>Informações detalhadas sobre {candidate.name}</DialogDescription>
                        </DialogHeader>
                        {selectedCandidate && (
                          <div className="space-y-6">
                            <div className="flex items-start gap-4">
                              <Avatar className="h-20 w-20">
                                <AvatarImage src={selectedCandidate.avatar || "/placeholder.svg"} />
                                <AvatarFallback>
                                  {selectedCandidate.name
                                    .split(" ")
                                    .map((n: string) => n[0])
                                    .join("")}
                                </AvatarFallback>
                              </Avatar>
                              <div className="flex-1">
                                <h3 className="text-xl font-semibold">{selectedCandidate.name}</h3>
                                <p className="text-muted-foreground">{selectedCandidate.title}</p>
                                <div className="flex flex-wrap gap-2 mt-3">
                                  {selectedCandidate.skills.map((skill: string) => (
                                    <Badge key={skill} variant="secondary">
                                      {skill}
                                    </Badge>
                                  ))}
                                </div>
                              </div>
                            </div>

                            <div className="grid gap-4">
                              <div className="flex items-center gap-2 text-sm">
                                <Mail className="h-4 w-4 text-muted-foreground" />
                                <span>{selectedCandidate.email}</span>
                              </div>
                              <div className="flex items-center gap-2 text-sm">
                                <Phone className="h-4 w-4 text-muted-foreground" />
                                <span>{selectedCandidate.phone}</span>
                              </div>
                              <div className="flex items-center gap-2 text-sm">
                                <MapPin className="h-4 w-4 text-muted-foreground" />
                                <span>{selectedCandidate.location}</span>
                              </div>
                              <div className="flex items-center gap-2 text-sm">
                                <Briefcase className="h-4 w-4 text-muted-foreground" />
                                <span>{selectedCandidate.experience}</span>
                              </div>
                            </div>

                            <div>
                              <h4 className="font-semibold mb-2">Sobre</h4>
                              <p className="text-sm text-muted-foreground">{selectedCandidate.bio}</p>
                            </div>

                            <div>
                              <h4 className="font-semibold mb-2">Candidaturas Recentes</h4>
                              <div className="space-y-2">
                                {selectedCandidate.applications.map((app: any) => (
                                  <div
                                    key={app.id}
                                    className="flex items-center justify-between p-3 border rounded-lg"
                                  >
                                    <div>
                                      <div className="font-medium text-sm">{app.jobTitle}</div>
                                      <div className="text-xs text-muted-foreground">{app.company}</div>
                                    </div>
                                    <Badge
                                      variant={
                                        app.status === "accepted"
                                          ? "default"
                                          : app.status === "rejected"
                                            ? "destructive"
                                            : "secondary"
                                      }
                                    >
                                      {app.status === "pending" && "Pendente"}
                                      {app.status === "accepted" && "Aceito"}
                                      {app.status === "rejected" && "Rejeitado"}
                                    </Badge>
                                  </div>
                                ))}
                              </div>
                            </div>
                          </div>
                        )}
                      </DialogContent>
                    </Dialog>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  )
}
