"use client";

import { useMemo, useState } from "react";
import { useRouter } from "next/navigation";
import {
  ArrowLeft,
  UploadCloud,
  FileText,
  X,
  CheckCircle2,
  AlertCircle,
  ClipboardList,
  Info,
} 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 {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import {
  useCreateTaskWithDocuments,
  useGetAvailableServices,
  useGetServiceDetail,
} from "../hook/task.hook";

export function CreateTaskFlow({ onSuccess }: { onSuccess?: () => void }) {
  const router = useRouter();
  const { data: servicesRes } = useGetAvailableServices();
  const [serviceId, setServiceId] = useState("");
  const [selectedCategory, setSelectedCategory] = useState("");
  const { data: serviceDetailRes, isLoading: loadingDetail } =
    useGetServiceDetail(serviceId);

  const [title, setTitle] = useState("");
  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(() => {
    setServiceId("");
    setTitle("");
    setDescription("");
    setDueDate("");
    setDocFiles({});
    setOtherFiles([]);
    onSuccess?.();
    router.push("/client/tasks");
  });

  const services = useMemo(() => servicesRes?.data ?? [], [servicesRes]);

  const categories = useMemo(
    () => Array.from(new Set(services.map((s) => s.category))),
    [services]
  );

  const filteredServices = useMemo(
    () =>
      selectedCategory
        ? services.filter((s) => s.category === selectedCategory)
        : [],
    [services, selectedCategory]
  );

  const requirements = serviceDetailRes?.data.serviceDocuments ?? [];
  const missingRequired = requirements.filter(
    (r) => r.isRequired && !docFiles[r.id]
  );

  const handleCategoryChange = (category: string) => {
    setSelectedCategory(category);
    setServiceId("");
    setDocFiles({});
  };

  const handleServiceChange = (val: string) => {
    setServiceId(val);
    setDocFiles({});
  };

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

  const handleOtherFiles = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files)
      setOtherFiles((prev) => [...prev, ...Array.from(e.target.files!)]);
  };

  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);
  };

  const initials = title.trim().slice(0, 2).toUpperCase();
  const selectedService = services.find((s) => s.id === serviceId);

  return (
    <div className="space-y-4">
      <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-2xl font-bold tracking-tight">Create Task</h2>
        <p className="text-muted-foreground text-sm mt-0.5">
          Fill in the details to create a new service task
        </p>
      </div>

      <div className="flex flex-col md:flex-row gap-5 items-start w-full">
        {/* LEFT */}
        <div className="flex flex-col gap-4">
          <Card>
            <CardContent className="p-6 flex flex-col items-center gap-3">
              <div className="w-20 h-20 rounded-xl bg-muted flex items-center justify-center">
                {initials ? (
                  <span className="text-2xl font-bold text-primary">
                    {initials}
                  </span>
                ) : (
                  <ClipboardList className="h-8 w-8 text-muted-foreground" />
                )}
              </div>
              <div className="text-center">
                <p className="text-sm font-semibold">{title || "New Task"}</p>
                <p className="text-xs text-muted-foreground">
                  {selectedService?.name ?? "—"}
                </p>
              </div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-4 flex gap-3">
              <Info className="h-4 w-4 text-muted-foreground mt-0.5 shrink-0" />
              <p className="text-xs text-muted-foreground leading-relaxed">
                Tasks help you track service requests and manage required
                documents with your firm.
              </p>
            </CardContent>
          </Card>
        </div>

        {/* RIGHT */}
        <div className="flex flex-col gap-4 w-full max-w-lg">
          {/* Task Details */}
          <Card>
            <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="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div className="space-y-1.5">
                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                    Category <span className="text-destructive">*</span>
                  </Label>
                  <Select
                    value={selectedCategory}
                    onValueChange={handleCategoryChange}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Select category" />
                    </SelectTrigger>
                    <SelectContent>
                      {categories.map((cat) => (
                        <SelectItem key={cat} value={cat}>
                          {cat}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>

                <div className="space-y-1.5">
                  <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                    Service <span className="text-destructive">*</span>
                  </Label>
                  <Select
                    value={serviceId}
                    onValueChange={handleServiceChange}
                    disabled={!selectedCategory}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="Select service" />
                    </SelectTrigger>
                    <SelectContent>
                      {filteredServices.map((svc) => (
                        <SelectItem key={svc.id} value={svc.id}>
                          {svc.name}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              </div>

              <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>

              <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 more details about this task (optional)"
                  rows={3}
                />
              </div>

              <div className="space-y-1.5 sm:w-1/2">
                <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>
            </CardContent>
          </Card>

          {/* Documents */}
          {serviceId && (
            <Card>
              <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">
            <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>
      </div>
    </div>
  );
}