"use client"

import { useState, useMemo, useEffect, useCallback } from "react"
import Image from "next/image"
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Checkbox } from "@/components/ui/checkbox"
import { PublicInset, PublicSurface } from "@/components/public-surface"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import {
  Download,
  Search,
  Filter,
  X,
  Coffee,
  Utensils,
  Package,
  Droplet,
  Eye,
  ShoppingCart,
  LayoutGrid,
  List,
  ExternalLink,
  Loader2,
  AlertCircle,
} from "lucide-react"
import type { Manual, ManualGroup } from "@/lib/manuals-types"
import { getManualUrl, getThumbnailUrl } from "@/lib/manuals-types"
import {
  getMachineTypeInfo,
  getAllMachineTypeNames,
} from "@/lib/manuals-config"
import { ManualViewer } from "@/components/manual-viewer"
import { getManualsWithParts } from "@/lib/parts-lookup"
import type { CachedEbayListing, EbayCacheState } from "@/lib/ebay-parts-match"

interface ProductSuggestionsResponse {
  query: string
  results: CachedEbayListing[]
  cache: EbayCacheState
  error?: string
}

interface ProductSuggestionsProps {
  manual: Manual
  className?: string
}

function ProductSuggestions({
  manual,
  className = "",
}: ProductSuggestionsProps) {
  const [suggestions, setSuggestions] = useState<CachedEbayListing[]>([])
  const [cache, setCache] = useState<EbayCacheState | null>(null)
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    async function loadSuggestions() {
      setIsLoading(true)
      setError(null)

      try {
        const query = [
          manual.manufacturer,
          manual.category,
          manual.commonNames?.[0],
          manual.searchTerms?.[0],
          "vending machine",
        ]
          .filter(Boolean)
          .join(" ")

        const params = new URLSearchParams({
          keywords: query,
          maxResults: "6",
          sortOrder: "BestMatch",
        })

        const response = await fetch(`/api/ebay/search?${params.toString()}`)
        const body = (await response.json().catch(() => null)) as
          | ProductSuggestionsResponse
          | null

        if (!response.ok || !body) {
          throw new Error(
            body && typeof body.error === "string"
              ? body.error
              : `Failed to load cached listings (${response.status})`
          )
        }

        setSuggestions(Array.isArray(body.results) ? body.results : [])
        setCache(body.cache || null)
      } catch (err) {
        console.error("Error loading product suggestions:", err)
        setSuggestions([])
        setCache(null)
        setError(
          err instanceof Error ? err.message : "Could not load product suggestions"
        )
      } finally {
        setIsLoading(false)
      }
    }

    if (manual) {
      loadSuggestions()
    }
  }, [manual])

  if (isLoading) {
    return (
      <div
        className={`bg-white/60 dark:bg-yellow-900/20 rounded border border-yellow-300/30 dark:border-yellow-700/30 p-4 ${className}`}
      >
        <div className="flex items-center justify-center h-32">
          <Loader2 className="h-5 w-5 text-yellow-700 dark:text-yellow-300 animate-spin" />
        </div>
      </div>
    )
  }

  if (error) {
    return (
      <div
        className={`bg-white/60 dark:bg-yellow-900/20 rounded border border-yellow-300/30 dark:border-yellow-700/30 p-4 ${className}`}
      >
        <div className="flex flex-col items-center justify-center gap-2 h-32 text-center">
          <AlertCircle className="h-6 w-6 text-yellow-600" />
          <span className="text-sm text-yellow-700 dark:text-yellow-200">
            {error}
          </span>
          {cache?.lastSuccessfulAt ? (
            <span className="text-[11px] text-yellow-600/80 dark:text-yellow-200/70">
              Last refreshed {new Date(cache.lastSuccessfulAt).toLocaleString()}
            </span>
          ) : null}
        </div>
      </div>
    )
  }

  if (suggestions.length === 0) {
    return (
      <div
        className={`bg-white/60 dark:bg-yellow-900/20 rounded border border-yellow-300/30 dark:border-yellow-700/30 p-4 ${className}`}
      >
        <div className="flex flex-col items-center justify-center gap-2 h-32 text-center">
          <AlertCircle className="h-6 w-6 text-yellow-500" />
          <span className="text-sm text-yellow-700 dark:text-yellow-200">
            No cached eBay matches yet
          </span>
          <span className="text-[11px] text-yellow-600/80 dark:text-yellow-200/70">
            {cache?.isStale
              ? "The background poll is behind, so this manual is showing the last known cache."
              : "Try again after the next periodic cache refresh."}
          </span>
        </div>
      </div>
    )
  }

  return (
    <div
      className={`bg-white/60 dark:bg-yellow-900/20 rounded border border-yellow-300/30 dark:border-yellow-700/30 p-4 ${className}`}
    >
      <div className="flex items-center gap-2 mb-4">
        <ShoppingCart className="h-4 w-4 text-yellow-700 dark:text-yellow-300" />
        <h3 className="text-sm font-semibold text-yellow-900 dark:text-yellow-100">
          Related Products
        </h3>
      </div>
      {cache && (
        <div className="mb-3 text-[11px] text-yellow-700/80 dark:text-yellow-200/70">
          {cache.lastSuccessfulAt
            ? `Cache refreshed ${new Date(cache.lastSuccessfulAt).toLocaleString()}`
            : "Cache is warming up"}
          {cache.isStale ? " • stale cache" : ""}
        </div>
      )}

      <div className="grid grid-cols-2 gap-3">
        {suggestions.map((product) => (
          <a
            key={product.itemId}
            href={product.affiliateLink}
            target="_blank"
            rel="noopener noreferrer"
            className="block group"
          >
            <div className="bg-white dark:bg-yellow-900/30 rounded border border-yellow-300/40 dark:border-yellow-700/40 p-2 hover:bg-yellow-50 dark:hover:bg-yellow-900/40 transition-colors">
              {/* Image */}
              {product.imageUrl && (
                <div className="mb-2 rounded overflow-hidden bg-yellow-100 dark:bg-yellow-900/50">
                  <img
                    src={product.imageUrl}
                    alt={product.title}
                    className="w-full h-16 object-cover"
                    onError={(e) => {
                      e.currentTarget.src = `https://via.placeholder.com/120x80/fbbf24/1f2937?text=${encodeURIComponent(product.title)}`
                    }}
                  />
                </div>
              )}
              {!product.imageUrl && (
                <div className="mb-2 rounded overflow-hidden bg-yellow-100 dark:bg-yellow-900/50 h-16 flex items-center justify-center">
                  <span className="text-[10px] text-yellow-700 dark:text-yellow-300">
                    No Image
                  </span>
                </div>
              )}

              {/* Product Details */}
              <div className="space-y-1">
                <div className="text-[11px] text-yellow-900 dark:text-yellow-100 line-clamp-2 min-h-[1.5rem]">
                  {product.title}
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-xs font-semibold text-yellow-900 dark:text-yellow-100">
                    {product.price}
                  </span>
                  <ExternalLink className="h-3 w-3 text-yellow-700 dark:text-yellow-300 group-hover:text-yellow-900 dark:group-hover:text-yellow-100 transition-colors flex-shrink-0" />
                </div>
                {product.condition && (
                  <div className="text-[9px] text-yellow-700/80 dark:text-yellow-300/80">
                    {product.condition}
                  </div>
                )}
              </div>
            </div>
          </a>
        ))}
      </div>
    </div>
  )
}

