"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,
} 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"

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_16px_40px_rgba(15,23,42,0.075)] transition-all hover:-translate-y-0.5 hover:shadow-[0_22px_54px_rgba(15,23,42,0.11)]">
      {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="space-y-3 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.slice(0, 3).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>
            ))}
            {manual.commonNames.length > 3 && (
              <Badge
                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"
              >
                +{manual.commonNames.length - 3} more
              </Badge>
            )}
          </div>
        )}
        {manual.searchTerms &&
          manual.searchTerms.length > 0 &&
          !manual.commonNames && (
            <div className="mt-2 flex flex-wrap gap-2">
              {manual.searchTerms.slice(0, 4).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>
              ))}
              {manual.searchTerms.length > 4 && (
                <Badge
                  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"
                >
                  +{manual.searchTerms.length - 4} more
                </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="space-y-1.5 text-sm text-muted-foreground">
          {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 className="p-4 md:p-6">
          <CardContent className="p-0">
          <div className="space-y-5">
            <div className="flex flex-col gap-4 rounded-[1.5rem] border border-border/60 bg-[linear-gradient(180deg,rgba(255,255,255,0.98),rgba(255,249,240,0.94))] p-4 md:flex-row md:items-center md:justify-between">
              <div>
                <p className="text-xs font-semibold uppercase tracking-[0.18em] text-primary/80">
                  Start With Search
                </p>
                <h2 className="mt-2 text-xl font-semibold tracking-tight text-foreground">
                  Find the manual first, then narrow it down
                </h2>
                <p className="mt-1 text-sm leading-relaxed text-muted-foreground">
                  Search by model, manufacturer, or category. Use filters if
                  you already know the brand or want manuals with parts.
                </p>
              </div>
              <PublicInset className="w-full rounded-[1.25rem] px-4 py-3 text-sm text-muted-foreground shadow-none md:max-w-xs">
                Showing <strong>{filteredManuals.length}</strong> of{" "}
                <strong>{manuals.length}</strong> manuals
              </PublicInset>
            </div>

            {/* 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="rounded-[1.5rem] border border-border/60 bg-white/80 p-4">
              <div className="flex flex-col gap-4">
              <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 gap-3 lg:flex-row lg:flex-wrap lg:items-center">
              <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>
              </div>
            </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 border-t border-border/55 pt-1">
              <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">
                View the full library grouped by manufacturer or switch to list
                view for a faster scan.
              </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-7 p-5 md:p-7">
                <div className="border-b border-border/60 pb-4">
                  <h2 className="text-2xl font-bold tracking-tight">
                    {group.manufacturer}
                  </h2>
                  <p className="mt-2 text-sm text-muted-foreground">
                    {Object.values(group.categories).flat().length} manuals
                    available from this manufacturer.
                  </p>
                </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 gap-4 sm:grid-cols-2 xl:grid-cols-3">
                              {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 gap-4 sm:grid-cols-2 xl:grid-cols-3">
                          {categoryManuals.map((manual) => (
                            <ManualCard
                              key={manual.path}
                              manual={manual}
                              onView={setViewingManual}
                              manualHasParts={manualHasParts}
                              getCategoryBadgeClass={getCategoryBadgeClass}
                              formatFileSize={formatFileSize}
                            />
                          ))}
                        </div>
                      </div>
                    ))}
                  </div>
                )}

              </PublicSurface>
            )
          })}
        </div>
      ) : (
        /* List View */
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
          {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>
  )
}