"use client";

import { useState } from "react";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Megaphone,
  Filter,
  Plus,
  Edit,
  Eye,
  EyeOff,
  Trash2,
  ChevronLeft,
  ChevronRight,
} from "lucide-react";
import {
  useAnnouncements,
  useDeleteAnnouncement,
  useToggleAnnouncementStatus,
} from "@/hooks";
import {
  AnnouncementType,
  AnnouncementPriority,
  AnnouncementAudience,
} from "@/types/api";

export default function AnnouncementsPage() {
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [statusFilter, setStatusFilter] = useState("");
  const [typeFilter, setTypeFilter] = useState("");
  const [priorityFilter, setPriorityFilter] = useState("");
  const [audienceFilter, setAudienceFilter] = useState("");

  // Fetch announcements with filters
  const { data: announcements, isLoading: announcementsLoading } =
    useAnnouncements({
      page: currentPage,
      limit: pageSize,
      status: statusFilter && statusFilter !== "all" ? statusFilter : undefined,
      type: typeFilter && typeFilter !== "all" ? typeFilter : undefined,
      priority:
        priorityFilter && priorityFilter !== "all" ? priorityFilter : undefined,
    });

  // Announcement mutations
  const deleteAnnouncementMutation = useDeleteAnnouncement();
  const toggleAnnouncementStatusMutation = useToggleAnnouncementStatus();

  const getAnnouncementTypeColor = (type: string) => {
    switch (type) {
      case AnnouncementType.info:
        return "bg-blue-100 text-blue-800 capitalize";
      case AnnouncementType.warning:
        return "bg-yellow-100 text-yellow-800 capitalize";
      case AnnouncementType.error:
        return "bg-red-100 text-red-800 capitalize";
      case AnnouncementType.success:
        return "bg-green-100 text-green-800 capitalize";
      default:
        return "bg-gray-100 text-gray-800 capitalize";
    }
  };

  const getPriorityColor = (priority: string) => {
    switch (priority) {
      case AnnouncementPriority.urgent:
        return "bg-red-100 text-red-800 capitalize";
      case AnnouncementPriority.high:
        return "bg-orange-100 text-orange-800 capitalize";
      case AnnouncementPriority.normal:
        return "bg-blue-100 text-blue-800 capitalize";
      case AnnouncementPriority.low:
        return "bg-gray-100 text-gray-800 capitalize";
      default:
        return "bg-gray-100 text-gray-800 capitalize";
    }
  };

  // Announcement action handlers
  const handleToggleAnnouncementStatus = async (announcementId: string) => {
    try {
      await toggleAnnouncementStatusMutation.mutateAsync(announcementId);
    } catch (error) {
      console.error("Failed to toggle announcement status:", error);
    }
  };

  const handleDeleteAnnouncement = async (announcementId: string) => {
    if (
      confirm(
        "Are you sure you want to delete this announcement? This action cannot be undone."
      )
    ) {
      try {
        await deleteAnnouncementMutation.mutateAsync(announcementId);
      } catch (error) {
        console.error("Failed to delete announcement:", error);
      }
    }
  };

  const handleFilterChange = (filterType: string, value: string) => {
    switch (filterType) {
      case "status":
        setStatusFilter(value);
        break;
      case "type":
        setTypeFilter(value);
        break;
      case "priority":
        setPriorityFilter(value);
        break;
      case "audience":
        setAudienceFilter(value);
        break;
    }
    setCurrentPage(1);
  };

  const totalPages = Math.ceil((announcements?.total || 0) / pageSize);

  return (
    <div className="flex-1 space-y-6 p-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">
            System Announcements
          </h1>
          <p className="text-muted-foreground">
            Manage platform-wide announcements and notifications
          </p>
        </div>
        <Button>
          <Plus className="h-4 w-4 mr-2" />
          Create Announcement
        </Button>
      </div>

      {/* Filters */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center">
            <Filter className="h-5 w-5 mr-2" />
            Filters
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            {/* Status Filter */}
            <div className="space-y-2">
              <Label htmlFor="status">Status</Label>
              <Select
                value={statusFilter}
                onValueChange={(value) => handleFilterChange("status", value)}
              >
                <SelectTrigger>
                  <SelectValue placeholder="All statuses" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All statuses</SelectItem>
                  <SelectItem value="active">Active</SelectItem>
                  <SelectItem value="inactive">Inactive</SelectItem>
                </SelectContent>
              </Select>
            </div>

            {/* Type Filter */}
            <div className="space-y-2">
              <Label htmlFor="type">Type</Label>
              <Select
                value={typeFilter}
                onValueChange={(value) => handleFilterChange("type", value)}
              >
                <SelectTrigger>
                  <SelectValue placeholder="All types" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All types</SelectItem>
                  <SelectItem value={AnnouncementType.info}>Info</SelectItem>
                  <SelectItem value={AnnouncementType.warning}>
                    Warning
                  </SelectItem>
                  <SelectItem value={AnnouncementType.error}>Error</SelectItem>
                  <SelectItem value={AnnouncementType.success}>
                    Success
                  </SelectItem>
                </SelectContent>
              </Select>
            </div>

            {/* Priority Filter */}
            <div className="space-y-2">
              <Label htmlFor="priority">Priority</Label>
              <Select
                value={priorityFilter}
                onValueChange={(value) => handleFilterChange("priority", value)}
              >
                <SelectTrigger>
                  <SelectValue placeholder="All priorities" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All priorities</SelectItem>
                  <SelectItem value={AnnouncementPriority.low}>Low</SelectItem>
                  <SelectItem value={AnnouncementPriority.normal}>
                    Normal
                  </SelectItem>
                  <SelectItem value={AnnouncementPriority.high}>
                    High
                  </SelectItem>
                  <SelectItem value={AnnouncementPriority.urgent}>
                    Urgent
                  </SelectItem>
                </SelectContent>
              </Select>
            </div>

            {/* Audience Filter */}
            <div className="space-y-2">
              <Label htmlFor="audience">Audience</Label>
              <Select
                value={audienceFilter}
                onValueChange={(value) => handleFilterChange("audience", value)}
              >
                <SelectTrigger>
                  <SelectValue placeholder="All audiences" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All audiences</SelectItem>
                  <SelectItem value={AnnouncementAudience.all}>All</SelectItem>
                  <SelectItem value={AnnouncementAudience.users}>
                    Users
                  </SelectItem>
                  <SelectItem value={AnnouncementAudience.moderators}>
                    Moderators
                  </SelectItem>
                  <SelectItem value={AnnouncementAudience.admins}>
                    Admins
                  </SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Announcements List */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center">
            <Megaphone className="h-5 w-5 mr-2" />
            Announcements ({announcements?.total || 0})
          </CardTitle>
          <CardDescription>
            Showing {announcements?.announcements?.length || 0} of{" "}
            {announcements?.total || 0} announcements
          </CardDescription>
        </CardHeader>
        <CardContent>
          {announcementsLoading ? (
            <div className="space-y-3">
              {[...Array(5)].map((_, i) => (
                <div key={i} className="p-4 border rounded-lg animate-pulse">
                  <div className="space-y-2">
                    <div className="h-5 bg-gray-200 rounded w-1/2"></div>
                    <div className="h-4 bg-gray-200 rounded w-3/4"></div>
                    <div className="flex space-x-2">
                      <div className="h-6 w-20 bg-gray-200 rounded"></div>
                      <div className="h-6 w-16 bg-gray-200 rounded"></div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <div className="space-y-3">
              {announcements?.announcements?.map((announcement) => (
                <div key={announcement._id} className="p-4 border rounded-lg">
                  <div className="flex items-start justify-between">
                    <div className="space-y-2 flex-1">
                      <div className="flex items-center space-x-2">
                        <h4 className="font-medium">{announcement.title}</h4>
                        <Badge
                          className={`${getAnnouncementTypeColor(
                            announcement.type
                          )}`}
                        >
                          {announcement.type}
                        </Badge>
                        <Badge
                          className={`${getPriorityColor(
                            announcement.priority
                          )}`}
                        >
                          {announcement.priority}
                        </Badge>
                        <Badge
                          variant={
                            announcement.isActive ? "default" : "secondary"
                          }
                        >
                          {announcement.isActive ? "Active" : "Inactive"}
                        </Badge>
                        <Badge variant="outline" className="capitalize">
                          {announcement.targetAudience}
                        </Badge>
                      </div>
                      <p className="text-sm text-muted-foreground">
                        {announcement.message}
                      </p>
                      <p className="text-xs text-muted-foreground">
                        Created:{" "}
                        {new Date(announcement.createdAt).toLocaleDateString()}
                      </p>
                    </div>
                    <div className="flex space-x-2">
                      <Button
                        variant="outline"
                        size="sm"
                        title="Edit Announcement"
                      >
                        <Edit className="h-4 w-4" />
                      </Button>
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() =>
                          handleToggleAnnouncementStatus(announcement._id)
                        }
                        disabled={toggleAnnouncementStatusMutation.isPending}
                        title={
                          announcement.isActive ? "Deactivate" : "Activate"
                        }
                      >
                        {announcement.isActive ? (
                          <EyeOff className="h-4 w-4" />
                        ) : (
                          <Eye className="h-4 w-4" />
                        )}
                      </Button>
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() =>
                          handleDeleteAnnouncement(announcement._id)
                        }
                        disabled={deleteAnnouncementMutation.isPending}
                        title="Delete Announcement"
                      >
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </CardContent>
      </Card>

      {/* Pagination */}
      {totalPages > 1 && (
        <Card>
          <CardContent className="pt-6">
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-2">
                <Label htmlFor="pageSize">Items per page:</Label>
                <Select
                  value={pageSize.toString()}
                  onValueChange={(value) => {
                    setPageSize(parseInt(value));
                    setCurrentPage(1);
                  }}
                >
                  <SelectTrigger className="w-20">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="5">5</SelectItem>
                    <SelectItem value="10">10</SelectItem>
                    <SelectItem value="20">20</SelectItem>
                    <SelectItem value="50">50</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="flex items-center space-x-2">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => setCurrentPage(currentPage - 1)}
                  disabled={currentPage === 1}
                >
                  <ChevronLeft className="h-4 w-4" />
                  Previous
                </Button>
                <span className="text-sm text-muted-foreground">
                  Page {currentPage} of {totalPages}
                </span>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => setCurrentPage(currentPage + 1)}
                  disabled={currentPage === totalPages}
                >
                  Next
                  <ChevronRight className="h-4 w-4" />
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  );
}