interface ManualsPageClientProps {
  manuals: Manual[]
  groupedManuals: ManualGroup[]
  manufacturers: string[]
  categories: string[]
}

interface ManualCardProps {
  manual: Manual
  onView: (manual: { url: string; filename: string }) => void
  manualHasParts: (manual: Manual) => boolean
  getCategoryBadgeClass: (category: string) => string
  formatFileSize: (bytes?: number) => string
  showManufacturer?: boolean
}

function ManualCard({
  manual,
  onView,
  manualHasParts,
  getCategoryBadgeClass,
  formatFileSize,
  showManufacturer = false,
}: ManualCardProps) {
  const thumbnailUrl = getThumbnailUrl(manual)

  return (
    <Card className="overflow-hidden rounded-[1.75rem] border border-border/70 bg-background shadow-[0_18px_45px_rgba(15,23,42,0.08)] transition-all hover:-translate-y-0.5 hover:shadow-[0_24px_60px_rgba(15,23,42,0.12)]">
      {thumbnailUrl && (
        <div className="relative h-48 min-h-[192px] w-full overflow-hidden bg-[radial-gradient(circle_at_top_left,rgba(196,154,52,0.12),transparent_52%),linear-gradient(180deg,rgba(255,255,255,0.98),rgba(255,255,255,0.98))]">
          <Image
            src={thumbnailUrl}
            alt={manual.filename.replace(/\.pdf$/i, "")}
            fill
            className="object-contain"
            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
          />
        </div>
      )}
      <CardHeader className="px-5 pt-5">
        <CardTitle className="line-clamp-2 text-base leading-snug">
          {manual.filename.replace(/\.pdf$/i, "")}
        </CardTitle>
        {manual.commonNames && manual.commonNames.length > 0 && (
          <div className="mt-2 flex flex-wrap gap-2">
            {manual.commonNames.map((name, index) => (
              <Badge
                key={index}
                variant="secondary"
                className="rounded-full border border-primary/15 bg-primary/[0.06] px-2.5 py-0.5 text-[11px] font-medium text-foreground"
              >
                {name}
              </Badge>
            ))}
          </div>
        )}
        {manual.searchTerms &&
          manual.searchTerms.length > 0 &&
          !manual.commonNames && (
            <div className="mt-2 flex flex-wrap gap-2">
              {manual.searchTerms.map((term, index) => (
                <Badge
                  key={index}
                  variant="secondary"
                  className="rounded-full border border-border/60 bg-muted/35 px-2.5 py-0.5 text-[11px] font-medium text-muted-foreground"
                >
                  {term}
                </Badge>
              ))}
            </div>
          )}
      </CardHeader>
      <CardContent className="space-y-4 px-5 pb-5">
        <div className="flex flex-wrap gap-2">
          <Badge
            variant="outline"
            className={`rounded-full px-2.5 py-0.5 text-xs font-medium ${getCategoryBadgeClass(
              manual.category
            )}`}
          >
            {manual.category}
          </Badge>
          {manualHasParts(manual) && (
            <Badge
              variant="outline"
              className="bg-yellow-50 text-yellow-800 border-yellow-300 dark:bg-yellow-950 dark:text-yellow-200 dark:border-yellow-700"
            >
              <ShoppingCart className="h-3 w-3 mr-1" />
              Has Parts
            </Badge>
          )}
        </div>
        <div className="text-sm text-muted-foreground space-y-1">
          {showManufacturer && (
            <p>
              <strong>Manufacturer:</strong> {manual.manufacturer}
            </p>
          )}
          {manual.size && (
            <p>
              <strong>Size:</strong> {formatFileSize(manual.size)}
            </p>
          )}
        </div>
        <div className="flex items-center gap-2">
          <Button
            variant="outline"
            size="sm"
            onClick={() =>
              onView({ url: getManualUrl(manual), filename: manual.filename })
            }
            className="flex-1 rounded-full border-border bg-background hover:border-primary/40 hover:text-primary"
          >
            <Eye className="h-4 w-4 mr-1" />
            View PDF
          </Button>
          <a
            href={getManualUrl(manual)}
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center gap-2 text-sm font-medium hover:underline px-2"
          >
            <Download className="h-4 w-4" />
          </a>
        </div>
      </CardContent>
    </Card>
  )
}

