"use client";

import { useMemo, useRef, useState } from "react";
import { useRouter } from "next/navigation";
import {
  ArrowLeft,
  ArrowRight,
  CheckCircle2,
  FileText,
  X,
  ClipboardList,
  User,
  Building2,
  AlertCircle,
  Search,
  ChevronDown,
  UploadCloud,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import {
  useAdminActiveClients,
  useAdminCreateTask,
  useAdminEmployeesByDepartment,
} from "../hooks/task.hooks";
import { useGetDepartments } from "@/modules/admin/departments/hooks/department.hook";
import {
  useGetServices,
  useGetServiceDocuments,
} from "@/modules/admin/services/hooks/service.hook";
import { capitalizeFirstLetter } from "@/lib/capitalize";

const PRIORITIES = ["LOW", "MEDIUM", "HIGH", "URGENT"] as const;

function useDebounce(delay = 400) {
  const [debounced, setDebounced] = useState("");
  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
  const update = (v: string) => {
    if (timer.current) clearTimeout(timer.current);
    timer.current = setTimeout(() => setDebounced(v), delay);
  };
  return [debounced, update] as const;
}

/** Reusable searchable popover dropdown */
function SearchDropdown({
  label,
  required,
  placeholder,
  value,
  displayValue,
  open,
  onOpenChange,
  searchValue,
  onSearchChange,
  searchPlaceholder,
  children,
  disabled,
}: {
  label: string;
  required?: boolean;
  placeholder: string;
  value: string;
  displayValue?: React.ReactNode;
  open: boolean;
  onOpenChange: (v: boolean) => void;
  searchValue: string;
  onSearchChange: (v: string) => void;
  searchPlaceholder?: string;
  children: React.ReactNode;
  disabled?: boolean;
}) {
  return (
    <div className="space-y-1.5">
      <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
        {label} {required && <span className="text-destructive">*</span>}
      </Label>
      <Popover open={open} onOpenChange={onOpenChange}>
        <PopoverTrigger asChild>
          <button
            type="button"
            disabled={disabled}
            className={`w-full flex items-center justify-between gap-2 h-9 px-3 rounded-md border border-input bg-background text-sm transition-colors hover:bg-accent/50 focus:outline-none focus:ring-2 focus:ring-ring disabled:opacity-50 disabled:cursor-not-allowed ${
              open ? "ring-2 ring-ring" : ""
            }`}
          >
            <span
              className={`truncate ${!value ? "text-muted-foreground" : ""}`}
            >
              {value ? displayValue : placeholder}
            </span>
            <ChevronDown
              className={`w-4 h-4 text-muted-foreground shrink-0 transition-transform ${
                open ? "rotate-180" : ""
              }`}
            />
          </button>
        </PopoverTrigger>
        <PopoverContent
          className="p-0 w-[var(--radix-popover-trigger-width)] min-w-[220px]"
          align="start"
          sideOffset={4}
        >
          {/* Search */}
          <div className="p-2 border-b">
            <div className="relative">
              <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground pointer-events-none" />
              <input
                autoFocus
                className="w-full pl-8 pr-3 py-1.5 text-sm bg-background border border-border rounded-md outline-none focus:ring-1 focus:ring-primary"
                placeholder={searchPlaceholder ?? "Search..."}
                value={searchValue}
                onChange={(e) => onSearchChange(e.target.value)}
              />
            </div>
          </div>
          <div className="max-h-56 overflow-y-auto py-1">{children}</div>
        </PopoverContent>
      </Popover>
    </div>
  );
}

function DropdownItem({
  selected,
  onClick,
  children,
}: {
  selected?: boolean;
  onClick: () => void;
  children: React.ReactNode;
}) {
  return (
    <div
      onClick={onClick}
      className={`flex items-center gap-2 px-3 py-2 cursor-pointer text-sm hover:bg-accent transition-colors ${
        selected ? "bg-accent/70 font-medium" : ""
      }`}
    >
      {children}
    </div>
  );
}

function EmptyState({ search }: { search: string }) {
  return (
    <div className="px-3 py-5 text-center text-sm text-muted-foreground">
      {search.length > 0 && search.length < 3 ? (
        <span>
          Type <strong>3+</strong> characters to search
        </span>
      ) : (
        "No results found"
      )}
    </div>
  );
}

export function CreatetaskPage() {
  const router = useRouter();
  const [step, setStep] = useState<1 | 2>(1);

  // Step 1
  const [clientId, setClientId] = useState("");
  const [clientPage, setClientPage] = useState(1);
  const [clientSearchInput, setClientSearchInput] = useState("");
  const [clientSearch, updateClientSearch] = useDebounce();
  const [clientOpen, setClientOpen] = useState(false);

  const [serviceId, setServiceId] = useState("");
  const [serviceSearchInput, setServiceSearchInput] = useState("");
  const [serviceOpen, setServiceOpen] = useState(false);

  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [dueDate, setDueDate] = useState("");
  const [priority, setPriority] = useState("MEDIUM");
  const [titleError, setTitleError] = useState("");

  // Step 2
  const [departmentId, setDepartmentId] = useState("");
  const [deptSearchInput, setDeptSearchInput] = useState("");
  const [deptOpen, setDeptOpen] = useState(false);

  const [assignedEmployeeId, setAssignedEmployeeId] = useState("");
  const [empSearchInput, setEmpSearchInput] = useState("");
  const [empSearch, updateEmpSearch] = useDebounce();
  const [empOpen, setEmpOpen] = useState(false);

  const [docFiles, setDocFiles] = useState<Record<string, File>>({});

  // Data fetching — empty string = load all (initial), 3+ chars = search
  const { data: clientsRes, isFetching: clientsFetching } =
    useAdminActiveClients(
      clientSearch.length >= 3 ? clientSearch : "",
      clientPage
    );
  const { data: servicesRes } = useGetServices({ page: 1, limit: 100 });
  const { data: departmentsRes } = useGetDepartments({ page: 1, limit: 100 });
  // const { data: deptEmployees = [], isFetching: empFetching } =
  //   useAdminEmployeesByDepartment(
  //     departmentId,
  //     empSearch.length >= 3 ? empSearch : ""
  //   );

      const { data: deptEmployeesRaw = [], isFetching: empFetching } =
      useAdminEmployeesByDepartment(
         departmentId ?? "",
        empSearch.length >= 3 ? empSearch : ""
      );
    
    const deptEmployees = deptEmployeesRaw.filter((e) => e.role === "EMPLOYEE");

  const { data: serviceDocsRes, isLoading: loadingDocs } =
    useGetServiceDocuments(serviceId);

  const clientsList = useMemo(() => clientsRes?.data ?? [], [clientsRes]);
  const clientsMeta = clientsRes?.meta;
  const services = useMemo(() => servicesRes?.data ?? [], [servicesRes]);
  const departments = useMemo(
    () => departmentsRes?.data ?? [],
    [departmentsRes]
  );
  const requirements = useMemo(
    () => serviceDocsRes?.data ?? [],
    [serviceDocsRes]
  );
  const missingRequired = requirements.filter(
    (r) => r.isRequired && !docFiles[r.id]
  );

  const filteredServices = useMemo(() => {
    if (!serviceSearchInput || serviceSearchInput.length < 3) return services;
    const q = serviceSearchInput.toLowerCase();
    return services.filter(
      (s) =>
        s.name.toLowerCase().includes(q) || s.category.toLowerCase().includes(q)
    );
  }, [services, serviceSearchInput]);

  const filteredDepts = useMemo(() => {
    if (!deptSearchInput || deptSearchInput.length < 3) return departments;
    const q = deptSearchInput.toLowerCase();
    return departments.filter((d) => d.name.toLowerCase().includes(q));
  }, [departments, deptSearchInput]);

  const createTask = useAdminCreateTask(() => router.push("/admin/tasks"));

  const handleClientSearch = (v: string) => {
    setClientSearchInput(v);
    setClientPage(1);
    if (v.length === 0 || v.length >= 3) updateClientSearch(v);
  };

  const handleEmpSearch = (v: string) => {
    setEmpSearchInput(v);
    if (v.length === 0 || v.length >= 3) updateEmpSearch(v);
  };

  const handleServiceChange = (id: string) => {
    setServiceId(id);
    setDocFiles({});
    setServiceOpen(false);
  };
  const handleDepartmentChange = (id: string) => {
    setDepartmentId(id);
    setAssignedEmployeeId("");
    setDeptOpen(false);
  };
  const handleClientSelect = (id: string) => {
    setClientId(id);
    setClientOpen(false);
  };
  const handleEmpSelect = (id: string) => {
    setAssignedEmployeeId(id);
    setEmpOpen(false);
  };

  const handleRequirementFile = (id: string, file: File | null) => {
    setDocFiles((prev) => {
      const next = { ...prev };
      if (file) next[id] = file;
      else delete next[id];
      return next;
    });
  };

  const handleNext = () => {
    if (!title.trim()) {
      setTitleError("Title is required");
      return;
    }
    setStep(2);
  };

  const handleSubmit = () => {
    if (missingRequired.length > 0) return;
    const fd = new FormData();
    fd.append("clientId", clientId);
    fd.append("serviceId", serviceId);
    fd.append("title", title.trim());
    if (description.trim()) fd.append("description", description.trim());
    if (dueDate) fd.append("dueDate", dueDate);
    fd.append("priority", priority);
    if (departmentId) fd.append("departmentId", departmentId);
    if (assignedEmployeeId) fd.append("assignedEmployeeId", assignedEmployeeId);
    Object.entries(docFiles).forEach(([id, file]) => fd.append(id, file));
    createTask.mutate(fd);
  };

  const selectedClient = clientsList.find((c) => c.id === clientId);
  const selectedService = services.find((s) => s.id === serviceId);
  const selectedDept = departments.find((d) => d.id === departmentId);
  const selectedEmp = deptEmployees.find((e) => e.id === assignedEmployeeId);
  const canProceedStep1 = clientId && serviceId && title.trim();

  return (
    <div className="space-y-6 w-full">
      {/* Header */}
      <div className="flex items-center gap-3">
        <button
          onClick={() => router.back()}
          className="text-muted-foreground hover:text-foreground flex items-center gap-1 text-sm"
        >
          <ArrowLeft className="h-4 w-4" /> Back
        </button>
        <div>
          <h2 className="text-xl font-bold tracking-tight">Create Task</h2>
          <p className="text-muted-foreground text-sm">
            Assign a service task to a client
          </p>
        </div>
      </div>

      {/* Step Indicator */}
      <div className="flex items-center">
        <div className="flex items-center gap-2">
          <div
            className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold shrink-0 transition-colors ${
              step === 1
                ? "bg-primary text-primary-foreground"
                : "bg-green-500 text-white"
            }`}
          >
            {step > 1 ? <CheckCircle2 className="w-4 h-4" /> : "1"}
          </div>
          <span
            className={`text-sm font-medium whitespace-nowrap ${
              step === 1 ? "text-foreground" : "text-muted-foreground"
            }`}
          >
            Task Details
          </span>
        </div>
        <div
          className={`flex-1 h-px mx-3 transition-colors ${
            step > 1 ? "bg-green-500" : "bg-border"
          }`}
        />
        <div className="flex items-center gap-2">
          <div
            className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold shrink-0 transition-colors ${
              step === 2
                ? "bg-primary text-primary-foreground"
                : "bg-muted text-muted-foreground"
            }`}
          >
            2
          </div>
          <span
            className={`text-sm font-medium whitespace-nowrap ${
              step === 2 ? "text-foreground" : "text-muted-foreground"
            }`}
          >
            Assignment & Documents
          </span>
        </div>
      </div>

      {/* ── STEP 1 ── */}
      {step === 1 && (
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="flex items-center gap-2 text-base">
              <ClipboardList className="h-4 w-4 text-primary" /> Task Details
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-5">
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              {/* Client */}
              <SearchDropdown
                label="Client"
                required
                placeholder="Select client"
                value={clientId}
                displayValue={
                  selectedClient ? (
                    <span className="flex items-center gap-1.5">
                      <User className="w-3.5 h-3.5 text-muted-foreground shrink-0" />
                      <span className="truncate">{selectedClient.name}</span>
                      {selectedClient.companyName && (
                        <span className="text-muted-foreground text-xs shrink-0">
                          ({selectedClient.companyName})
                        </span>
                      )}
                    </span>
                  ) : undefined
                }
                open={clientOpen}
                onOpenChange={setClientOpen}
                searchValue={clientSearchInput}
                onSearchChange={handleClientSearch}
                searchPlaceholder="Search by name, email..."
              >
                {clientsFetching ? (
                  <div className="px-3 py-4 text-sm text-muted-foreground text-center">
                    Loading...
                  </div>
                ) : clientsList.length === 0 ? (
                  <div className="px-3 py-5 text-center text-sm text-muted-foreground">
                    {clientSearchInput.length > 0 &&
                    clientSearchInput.length < 3 ? (
                      <span>
                        Type <strong>3+</strong> characters to search
                      </span>
                    ) : (
                      "No clients found"
                    )}
                  </div>
                ) : (
                  <>
                    {clientsList.map((c) => (
                      <DropdownItem
                        key={c.id}
                        selected={clientId === c.id}
                        onClick={() => handleClientSelect(c.id)}
                      >
                        <User className="w-3.5 h-3.5 text-muted-foreground shrink-0" />
                        <div className="min-w-0 flex-1">
                          <p className="truncate">{c.name}</p>
                          {c.companyName && (
                            <p className="text-xs text-muted-foreground truncate">
                              {c.companyName}
                            </p>
                          )}
                        </div>
                        <Badge
                          variant={
                            c.status === "ACTIVE" ? "default" : "secondary"
                          }
                          className="text-[10px] shrink-0"
                        >
                          {c.status}
                        </Badge>
                      </DropdownItem>
                    ))}
                    {clientsMeta && clientsMeta.totalPages > 1 && (
                      <div className="flex items-center justify-between px-3 py-2 border-t text-xs text-muted-foreground">
                        <button
                          disabled={clientPage <= 1}
                          onClick={() => setClientPage((p) => p - 1)}
                          className="disabled:opacity-40 hover:text-foreground px-1"
                        >
                          ← Prev
                        </button>
                        <span>
                          {clientPage} / {clientsMeta.totalPages}
                        </span>
                        <button
                          disabled={clientPage >= clientsMeta.totalPages}
                          onClick={() => setClientPage((p) => p + 1)}
                          className="disabled:opacity-40 hover:text-foreground px-1"
                        >
                          Next{" "}
                          <ArrowRight className="w-3.5 h-3.5 inline-block" />
                        </button>
                      </div>
                    )}
                  </>
                )}
              </SearchDropdown>

              {/* Service */}
              <SearchDropdown
                label="Service"
                required
                placeholder="Select service"
                value={serviceId}
                displayValue={
                  selectedService ? (
                    <span className="flex items-center gap-1.5">
                      <span className="truncate">{selectedService.name}</span>
                      <Badge variant="outline" className="text-[10px] shrink-0">
                        {selectedService.category}
                      </Badge>
                    </span>
                  ) : undefined
                }
                open={serviceOpen}
                onOpenChange={setServiceOpen}
                searchValue={serviceSearchInput}
                onSearchChange={setServiceSearchInput}
                searchPlaceholder="Search service..."
              >
                {filteredServices.length === 0 ? (
                  <EmptyState search={serviceSearchInput} />
                ) : (
                  filteredServices.map((svc) => (
                    <DropdownItem
                      key={svc.id}
                      selected={serviceId === svc.id}
                      onClick={() => handleServiceChange(svc.id)}
                    >
                      <span className="flex-1 truncate">{svc.name}</span>
                      <Badge variant="outline" className="text-[10px] shrink-0">
                        {svc.category}
                      </Badge>
                    </DropdownItem>
                  ))
                )}
              </SearchDropdown>
            </div>

            {/* Title */}
            <div className="space-y-1.5">
              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                Title <span className="text-destructive">*</span>
              </Label>
              <Input
                value={title}
                onChange={(e) => {
                  setTitle(e.target.value);
                  setTitleError("");
                }}
                placeholder="e.g. GST Filing - July 2026"
                className={titleError ? "border-destructive" : ""}
              />
              {titleError && (
                <p className="text-xs text-destructive">{titleError}</p>
              )}
            </div>

            {/* Description */}
            <div className="space-y-1.5">
              <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                Description
              </Label>
              <Textarea
                value={description}
                onChange={(e) => setDescription(e.target.value)}
                placeholder="Add task details (optional)"
                rows={3}
              />
            </div>

            {/* Due Date + Priority */}
            <div className="flex flex-wrap gap-4">
              <div className="space-y-1.5 w-44">
                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                  Due Date
                </Label>
                <Input
                  type="date"
                  value={dueDate}
                  onChange={(e) => setDueDate(e.target.value)}
                />
              </div>
              <div className="space-y-1.5 w-40">
                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                  Priority
                </Label>
                <Select value={priority} onValueChange={setPriority}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    {PRIORITIES.map((p) => (
                      <SelectItem key={p} value={p}>
                        {p}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </div>

            <div className="flex items-center justify-end gap-3 pt-1">
              <Button
                variant="ghost"
                className="border border-border hover:bg-muted hover:text-foreground"
                onClick={() => router.back()}
              >
                Cancel
              </Button>
              <Button disabled={!canProceedStep1} onClick={handleNext}>
                Next <ArrowRight className="w-4 h-4 ml-1.5" />
              </Button>
            </div>
          </CardContent>
        </Card>
      )}

      {/* ── STEP 2 ── */}
      {step === 2 && (
        <div className="space-y-4">
          {/* Summary */}
          <Card className="bg-muted/40 border-dashed">
            <CardContent className="p-4 flex items-center gap-3">
              <ClipboardList className="w-5 h-5 text-primary shrink-0" />
              <div className="min-w-0 flex-1">
                <p className="text-sm font-semibold truncate">{title}</p>
                <p className="text-xs text-muted-foreground truncate">
                  {selectedClient?.name}
                  {selectedClient?.companyName
                    ? ` · ${selectedClient.companyName}`
                    : ""}{" "}
                  · {selectedService?.name} ·{" "}
                  <span className="font-medium">{priority}</span>
                  {dueDate &&
                    ` · Due ${new Date(dueDate).toLocaleDateString("en-IN", {
                      day: "2-digit",
                      month: "short",
                    })}`}
                </p>
              </div>
              <Button
                variant="ghost"
                size="sm"
                className="shrink-0 text-xs"
                onClick={() => setStep(1)}
              >
                Edit
              </Button>
            </CardContent>
          </Card>

          {/* Assignment */}
          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="flex items-center gap-2 text-base">
                <Building2 className="h-4 w-4 text-primary" /> Assignment
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                {/* Department */}
                <SearchDropdown
                  label="Department"
                  required
                  placeholder="Select department"
                  value={departmentId}
                  displayValue={selectedDept?.name}
                  open={deptOpen}
                  onOpenChange={setDeptOpen}
                  searchValue={deptSearchInput}
                  onSearchChange={setDeptSearchInput}
                  searchPlaceholder="Search department..."
                >
                  {filteredDepts.length === 0 ? (
                    <EmptyState search={deptSearchInput} />
                  ) : (
                    filteredDepts.map((d) => (
                      <DropdownItem
                        key={d.id}
                        selected={departmentId === d.id}
                        onClick={() => handleDepartmentChange(d.id)}
                      >
                        <Building2 className="w-3.5 h-3.5 text-muted-foreground shrink-0" />
                        <span className="truncate">{d.name}</span>
                      </DropdownItem>
                    ))
                  )}
                </SearchDropdown>

                {/* Employee */}
                <SearchDropdown
                  label="Assign Employee"
                  placeholder={
                    departmentId
                      ? "Select employee (optional)"
                      : "Select department first"
                  }
                  value={assignedEmployeeId}
                  displayValue={
                    selectedEmp ? (
                      <span className="flex items-center gap-1.5">
                        <User className="w-3.5 h-3.5 text-muted-foreground shrink-0" />
                        <span className="truncate">{selectedEmp.name}</span>
                      </span>
                    ) : undefined
                  }
                  open={empOpen}
                  onOpenChange={setEmpOpen}
                  searchValue={empSearchInput}
                  onSearchChange={handleEmpSearch}
                  searchPlaceholder="Search by name, email..."
                  disabled={!departmentId}
                >
                  {empFetching ? (
                    <div className="px-3 py-4 text-sm text-muted-foreground text-center">
                      Loading...
                    </div>
                  ) : deptEmployees.length === 0 ? (
                    <div className="px-3 py-5 text-center text-sm text-muted-foreground">
                      {empSearchInput.length > 0 &&
                      empSearchInput.length < 3 ? (
                        <span>
                          Type <strong>3+</strong> characters to search
                        </span>
                      ) : (
                        "No active employees in this department"
                      )}
                    </div>
                  ) : (
                    deptEmployees.map((emp) => (
                      <DropdownItem
                        key={emp.id}
                        selected={assignedEmployeeId === emp.id}
                        onClick={() => handleEmpSelect(emp.id)}
                      >
                        <User className="w-3.5 h-3.5 text-muted-foreground shrink-0" />
                        <div className="min-w-0 flex-1">
                          <p className="truncate">{emp.name}</p>
                          <p className="text-xs text-muted-foreground truncate">
                            {emp.email}
                          </p>
                        </div>
                        <span className="text-xs text-muted-foreground shrink-0">
                          {emp.role}
                        </span>
                      </DropdownItem>
                    ))
                  )}
                </SearchDropdown>
              </div>
            </CardContent>
          </Card>

          {/* Documents */}
          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="flex items-center gap-2 text-base">
                <FileText className="h-4 w-4 text-primary" /> Documents
              </CardTitle>
            </CardHeader>
            <CardContent>
              {loadingDocs ? (
                <p className="text-sm text-muted-foreground">
                  Loading document requirements...
                </p>
              ) : requirements.length === 0 ? (
                <p className="text-sm text-muted-foreground">
                  No specific documents required for this service.
                </p>
              ) : (
                <div className="space-y-2">
                  {requirements.map((doc) => (
                    <div
                      key={doc.id}
                      className={`flex items-center gap-3 rounded-lg border px-4 py-3 transition-colors ${
                        docFiles[doc.id]
                          ? "border-green-200 bg-green-500/5"
                          : "border-border bg-muted/20"
                      }`}
                    >
                      {/* Icon */}
                      <div className="shrink-0">
                        {docFiles[doc.id] ? (
                          <CheckCircle2 className="w-5 h-5 text-green-600" />
                        ) : (
                          <FileText className="w-5 h-5 text-muted-foreground" />
                        )}
                      </div>

                      {/* Name + file */}
                      <div className="min-w-0 flex-1">
                        <div className="flex items-center gap-2 flex-wrap">
                          <p className="text-sm font-medium">{doc.name}</p>
                          <Badge
                            variant={doc.isRequired ? "default" : "secondary"}
                            className="text-[10px]"
                          >
                            {doc.isRequired ? "Required" : "Optional"}
                          </Badge>
                        </div>
                        {docFiles[doc.id] && (
                          <p className="text-xs text-muted-foreground mt-0.5 truncate">
                            {docFiles[doc.id].name}
                          </p>
                        )}
                      </div>

                      {/* Action */}
                      <div className="shrink-0">
                        {docFiles[doc.id] ? (
                          <button
                            onClick={() => handleRequirementFile(doc.id, null)}
                            className="flex items-center gap-1 text-xs text-muted-foreground hover:text-destructive transition-colors border border-border rounded-md px-2 py-1"
                          >
                            <X className="w-3.5 h-3.5" /> Remove
                          </button>
                        ) : (
                          <label className="flex items-center gap-1.5 text-xs font-medium text-primary border border-primary/30 bg-primary/5 hover:bg-primary/10 rounded-md px-3 py-1.5 cursor-pointer transition-colors">
                            <UploadCloud className="w-3.5 h-3.5" /> Upload
                            <input
                              type="file"
                              hidden
                              onChange={(e) =>
                                handleRequirementFile(
                                  doc.id,
                                  e.target.files?.[0] ?? null
                                )
                              }
                            />
                          </label>
                        )}
                      </div>
                    </div>
                  ))}

                  {missingRequired.length > 0 && (
                    <div className="flex items-center gap-1.5 text-xs text-amber-600 bg-amber-500/10 rounded-md px-3 py-2 mt-1">
                      <AlertCircle className="w-3.5 h-3.5 shrink-0" />
                      Missing: {missingRequired.map((d) => d.name).join(", ")}
                    </div>
                  )}
                </div>
              )}
            </CardContent>
          </Card>

          <div className="flex items-center justify-end gap-3 pt-1">
            <Button
              variant="ghost"
              className="border border-border hover:bg-muted hover:text-foreground"
              onClick={() => router.back()}
            >
              Cancel
            </Button>
            <Button
              disabled={createTask.isPending || missingRequired.length > 0}
              onClick={handleSubmit}
            >
              {createTask.isPending && (
                <span className="w-4 h-4 border-2 border-primary-foreground border-t-transparent rounded-full animate-spin mr-2" />
              )}
              Create Task
            </Button>
          </div>
        </div>
      )}
    </div>
  );
}