"use client"

import { useState } from "react"
import { mockNotifications } from "@/lib/mock-data"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { 
  Bell, 
  CheckCircle2, 
  AlertCircle,
  Info,
  User,
  FileText,
  Calendar,
  Clock,
  Trash2,
  Check,
  MoreVertical,
  Settings,
  Filter
} from "lucide-react"
import { cn } from "@/lib/utils"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"

export function NotificationsPage() {
  const [notifications, setNotifications] = useState(mockNotifications)
  const [filter, setFilter] = useState<string>("all")

  const unreadCount = notifications.filter(n => !n.read).length

  const filteredNotifications = notifications.filter(notification => {
    if (filter === "all") return true
    if (filter === "unread") return !notification.read
    return notification.type === filter
  })

  const markAsRead = (id: string) => {
    setNotifications(prev => prev.map(n => 
      n.id === id ? { ...n, read: true } : n
    ))
  }

  const markAllAsRead = () => {
    setNotifications(prev => prev.map(n => ({ ...n, read: true })))
  }

  const deleteNotification = (id: string) => {
    setNotifications(prev => prev.filter(n => n.id !== id))
  }

  const getNotificationIcon = (type: string) => {
    switch (type) {
      case "requisition":
        return <FileText className="h-5 w-5" />
      case "approval":
        return <CheckCircle2 className="h-5 w-5" />
      case "candidate":
        return <User className="h-5 w-5" />
      case "interview":
        return <Calendar className="h-5 w-5" />
      case "reminder":
        return <Clock className="h-5 w-5" />
      case "alert":
        return <AlertCircle className="h-5 w-5" />
      default:
        return <Info className="h-5 w-5" />
    }
  }

  const getNotificationColor = (type: string, priority: string) => {
    if (priority === "high") return "bg-destructive/10 text-destructive border-destructive/20"
    switch (type) {
      case "requisition":
        return "bg-primary/10 text-primary border-primary/20"
      case "approval":
        return "bg-accent/10 text-accent border-accent/20"
      case "candidate":
        return "bg-blue-500/10 text-blue-500 border-blue-500/20"
      case "interview":
        return "bg-purple-500/10 text-purple-500 border-purple-500/20"
      case "reminder":
        return "bg-yellow-500/10 text-yellow-500 border-yellow-500/20"
      default:
        return "bg-muted text-muted-foreground border-muted"
    }
  }

  const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    const now = new Date()
    const diff = now.getTime() - date.getTime()
    const hours = Math.floor(diff / (1000 * 60 * 60))
    const days = Math.floor(hours / 24)

    if (hours < 1) return "Hace menos de 1 hora"
    if (hours < 24) return `Hace ${hours} hora${hours > 1 ? "s" : ""}`
    if (days < 7) return `Hace ${days} dia${days > 1 ? "s" : ""}`
    return date.toLocaleDateString("es-MX", { day: "numeric", month: "short" })
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Notificaciones</h1>
          <p className="text-muted-foreground">
            Tienes {unreadCount} notificaciones sin leer
          </p>
        </div>
        <div className="flex items-center gap-2">
          <Button variant="outline" onClick={markAllAsRead} disabled={unreadCount === 0}>
            <Check className="mr-2 h-4 w-4" />
            Marcar todas como leidas
          </Button>
          <Button variant="outline" size="icon">
            <Settings className="h-4 w-4" />
          </Button>
        </div>
      </div>

      {/* Stats */}
      <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
        <Card 
          className={cn("cursor-pointer transition-colors", filter === "all" && "ring-2 ring-primary")}
          onClick={() => setFilter("all")}
        >
          <CardContent className="p-4">
            <div className="flex items-center gap-3">
              <Bell className="h-5 w-5 text-muted-foreground" />
              <div>
                <div className="text-2xl font-bold">{notifications.length}</div>
                <div className="text-xs text-muted-foreground">Todas</div>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card 
          className={cn("cursor-pointer transition-colors", filter === "unread" && "ring-2 ring-primary")}
          onClick={() => setFilter("unread")}
        >
          <CardContent className="p-4">
            <div className="flex items-center gap-3">
              <Badge className="h-5 w-5 flex items-center justify-center p-0 bg-destructive">
                {unreadCount}
              </Badge>
              <div>
                <div className="text-2xl font-bold">{unreadCount}</div>
                <div className="text-xs text-muted-foreground">Sin leer</div>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card 
          className={cn("cursor-pointer transition-colors", filter === "approval" && "ring-2 ring-primary")}
          onClick={() => setFilter("approval")}
        >
          <CardContent className="p-4">
            <div className="flex items-center gap-3">
              <CheckCircle2 className="h-5 w-5 text-accent" />
              <div>
                <div className="text-2xl font-bold">
                  {notifications.filter(n => n.type === "approval").length}
                </div>
                <div className="text-xs text-muted-foreground">Aprobaciones</div>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card 
          className={cn("cursor-pointer transition-colors", filter === "interview" && "ring-2 ring-primary")}
          onClick={() => setFilter("interview")}
        >
          <CardContent className="p-4">
            <div className="flex items-center gap-3">
              <Calendar className="h-5 w-5 text-purple-500" />
              <div>
                <div className="text-2xl font-bold">
                  {notifications.filter(n => n.type === "interview").length}
                </div>
                <div className="text-xs text-muted-foreground">Entrevistas</div>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card 
          className={cn("cursor-pointer transition-colors", filter === "candidate" && "ring-2 ring-primary")}
          onClick={() => setFilter("candidate")}
        >
          <CardContent className="p-4">
            <div className="flex items-center gap-3">
              <User className="h-5 w-5 text-blue-500" />
              <div>
                <div className="text-2xl font-bold">
                  {notifications.filter(n => n.type === "candidate").length}
                </div>
                <div className="text-xs text-muted-foreground">Candidatos</div>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Notifications List */}
      <Card>
        <CardHeader className="pb-3">
          <div className="flex items-center justify-between">
            <CardTitle className="text-base">
              {filter === "all" ? "Todas las notificaciones" :
               filter === "unread" ? "Notificaciones sin leer" :
               `Notificaciones de ${filter}`}
            </CardTitle>
            <Badge variant="secondary">{filteredNotifications.length}</Badge>
          </div>
        </CardHeader>
        <CardContent className="p-0">
          {filteredNotifications.length > 0 ? (
            <div className="divide-y">
              {filteredNotifications.map(notification => (
                <div 
                  key={notification.id}
                  className={cn(
                    "flex items-start gap-4 p-4 hover:bg-muted/50 transition-colors cursor-pointer",
                    !notification.read && "bg-primary/5"
                  )}
                  onClick={() => markAsRead(notification.id)}
                >
                  <div className={cn(
                    "w-10 h-10 rounded-full flex items-center justify-center border",
                    getNotificationColor(notification.type, notification.priority)
                  )}>
                    {getNotificationIcon(notification.type)}
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-start justify-between gap-2">
                      <div>
                        <h4 className={cn(
                          "text-sm",
                          !notification.read && "font-semibold"
                        )}>
                          {notification.title}
                        </h4>
                        <p className="text-sm text-muted-foreground mt-1">
                          {notification.message}
                        </p>
                      </div>
                      <div className="flex items-center gap-2 flex-shrink-0">
                        {!notification.read && (
                          <div className="w-2 h-2 rounded-full bg-primary" />
                        )}
                        {notification.priority === "high" && (
                          <Badge variant="destructive" className="text-xs">Urgente</Badge>
                        )}
                      </div>
                    </div>
                    <div className="flex items-center gap-4 mt-2">
                      <span className="text-xs text-muted-foreground">
                        {formatDate(notification.createdAt)}
                      </span>
                      {notification.actionUrl && (
                        <Button variant="link" size="sm" className="h-auto p-0 text-xs">
                          Ver detalle
                        </Button>
                      )}
                    </div>
                  </div>
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
                      <Button variant="ghost" size="icon" className="flex-shrink-0">
                        <MoreVertical className="h-4 w-4" />
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                      <DropdownMenuItem onClick={(e) => {
                        e.stopPropagation()
                        markAsRead(notification.id)
                      }}>
                        <Check className="mr-2 h-4 w-4" />
                        Marcar como leida
                      </DropdownMenuItem>
                      <DropdownMenuItem 
                        onClick={(e) => {
                          e.stopPropagation()
                          deleteNotification(notification.id)
                        }}
                        className="text-destructive"
                      >
                        <Trash2 className="mr-2 h-4 w-4" />
                        Eliminar
                      </DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                </div>
              ))}
            </div>
          ) : (
            <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
              <Bell className="h-12 w-12 mb-4 opacity-50" />
              <p>No hay notificaciones</p>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}