"use client";

import { useMemo, useState } from "react";
import type { Campaign, Mission } from "@/payload-types";
import { MissionCard } from "@/components/frontend/intelligence/MissionCard";
import { MissionFilters } from "@/components/frontend/intelligence/MissionFilters";

interface MissionsListProps {
  missions: Mission[];
  campaigns: Campaign[];
}

export function MissionsList({ missions, campaigns }: MissionsListProps) {
  const [filters, setFilters] = useState<{
    campaignId: number | null;
    operationType: string | null;
    status: string | null;
  }>({ campaignId: null, operationType: null, status: null });

  const filtered = useMemo(() => {
    return missions.filter((m) => {
      if (filters.campaignId) {
        const campaignId =
          typeof m.classification.campaign === "object"
            ? (m.classification.campaign as Campaign).id
            : m.classification.campaign;
        if (campaignId !== filters.campaignId) return false;
      }
      if (filters.operationType && m.operationType !== filters.operationType) {
        return false;
      }
      if (filters.status && m.ownershipAndStatus.status !== filters.status) {
        return false;
      }
      return true;
    });
  }, [missions, filters]);

  return (
    <div className="flex flex-col gap-4">
      <MissionFilters campaigns={campaigns} onFilterChange={setFilters} />

      {filtered.length === 0 ? (
        <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
          <p className="text-sm">No missions found.</p>
          {filters.campaignId || filters.operationType || filters.status ? (
            <button
              onClick={() =>
                setFilters({
                  campaignId: null,
                  operationType: null,
                  status: null,
                })
              }
              className="text-sm text-primary hover:underline mt-1"
            >
              Clear filters
            </button>
          ) : null}
        </div>
      ) : (
        <div className="flex flex-col gap-2">
          {filtered.map((mission) => (
            <MissionCard key={mission.id} mission={mission} />
          ))}
        </div>
      )}
    </div>
  );
}