export function ManualsPageClient({
  manuals,
  groupedManuals,
  manufacturers,
  categories,
}: ManualsPageClientProps) {
  const [searchTerm, setSearchTerm] = useState("")
  const [selectedManufacturer, setSelectedManufacturer] = useState<string>("")
  const [selectedCategory, setSelectedCategory] = useState<string>("")
  const [hasPartsOnly, setHasPartsOnly] = useState(false)
  const [viewMode, setViewMode] = useState<"grouped" | "list">("grouped")
  const [viewingManual, setViewingManual] = useState<{
    url: string
    filename: string
  } | null>(null)
  const [manualsWithParts, setManualsWithParts] = useState<Set<string>>(
    new Set()
  )
  const [partsLoading, setPartsLoading] = useState(true)

  // Load manuals with parts on mount
  useEffect(() => {
    getManualsWithParts()
      .then((set) => {
        setManualsWithParts(set)
        setPartsLoading(false)
      })
      .catch(() => {
        setPartsLoading(false)
      })
  }, [])

  // Helper function to check if a manual has parts
  const manualHasParts = useCallback(
    (manual: Manual): boolean => {
      if (manualsWithParts.size === 0) return false
      const filename = manual.filename
      return (
        manualsWithParts.has(filename) ||
        manualsWithParts.has(filename.toLowerCase()) ||
        manualsWithParts.has(filename.replace(/\.pdf$/i, "")) ||
        manualsWithParts.has(filename.replace(/\.pdf$/i, "").toLowerCase())
      )
    },
    [manualsWithParts]
  )

  // Filter manuals based on search and filters
  const filteredManuals = useMemo(() => {
    let filtered = manuals

    if (selectedManufacturer) {
      filtered = filtered.filter((m) => m.manufacturer === selectedManufacturer)
    }

    if (selectedCategory) {
      filtered = filtered.filter((m) => m.category === selectedCategory)
    }

    if (hasPartsOnly) {
      filtered = filtered.filter((m) => manualHasParts(m))
    }

    if (searchTerm) {
      const search = searchTerm.toLowerCase()
      filtered = filtered.filter(
        (m) =>
          m.filename.toLowerCase().includes(search) ||
          m.manufacturer.toLowerCase().includes(search) ||
          m.category.toLowerCase().includes(search) ||
          (m.commonNames &&
            m.commonNames.some((name) =>
              name.toLowerCase().includes(search)
            )) ||
          (m.searchTerms && m.searchTerms.some((term) => term.includes(search)))
      )
    }

    return filtered
  }, [
    manuals,
    searchTerm,
    selectedManufacturer,
    selectedCategory,
    hasPartsOnly,
    manualHasParts,
  ])

  // Get filtered categories based on selected manufacturer
  const filteredCategories = useMemo(() => {
    if (!selectedManufacturer) {
      return categories
    }

    const manufacturerManuals = manuals.filter(
      (m) => m.manufacturer === selectedManufacturer
    )
    const uniqueCategories = new Set(manufacturerManuals.map((m) => m.category))
    return Array.from(uniqueCategories)
  }, [manuals, selectedManufacturer, categories])

  // Filter grouped manuals
  const filteredGroupedManuals = useMemo(() => {
    if (
      !selectedManufacturer &&
      !selectedCategory &&
      !searchTerm &&
      !hasPartsOnly
    ) {
      return groupedManuals
    }

    return groupedManuals
      .filter((group) => {
        if (
          selectedManufacturer &&
          group.manufacturer !== selectedManufacturer
        ) {
          return false
        }
        return true
      })
      .map((group) => {
        const filteredCategories: { [key: string]: Manual[] } = {}
        for (const [category, categoryManuals] of Object.entries(
          group.categories
        )) {
          if (selectedCategory && category !== selectedCategory) {
            continue
          }
          const filtered = categoryManuals.filter((manual) => {
            if (hasPartsOnly && !manualHasParts(manual)) {
              return false
            }
            if (searchTerm) {
              const search = searchTerm.toLowerCase()
              return (
                manual.filename.toLowerCase().includes(search) ||
                manual.manufacturer.toLowerCase().includes(search) ||
                manual.category.toLowerCase().includes(search) ||
                (manual.commonNames &&
                  manual.commonNames.some((name) =>
                    name.toLowerCase().includes(search)
                  )) ||
                (manual.searchTerms &&
                  manual.searchTerms.some((term) => term.includes(search)))
              )
            }
            return true
          })
          if (filtered.length > 0) {
            filteredCategories[category] = filtered
          }
        }
        return {
          ...group,
          categories: filteredCategories,
        }
      })
      .filter((group) => Object.keys(group.categories).length > 0)
  }, [
    groupedManuals,
    selectedManufacturer,
    selectedCategory,
    searchTerm,
    hasPartsOnly,
    manualHasParts,
  ])

  const hasActiveFilters =
    selectedManufacturer || selectedCategory || searchTerm || hasPartsOnly

  const clearFilters = () => {
    setSearchTerm("")
    setSelectedManufacturer("")
    setSelectedCategory("")
    setHasPartsOnly(false)
  }

  const formatFileSize = (bytes?: number): string => {
    if (!bytes) return "Unknown size"
    if (bytes < 1024) return `${bytes} B`
    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
  }

  // Organize categories by machine type first, then others
  const organizeCategories = (categories: { [key: string]: Manual[] }) => {
    const machineTypes = getAllMachineTypeNames()
    const machineTypeCategories: { [key: string]: Manual[] } = {}
    const otherCategories: { [key: string]: Manual[] } = {}

    for (const [category, manuals] of Object.entries(categories)) {
      if (machineTypes.includes(category)) {
        machineTypeCategories[category] = manuals
      } else {
        otherCategories[category] = manuals
      }
    }

    // Sort machine types by priority order
    const sortedMachineTypes = machineTypes
      .filter((type) => machineTypeCategories[type])
      .map((type) => [type, machineTypeCategories[type]] as [string, Manual[]])

    // Sort other categories alphabetically
    const sortedOthers = Object.entries(otherCategories).sort(([a], [b]) =>
      a.localeCompare(b)
    )

    return { machineTypes: sortedMachineTypes, others: sortedOthers }
  }

  // Get icon for machine type
  const getCategoryIcon = (category: string) => {
    const machineType = getMachineTypeInfo(category)
    if (!machineType) return null

    switch (category) {
      case "Coffee":
        return <Coffee className="h-4 w-4" />
      case "Food":
        return <Utensils className="h-4 w-4" />
      case "Beverage":
        return <Droplet className="h-4 w-4" />
      case "Snack":
        return <Package className="h-4 w-4" />
      default:
        return null
    }
  }

  // Get badge color for category
  const getCategoryBadgeClass = (category: string): string => {
    const machineType = getMachineTypeInfo(category)
    const categoryLower = category.toLowerCase()

    // Check for common category patterns
    if (categoryLower.includes("snack")) {
      return "bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200"
    }
    if (categoryLower.includes("beverage") || categoryLower.includes("drink")) {
      return "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
    }
    if (categoryLower.includes("frozen")) {
      return "bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200"
    }
    if (categoryLower.includes("combo")) {
      return "bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200"
    }
    if (categoryLower.includes("coffee") || categoryLower.includes("hot")) {
      return "bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200"
    }
    if (categoryLower.includes("food")) {
      return "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
    }
    if (categoryLower.includes("bulk")) {
      return "bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-200"
    }
    if (categoryLower.includes("ice") || categoryLower.includes("cream")) {
      return "bg-cyan-100 text-cyan-800 dark:bg-cyan-900 dark:text-cyan-200"
    }
    if (categoryLower.includes("service") || categoryLower.includes("repair")) {
      return "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"
    }
    if (categoryLower.includes("parts")) {
      return "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200"
    }
    if (categoryLower.includes("operator") || categoryLower.includes("user")) {
      return "bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-200"
    }
    if (
      categoryLower.includes("installation") ||
      categoryLower.includes("setup")
    ) {
      return "bg-lime-100 text-lime-800 dark:bg-lime-900 dark:text-lime-200"
    }

    // Fallback for machine types
    if (machineType) {
      switch (category) {
        case "Snack":
          return "bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200"
        case "Beverage":
          return "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
        case "Combo":
          return "bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200"
        case "Coffee":
          return "bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200"
        case "Food":
          return "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
        case "Bulk":
          return "bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-200"
        case "Ice Cream":
          return "bg-cyan-100 text-cyan-800 dark:bg-cyan-900 dark:text-cyan-200"
        default:
          return "bg-muted text-muted-foreground"
      }
    }

    return "bg-primary/[0.08] text-foreground"
  }

  return (
    <div className="space-y-6">
      {/* Search and Filter Controls */}
      <PublicSurface>
        <CardContent className="p-0">
          <div className="space-y-6">
            {/* Search Bar */}
            <div className="relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
              <Input
                type="text"
                placeholder="Search manuals by name, manufacturer, or category..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="h-12 rounded-xl border-border/70 bg-white pl-10 shadow-sm"
              />
            </div>

            {/* Filters Row */}
            <div className="flex flex-col sm:flex-row flex-wrap gap-3 sm:gap-4 items-start sm:items-center">
              <div className="flex items-center gap-2 w-full sm:w-auto">
                <Filter className="h-4 w-4 text-muted-foreground flex-shrink-0" />
                <span className="text-sm font-medium">Filters:</span>
              </div>

              <div className="flex flex-col sm:flex-row gap-3 sm:gap-4 w-full sm:w-auto">
                <div className="relative">
                  <Select
                    value={selectedManufacturer || undefined}
                    onValueChange={(value) => {
                      setSelectedManufacturer(value ?? "")
                      // Clear category when manufacturer changes
                      if (
                        value &&
                        selectedCategory &&
                        !filteredCategories.includes(selectedCategory)
                      ) {
                        setSelectedCategory("")
                      }
                    }}
                  >
                    <SelectTrigger className="w-full rounded-xl border-border/70 bg-white shadow-sm sm:w-[200px]">
                      <SelectValue placeholder="All Manufacturers" />
                    </SelectTrigger>
                    <SelectContent>
                      {manufacturers.map((mfr) => (
                        <SelectItem key={mfr} value={mfr}>
                          {mfr}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                  {selectedManufacturer && (
                    <Badge className="absolute -right-2 -top-2 rounded-full bg-primary text-[10px] text-white">
                      Applied
                    </Badge>
                  )}
                </div>

                <div className="relative">
                  <Select
                    value={selectedCategory || undefined}
                    onValueChange={(value) => {
                      setSelectedCategory(value ?? "")
                    }}
                    disabled={
                      !selectedManufacturer &&
                      filteredCategories.length === categories.length
                    }
                  >
                    <SelectTrigger className="w-full rounded-xl border-border/70 bg-white shadow-sm sm:w-[200px]">
                      <SelectValue placeholder="All Categories" />
                    </SelectTrigger>
                    <SelectContent>
                      {filteredCategories.map((cat) => (
                        <SelectItem key={cat} value={cat}>
                          {cat}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                  {selectedCategory && (
                    <Badge className="absolute -right-2 -top-2 rounded-full bg-primary text-[10px] text-white">
                      Applied
                    </Badge>
                  )}
                </div>
              </div>

              <PublicInset className="flex w-full items-center gap-2 rounded-full px-4 py-2 shadow-none sm:w-auto">
                <Checkbox
                  id="has-parts"
                  checked={hasPartsOnly}
                  onCheckedChange={(checked) =>
                    setHasPartsOnly(checked === true)
                  }
                />
                <label
                  htmlFor="has-parts"
                  className="text-sm font-medium flex items-center gap-1.5 cursor-pointer"
                >
                  <ShoppingCart className="h-3.5 w-3.5" />
                  Has Parts Available
                </label>
                {hasPartsOnly && (
                  <Badge className="rounded-full bg-primary text-[10px] text-white">
                    Applied
                  </Badge>
                )}
              </PublicInset>

              {hasActiveFilters && (
                <Button
                  variant="outline"
                  size="sm"
                  onClick={clearFilters}
                  className="w-full rounded-full border-border bg-background sm:w-auto"
                >
                  <X className="h-4 w-4 mr-1" />
                  Clear Filters
                </Button>
              )}
            </div>

            {/* View Mode Toggle and Results Count */}
            <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-4">
              <div className="flex items-center gap-3 w-full sm:w-auto">
                <span className="text-sm text-muted-foreground flex-shrink-0">
                  View:
                </span>
                <div className="inline-flex flex-1 items-center rounded-full border border-border/70 bg-white p-1 shadow-sm sm:flex-initial">
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => setViewMode("grouped")}
                    className={`flex-1 rounded-full sm:flex-initial ${
                      viewMode === "grouped"
                        ? "bg-primary text-primary-foreground hover:bg-primary"
                        : "hover:bg-muted"
                    }`}
                    aria-label="Grouped view"
                  >
                    <LayoutGrid className="h-4 w-4 mr-1.5" />
                    <span className="hidden xs:inline">Grouped</span>
                  </Button>
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => setViewMode("list")}
                    className={`flex-1 rounded-full sm:flex-initial ${
                      viewMode === "list"
                        ? "bg-primary text-primary-foreground hover:bg-primary"
                        : "hover:bg-muted"
                    }`}
                    aria-label="List view"
                  >
                    <List className="h-4 w-4 mr-1.5" />
                    <span className="hidden xs:inline">List</span>
                  </Button>
                </div>
              </div>

              <div className="text-sm text-muted-foreground w-full sm:w-auto text-center sm:text-left">
                Showing <strong>{filteredManuals.length}</strong> of{" "}
                <strong>{manuals.length}</strong> manuals
              </div>
            </div>
          </div>
        </CardContent>
      </PublicSurface>

      {/* Manuals Display */}
      {filteredManuals.length === 0 ? (
        <PublicSurface>
          <CardContent className="py-16 text-center">
            <div className="space-y-2">
              <p className="text-lg font-medium text-foreground">
                No manuals found
              </p>
              <p className="text-sm text-muted-foreground">
                Try adjusting your search or filters to find what you're looking
                for.
              </p>
            </div>
          </CardContent>
        </PublicSurface>
      ) : viewMode === "grouped" ? (
        /* Grouped View */
        <div className="space-y-10">
          {filteredGroupedManuals.map((group) => {
            const organized = organizeCategories(group.categories)
            return (
              <PublicSurface key={group.manufacturer} className="space-y-6">
                <div className="border-b border-border/60 pb-3">
                  <h2 className="text-2xl font-bold tracking-tight">
                    {group.manufacturer}
                  </h2>
                </div>

                {/* Machine Type Categories First */}
                {organized.machineTypes.length > 0 && (
                  <div className="space-y-6">
                    {organized.machineTypes.map(
                      ([category, categoryManuals]) => {
                        const machineTypeInfo = getMachineTypeInfo(category)
                        const icon = getCategoryIcon(category)
                        return (
                          <div key={category} className="space-y-4">
                            <div className="flex items-center gap-3 flex-wrap">
                              {icon && (
                                <span className="text-muted-foreground">
                                  {icon}
                                </span>
                              )}
                              <h3 className="text-lg font-semibold">
                                {category}
                              </h3>
                              <Badge
                                variant="outline"
                                className={`rounded-full px-2.5 py-0.5 text-xs font-medium ${getCategoryBadgeClass(
                                  category
                                )}`}
                              >
                                {categoryManuals.length}{" "}
                                {categoryManuals.length === 1
                                  ? "manual"
                                  : "manuals"}
                              </Badge>
                              {machineTypeInfo && (
                                <span className="text-sm text-muted-foreground hidden sm:inline">
                                  {machineTypeInfo.description}
                                </span>
                              )}
                            </div>
                            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                              {categoryManuals.map((manual) => (
                                <ManualCard
                                  key={manual.path}
                                  manual={manual}
                                  onView={setViewingManual}
                                  manualHasParts={manualHasParts}
                                  getCategoryBadgeClass={getCategoryBadgeClass}
                                  formatFileSize={formatFileSize}
                                />
                              ))}
                            </div>
                          </div>
                        )
                      }
                    )}
                  </div>
                )}

                {/* Other Categories (Model Numbers, Document Types, etc.) */}
                {organized.others.length > 0 && (
                  <div className="space-y-6">
                    {organized.machineTypes.length > 0 && (
                      <div className="border-t border-border/60 pt-6">
                        <h3 className="text-lg font-semibold text-muted-foreground mb-4">
                          Models & Other Documents
                        </h3>
                      </div>
                    )}
                    {organized.others.map(([category, categoryManuals]) => (
                      <div key={category} className="space-y-4">
                        <div className="flex items-center gap-2">
                          <h4 className="text-base font-semibold text-muted-foreground">
                            {category}
                          </h4>
                          <span className="text-xs text-muted-foreground">
                            ({categoryManuals.length}{" "}
                            {categoryManuals.length === 1
                              ? "manual"
                              : "manuals"}
                            )
                          </span>
                        </div>
                        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                          {categoryManuals.map((manual) => (
                            <ManualCard
                              key={manual.path}
                              manual={manual}
                              onView={setViewingManual}
                              manualHasParts={manualHasParts}
                              getCategoryBadgeClass={getCategoryBadgeClass}
                              formatFileSize={formatFileSize}
                            />
                          ))}
                        </div>
                      </div>
                    ))}
                  </div>
                )}

                {/* Product Suggestions Section */}
                {filteredManuals.length > 0 && (
                  <div className="space-y-6 mt-8">
                    <div className="border-t border-border/60 pt-6">
                      <h3 className="text-lg font-semibold text-muted-foreground mb-4">
                        Related Products
                      </h3>
                    </div>
                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                      {filteredManuals.slice(0, 3).map((manual) => (
                        <ProductSuggestions key={manual.path} manual={manual} />
                      ))}
                    </div>
                  </div>
                )}
              </PublicSurface>
            )
          })}
        </div>
      ) : (
        /* List View */
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
          {filteredManuals.map((manual) => (
            <ManualCard
              key={manual.path}
              manual={manual}
              onView={setViewingManual}
              manualHasParts={manualHasParts}
              getCategoryBadgeClass={getCategoryBadgeClass}
              formatFileSize={formatFileSize}
              showManufacturer={true}
            />
          ))}
        </div>
      )}

      {/* PDF Viewer Modal */}
      {viewingManual && (
        <ManualViewer
          manualUrl={viewingManual.url}
          filename={viewingManual.filename}
          isOpen={!!viewingManual}
          onClose={() => setViewingManual(null)}
        />
      )}
    </div>
  )
}