"use client"

import { useState } from "react"
import Link from "next/link"
import { ArrowRight, ArrowUpDown, Download, FileText, Filter, Search, SortAsc, SortDesc } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

// Mock data for resolutions
const mockResolutions = [
  {
    id: 12,
    title: "Education and Community Health Improvements",
    description: "A comprehensive set of recommendations for improving education access and community health services",
    date: "2024-02-15",
    contributions: 8,
    categories: ["Education", "Healthcare"],
    status: "active",
  },
  {
    id: 11,
    title: "Environmental Protection and Green Spaces",
    description: "Recommendations for preserving and expanding green spaces and environmental protections",
    date: "2024-01-10",
    contributions: 6,
    categories: ["Environmental Policy"],
    status: "active",
  },
  {
    id: 10,
    title: "Public Transportation and Infrastructure",
    description: "Proposals for improving public transportation access and infrastructure maintenance",
    date: "2023-12-05",
    contributions: 7,
    categories: ["Infrastructure"],
    status: "archived",
  },
]

// Add state for search, filter, and sort
export default function ResolutionsPage() {
  const [searchQuery, setSearchQuery] = useState("")
  const [categoryFilter, setCategoryFilter] = useState("all")
  const [statusFilter, setStatusFilter] = useState("all")
  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc")
  const [sortBy, setSortBy] = useState<"contributions" | "date">("date")

  // Filter and sort the resolutions
  const filteredResolutions = mockResolutions.filter((resolution) => {
    // Filter by search query
    if (
      searchQuery &&
      !resolution.title.toLowerCase().includes(searchQuery.toLowerCase()) &&
      !resolution.description.toLowerCase().includes(searchQuery.toLowerCase())
    )
      return false

    // Filter by category
    if (categoryFilter !== "all" && !resolution.categories.includes(categoryFilter)) return false

    // Filter by status
    if (statusFilter !== "all" && resolution.status !== statusFilter) return false

    return true
  })

  // Sort the filtered resolutions
  const sortedResolutions = [...filteredResolutions].sort((a, b) => {
    if (sortBy === "contributions") {
      return sortOrder === "desc" ? b.contributions - a.contributions : a.contributions - b.contributions
    } else {
      const dateA = new Date(a.date).getTime()
      const dateB = new Date(b.date).getTime()
      return sortOrder === "desc" ? dateB - dateA : dateA - dateB
    }
  })

  // Group resolutions by status
  const activeResolutions = sortedResolutions.filter((r) => r.status === "active")
  const archivedResolutions = sortedResolutions.filter((r) => r.status === "archived")

  // Add the search, filter, and sort UI
  return (
    <div className="container mx-auto px-4 py-8">
      <div className="mb-8">
        <h1 className="text-3xl font-bold">Resolutions</h1>
        <p className="mt-2 text-muted-foreground">
          Final policy recommendations compiled from validated community contributions.
        </p>
      </div>

      {/* Filters and Search */}
      <div className="mb-6 flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
        <div className="relative w-full md:w-72">
          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
          <Input
            placeholder="Search resolutions..."
            className="pl-8"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
          />
        </div>
        <div className="flex flex-col gap-4 sm:flex-row">
          <Select value={categoryFilter} onValueChange={setCategoryFilter}>
            <SelectTrigger className="w-full sm:w-[180px]">
              <Filter className="mr-2 h-4 w-4" />
              <SelectValue placeholder="Filter by category" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Categories</SelectItem>
              <SelectItem value="Education">Education</SelectItem>
              <SelectItem value="Healthcare">Healthcare</SelectItem>
              <SelectItem value="Environmental Policy">Environmental</SelectItem>
              <SelectItem value="Infrastructure">Infrastructure</SelectItem>
            </SelectContent>
          </Select>
          <Select value={statusFilter} onValueChange={setStatusFilter}>
            <SelectTrigger className="w-full sm:w-[180px]">
              <SelectValue placeholder="Filter by status" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Statuses</SelectItem>
              <SelectItem value="active">Active</SelectItem>
              <SelectItem value="archived">Archived</SelectItem>
            </SelectContent>
          </Select>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="outline" className="flex items-center gap-2">
                <ArrowUpDown className="h-4 w-4" />
                Sort by {sortBy === "contributions" ? "Contributions" : "Date"}
                {sortOrder === "desc" ? <SortDesc className="ml-1 h-4 w-4" /> : <SortAsc className="ml-1 h-4 w-4" />}
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuLabel>Sort by</DropdownMenuLabel>
              <DropdownMenuSeparator />
              <DropdownMenuItem onClick={() => setSortBy("contributions")}>
                Contributions {sortBy === "contributions" && "✓"}
              </DropdownMenuItem>
              <DropdownMenuItem onClick={() => setSortBy("date")}>Date {sortBy === "date" && "✓"}</DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem onClick={() => setSortOrder(sortOrder === "desc" ? "asc" : "desc")}>
                {sortOrder === "desc" ? "Ascending" : "Descending"}
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </div>

      {filteredResolutions.length === 0 ? (
        <div className="mt-12 text-center">
          <p className="text-lg font-medium">No resolutions match your filters</p>
          <p className="mt-2 text-muted-foreground">Try adjusting your search or filters</p>
          <Button
            variant="outline"
            className="mt-4"
            onClick={() => {
              setSearchQuery("")
              setCategoryFilter("all")
              setStatusFilter("all")
            }}
          >
            Clear All Filters
          </Button>
        </div>
      ) : (
        <>
          {statusFilter !== "archived" && activeResolutions.length > 0 && (
            <>
              <div className="mb-8">
                <h2 className="text-xl font-semibold">Active Resolutions</h2>
                <p className="text-sm text-muted-foreground">
                  Current resolutions available for policymakers and the public
                </p>
              </div>

              <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
                {activeResolutions.map((resolution) => (
                  <Card key={resolution.id}>
                    <CardHeader>
                      <div className="flex items-start justify-between">
                        <div>
                          <CardTitle className="flex items-center gap-2">
                            <FileText className="h-5 w-5 text-primary" />
                            Resolution #{resolution.id}
                          </CardTitle>
                          <CardDescription className="mt-1">{resolution.title}</CardDescription>
                        </div>
                        <Badge>Active</Badge>
                      </div>
                    </CardHeader>
                    <CardContent>
                      <p className="text-sm text-muted-foreground">{resolution.description}</p>

                      <div className="mt-4 grid grid-cols-2 gap-4 text-sm">
                        <div>
                          <p className="font-medium">Published</p>
                          <p className="text-muted-foreground">{new Date(resolution.date).toLocaleDateString()}</p>
                        </div>
                        <div>
                          <p className="font-medium">Contributions</p>
                          <p className="text-muted-foreground">{resolution.contributions} included</p>
                        </div>
                      </div>

                      <div className="mt-4">
                        <p className="text-sm font-medium">Categories</p>
                        <div className="mt-2 flex flex-wrap gap-2">
                          {resolution.categories.map((category) => (
                            <Badge key={category} variant="outline">
                              {category}
                            </Badge>
                          ))}
                        </div>
                      </div>
                    </CardContent>
                    <CardFooter className="flex flex-col gap-4 sm:flex-row">
                      <Button variant="outline" className="w-full sm:w-auto" asChild>
                        <Link href={`/resolutions/${resolution.id}`}>
                          View Details
                          <ArrowRight className="ml-2 h-4 w-4" />
                        </Link>
                      </Button>
                      <Button className="w-full sm:w-auto">
                        <Download className="mr-2 h-4 w-4" />
                        Download PDF
                      </Button>
                    </CardFooter>
                  </Card>
                ))}
              </div>
            </>
          )}

          {statusFilter !== "active" && archivedResolutions.length > 0 && (
            <>
              <Separator className="my-8" />

              <div className="mb-8">
                <h2 className="text-xl font-semibold">Archive</h2>
                <p className="text-sm text-muted-foreground">
                  Past resolutions that have been delivered to policymakers
                </p>
              </div>

              <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
                {archivedResolutions.map((resolution) => (
                  <Card key={resolution.id} className="opacity-80">
                    <CardHeader>
                      <div className="flex items-start justify-between">
                        <div>
                          <CardTitle className="flex items-center gap-2">
                            <FileText className="h-5 w-5" />
                            Resolution #{resolution.id}
                          </CardTitle>
                          <CardDescription className="mt-1">{resolution.title}</CardDescription>
                        </div>
                        <Badge variant="outline">Archived</Badge>
                      </div>
                    </CardHeader>
                    <CardContent>
                      <p className="text-sm text-muted-foreground">{resolution.description}</p>

                      <div className="mt-4 grid grid-cols-2 gap-4 text-sm">
                        <div>
                          <p className="font-medium">Published</p>
                          <p className="text-muted-foreground">{new Date(resolution.date).toLocaleDateString()}</p>
                        </div>
                        <div>
                          <p className="font-medium">Contributions</p>
                          <p className="text-muted-foreground">{resolution.contributions} included</p>
                        </div>
                      </div>
                    </CardContent>
                    <CardFooter className="flex flex-col gap-4 sm:flex-row">
                      <Button variant="outline" className="w-full sm:w-auto" asChild>
                        <Link href={`/resolutions/${resolution.id}`}>
                          View Details
                          <ArrowRight className="ml-2 h-4 w-4" />
                        </Link>
                      </Button>
                      <Button variant="secondary" className="w-full sm:w-auto">
                        <Download className="mr-2 h-4 w-4" />
                        Download PDF
                      </Button>
                    </CardFooter>
                  </Card>
                ))}
              </div>
            </>
          )}
        </>
      )}
    </div>
  )
}