traceability/src/pages/ALMTypePage.tsx

import { useParams } from "react-router-dom";
import { AppLayout } from "@/components/layout/AppLayout";
import { useTraceabilityData } from "@/hooks/useTraceabilityData";
import { WorkPackageCard } from "@/components/traceability/WorkPackageCard";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { useState, useMemo } from "react";
import {
  Target,
  CheckSquare,
  FileText,
  TestTube,
  Layers,
  Bug,
  AlertTriangle,
  Calendar,
  Milestone,
  FolderKanban,
  Search,
} from "lucide-react";
import { WorkPackageType } from "@/types/traceability";

const typeConfig: Record<
  string,
  { title: string; icon: React.ReactNode; description: string }
> = {
  feature: {
    title: "Features",
    icon: <Target className="h-6 w-6" />,
    description: "System features and capabilities",
  },
  requirements: {
    title: "System Requirements",
    icon: <CheckSquare className="h-6 w-6" />,
    description: "High-level system requirements (SR-*)",
  },
  swreq: {
    title: "Software Requirements",
    icon: <FileText className="h-6 w-6" />,
    description: "Detailed software requirements (SWR-*)",
  },
  "test-case": {
    title: "Test Cases",
    icon: <TestTube className="h-6 w-6" />,
    description: "Verification and validation test cases",
  },
  epic: {
    title: "Epics",
    icon: <Layers className="h-6 w-6" />,
    description: "Large feature containers",
  },
  "user-story": {
    title: "User Stories",
    icon: <FolderKanban className="h-6 w-6" />,
    description: "User-focused requirements",
  },
  task: {
    title: "Tasks",
    icon: <CheckSquare className="h-6 w-6" />,
    description: "Implementation tasks",
  },
  bug: {
    title: "Bugs",
    icon: <Bug className="h-6 w-6" />,
    description: "Defects and issues",
  },
  risk: {
    title: "Risks",
    icon: <AlertTriangle className="h-6 w-6" />,
    description: "Identified project risks",
  },
  milestone: {
    title: "Milestones",
    icon: <Milestone className="h-6 w-6" />,
    description: "Project milestones",
  },
  phase: {
    title: "Phases",
    icon: <Calendar className="h-6 w-6" />,
    description: "Project phases",
  },
  "summary-task": {
    title: "Summary Tasks",
    icon: <FolderKanban className="h-6 w-6" />,
    description: "Task containers",
  },
};

export default function ALMTypePage() {
  const { type } = useParams<{ type: string }>();
  const { data, loading, lastUpdated, refresh, groupedByType } =
    useTraceabilityData();
  const [searchQuery, setSearchQuery] = useState("");
  const [statusFilter, setStatusFilter] = useState<string>("all");

  // Convert URL param to actual type (e.g., "test-case" -> "test case")
  const actualType = type?.replace("-", " ") as WorkPackageType;
  const items = groupedByType[actualType] || [];
  const config = typeConfig[type || ""] || {
    title: type || "Unknown",
    icon: <FileText className="h-6 w-6" />,
    description: "",
  };

  // Get unique statuses
  const statuses = useMemo(() => {
    const statusSet = new Set<string>();
    items.forEach((item) => statusSet.add(item.status));
    return Array.from(statusSet).sort();
  }, [items]);

  // Filter items
  const filteredItems = useMemo(() => {
    return items.filter((item) => {
      const matchesSearch =
        searchQuery === "" ||
        item.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
        item.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
        item.id.toString().includes(searchQuery);

      const matchesStatus =
        statusFilter === "all" || item.status === statusFilter;

      return matchesSearch && matchesStatus;
    });
  }, [items, searchQuery, statusFilter]);

  return (
    <AppLayout lastUpdated={lastUpdated} onRefresh={refresh} isRefreshing={loading}>
      <div className="space-y-6">
        {/* Header */}
        <div className="flex items-center gap-3">
          <div className="p-2 rounded-lg bg-primary/10">{config.icon}</div>
          <div>
            <h1 className="text-2xl font-bold">{config.title}</h1>
            <p className="text-muted-foreground">{config.description}</p>
          </div>
          <Badge variant="secondary" className="ml-auto text-lg px-3 py-1">
            {items.length} items
          </Badge>
        </div>

        {/* Filters */}
        <Card>
          <CardContent className="pt-4">
            <div className="flex flex-col sm:flex-row gap-4">
              <div className="flex-1 relative">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                <Input
                  placeholder="Search by ID, title, or description..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="pl-9"
                />
              </div>
              <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>
                  {statuses.map((status) => (
                    <SelectItem key={status} value={status}>
                      {status}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </CardContent>
        </Card>

        {/* Results */}
        <div className="space-y-2">
          {loading ? (
            <div className="text-center py-8 text-muted-foreground">
              Loading...
            </div>
          ) : filteredItems.length === 0 ? (
            <Card>
              <CardContent className="py-8 text-center text-muted-foreground">
                {items.length === 0
                  ? `No ${config.title.toLowerCase()} found in the traceability data.`
                  : "No items match your search criteria."}
              </CardContent>
            </Card>
          ) : (
            filteredItems.map((item) => (
              <WorkPackageCard
                key={item.id}
                workPackage={item}
                allWorkPackages={data?.workPackages || []}
              />
            ))
          )}
        </div>

        {/* Summary */}
        {filteredItems.length > 0 && filteredItems.length !== items.length && (
          <p className="text-sm text-muted-foreground text-center">
            Showing {filteredItems.length} of {items.length} items
          </p>
        )}
      </div>
    </AppLayout>
  );
}