"use client";

import { useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import {
  ArrowLeft,
  FileText,
  X,
  CheckCircle2,
  AlertCircle,
} 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 {
  useCreateTaskWithDocuments,
  useGetServiceDetail,
} from "../hook/task.hook";

export function CreateTaskForm() {
  const router = useRouter();
  const searchParams = useSearchParams();

  const serviceId = searchParams.get("serviceId") ?? "";
  const serviceName = searchParams.get("title") ?? "";
  const serviceCategory = searchParams.get("category") ?? "";

  const { data: serviceDetailRes, isLoading: loadingDetail } =
    useGetServiceDetail(serviceId);

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

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

  const createTask = useCreateTaskWithDocuments(() => {
    router.push("/client/tasks");
  });

  const requirements = serviceDetailRes?.data.serviceDocuments ?? [];
  const missingRequired = requirements.filter(
    (r) => r.isRequired && !docFiles[r.id]
  );
  const initials = title.trim().slice(0, 2).toUpperCase();

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

  const handleSubmit = () => {
    if (!title.trim()) {
      setTitleError("Task title is required");
      return;
    }
    if (!serviceId) return;

    const formData = new FormData();
    formData.append("serviceId", serviceId);
    formData.append("title", title.trim());
    if (description.trim()) formData.append("description", description.trim());
    if (dueDate) formData.append("dueDate", dueDate);
    Object.entries(docFiles).forEach(([id, file]) => formData.append(id, file));
    otherFiles.forEach((file) => formData.append("other", file));

    createTask.mutate(formData);
  };

  if (!serviceId) {
    return (
      <div className="py-16 text-center space-y-3">
        <p className="text-sm font-semibold text-muted-foreground">
          No service selected
        </p>
        <Button
          variant="outline"
          size="sm"
          onClick={() => router.push("/client/services")}
        >
          Choose a Service
        </Button>
      </div>
    );
  }

  return (
    <div className="space-y-4">
      <div>
        <button
          onClick={() => router.back()}
          className="text-muted-foreground hover:text-foreground mt-2 flex items-center gap-1 text-sm"
        >
          <ArrowLeft className="h-4 w-4" /> Back
        </button>
        <h2 className="text-2xl font-bold tracking-tight">Create Task</h2>

        <p className="text-muted-foreground text-sm mt-0.5">
          Create a new task for{" "}
          <span className="font-medium">
            {serviceName || "the selected service"}
          </span>
          .
        </p>
      </div>

      {/* Task Details */}
      <Card className="w-full">
        <CardHeader className="pb-3">
          <CardTitle className="flex items-center gap-2">
            {/* <ClipboardList className="h-4 w-4 text-primary" />
        Task Details */}
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <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}
              readOnly
              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>

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

      {/* Documents */}
      <Card className="w-full">
        <CardHeader className="pb-3">
          <CardTitle className="text-base">Documents</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          {loadingDetail ? (
            <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">
              <p className="text-xs text-muted-foreground font-medium uppercase tracking-wide">
                Required Documents
              </p>
              {requirements.map((doc) => (
                <div
                  key={doc.id}
                  className={`flex items-center justify-between rounded-lg border px-3 py-2.5 transition-colors ${
                    docFiles[doc.id]
                      ? "border-green-200 bg-green-500/5"
                      : "border-border"
                  }`}
                >
                  <div className="flex items-center gap-2.5 min-w-0">
                    {docFiles[doc.id] ? (
                      <CheckCircle2 className="w-4 h-4 text-green-600 shrink-0" />
                    ) : (
                      <FileText className="w-4 h-4 text-muted-foreground shrink-0" />
                    )}
                    <div className="min-w-0">
                      <p className="text-sm font-medium truncate">{doc.name}</p>
                      {docFiles[doc.id] && (
                        <p className="text-xs text-muted-foreground truncate">
                          {docFiles[doc.id].name}
                        </p>
                      )}
                    </div>
                    <Badge
                      variant={doc.isRequired ? "default" : "secondary"}
                      className="text-[10px] shrink-0"
                    >
                      {doc.isRequired ? "Required" : "Optional"}
                    </Badge>
                  </div>

                  <div className="flex items-center gap-1 shrink-0 ml-2">
                    {docFiles[doc.id] ? (
                      <button
                        onClick={() => handleRequirementFile(doc.id, null)}
                        className="text-muted-foreground hover:text-destructive transition-colors"
                        aria-label="Remove file"
                      >
                        <X className="w-4 h-4" />
                      </button>
                    ) : (
                      <label className="text-xs text-primary font-medium cursor-pointer hover:underline">
                        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">
                  <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-2 w-full">
        <Button
          variant="ghost"
          className="border border-border hover:bg-muted hover:text-foreground"
          onClick={() => router.back()}
        >
          Cancel
        </Button>
        <Button
          disabled={!serviceId || !title.trim() || createTask.isPending}
          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>
  );
}