"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Badge } from "@/components/ui/badge";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  ArrowLeft,
  Briefcase,
  Info,
  Plus,
  Trash2,
  FileText,
  CheckCircle2,
  ArrowRight,
} from "lucide-react";
import { useBulkUpsertDocuments } from "../hooks/service.hook";
import { serviceService } from "../services/service.service";
import { ServiceCategory, CreateServicePayload } from "../types/service.type";
import toast from "react-hot-toast";
import { useQueryClient } from "@tanstack/react-query";
import { capitalizeFirstLetter } from "@/lib/capitalize";

const CATEGORIES: { value: ServiceCategory; label: string }[] = [
  { value: "GST", label: "GST" },
  { value: "ITR", label: "ITR" },
  { value: "TDS", label: "TDS" },
  { value: "AUDIT", label: "Audit" },
  { value: "ROC", label: "ROC" },
  { value: "MSME", label: "MSME" },
  { value: "PAN", label: "PAN" },
  { value: "TAN", label: "TAN" },
  { value: "DSC", label: "DSC" },
  { value: "IEC", label: "IEC" },
  { value: "TRADEMARK", label: "Trademark" },
  { value: "OTHER", label: "Other" },
];

const FieldError = ({ msg }: { msg?: string }) =>
  msg ? <p className="mt-1 text-xs text-destructive">{msg}</p> : null;

type DocRow = { name: string; isRequired: boolean };

export function CreateServicePage() {
  const router = useRouter();
  const qc = useQueryClient();
  const [step, setStep] = useState<1 | 2>(1);
  const [createdServiceId, setCreatedServiceId] = useState<string>("");
  const [creating, setCreating] = useState(false);

  const [name, setName] = useState("");
  const [category, setCategory] = useState<ServiceCategory>("GST");
  const [price, setPrice] = useState("");
  const [description, setDescription] = useState("");
  const [isDiyEnabled, setIsDiyEnabled] = useState(false);
  const [errors, setErrors] = useState<Record<string, string>>({});

  const [docs, setDocs] = useState<DocRow[]>([{ name: "", isRequired: true }]);
  const [docErrors, setDocErrors] = useState<string[]>([]);

  const bulkUpsert = useBulkUpsertDocuments(createdServiceId, () =>
    router.push("/admin/services")
  );

  const validateStep1 = () => {
    const e: Record<string, string> = {};
    if (!name.trim()) e.name = "Service name is required";
    if (!price || isNaN(Number(price)) || Number(price) < 50)
      e.price = "Price must be at least ₹50";
    return e;
  };

  const handleStep1 = async () => {
    const e = validateStep1();
    if (Object.keys(e).length) {
      setErrors(e);
      return;
    }
    setErrors({});
    setCreating(true);
    try {
      const payload: CreateServicePayload = {
        name: capitalizeFirstLetter(name.trim()),
        category,
        price: Number(price),
        isDiyEnabled,
        ...(description.trim() ? { description: description.trim() } : {}),
      };
      const res = await serviceService.createService(payload);
      const id = (res as any)?.data?.id;
      if (id) {
        setCreatedServiceId(id);
        qc.invalidateQueries({ queryKey: ["services"] });
        setStep(2);
        toast.success("Service created! Now add required documents.");
      } else {
        qc.invalidateQueries({ queryKey: ["services"] });
        router.push("/admin/services");
      }
    } catch (err: any) {
      toast.error(err?.response?.data?.error || "Failed to create service");
    } finally {
      setCreating(false);
    }
  };

  const addDoc = () =>
    setDocs((prev) => [...prev, { name: "", isRequired: true }]);

  const removeDoc = (i: number) =>
    setDocs((prev) => prev.filter((_, idx) => idx !== i));

  const updateDoc = (i: number, field: keyof DocRow, value: any) => {
    setDocs((prev) =>
      prev.map((d, idx) => (idx === i ? { ...d, [field]: value } : d))
    );
    setDocErrors((prev) => {
      const n = [...prev];
      n[i] = "";
      return n;
    });
  };

  const handleStep2 = () => {
    const errs = docs.map((d) =>
      d.name.trim() ? "" : "Document name is required"
    );
    if (errs.some(Boolean)) {
      setDocErrors(errs);
      return;
    }
    const validDocs = docs.filter((d) => d.name.trim());
    if (!validDocs.length) {
      router.push("/admin/services");
      return;
    }
    bulkUpsert.mutate(validDocs);
  };

  const clearError = (key: string) =>
    setErrors((prev) => {
      const n = { ...prev };
      delete n[key];
      return n;
    });

  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">Add Service</h2>
        <p className="text-muted-foreground text-sm mt-0.5">
          {step === 1
            ? "Step 1 of 2 — Service Details"
            : "Step 2 of 2 — Required Documents"}
        </p>
      </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"
            }`}
          >
            Service 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"
            }`}
          >
            Required Documents
          </span>
        </div>
      </div>

      {step === 1 && (
        <div className="flex flex-col md:flex-row gap-5 items-start w-full">
          <div className="flex flex-col gap-4">
            <Card className="p-6 flex flex-col items-center gap-3 flex-1">
              <div className="w-20 h-20 rounded-xl bg-muted flex items-center justify-center">
                <Briefcase className="h-8 w-8 text-muted-foreground" />
              </div>
              <div className="text-center">
                <p className="text-sm font-semibold">{name || "New Service"}</p>
                <p className="text-xs text-muted-foreground">
                  {price
                    ? `₹${Number(price).toLocaleString("en-IN")}`
                    : "Price not set"}
                </p>
              </div>
            </Card>
            <div className="border rounded-xl 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">
                DIY enabled means clients can self-file using this service.
              </p>
            </div>
          </div>

          <Card className="p-6 flex flex-col w-full">
            <p className="text-sm font-semibold flex items-center gap-2 mb-5">
              <Briefcase className="h-4 w-4 text-primary" /> Service Details
            </p>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
              <div className="space-y-1.5">
                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                  Service Name <span className="text-destructive">*</span>
                </Label>
                <Input
                  placeholder="e.g. GST Filing"
                  value={name}
                  onChange={(e) => {
                    setName(e.target.value);
                    clearError("name");
                  }}
                  className={errors.name ? "border-destructive" : ""}
                />
                <FieldError msg={errors.name} />
              </div>

              <div className="space-y-1.5">
                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                  Price (₹) <span className="text-destructive">*</span>
                </Label>
                <Input
                  type="number"
                  placeholder="e.g. 2500"
                  value={price}
                  onChange={(e) => {
                    setPrice(e.target.value);
                    clearError("price");
                  }}
                  className={errors.price ? "border-destructive" : ""}
                  min={50}
                />
                <FieldError msg={errors.price} />
              </div>

              <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={category}
                  onValueChange={(v) => setCategory(v as ServiceCategory)}
                >
                  <SelectTrigger className="h-9 text-sm w-full">
                    <SelectValue placeholder="Select category" />
                  </SelectTrigger>
                  <SelectContent>
                    {CATEGORIES.map((c) => (
                      <SelectItem key={c.value} value={c.value}>
                        {c.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

              <div className="space-y-1.5">
                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                  DIY Enabled
                </Label>
                <Select
                  value={isDiyEnabled ? "true" : "false"}
                  onValueChange={(v) => setIsDiyEnabled(v === "true")}
                >
                  <SelectTrigger className="h-9 text-sm w-full">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="false">No</SelectItem>
                    <SelectItem value="true">Yes</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div className="space-y-1.5 sm:col-span-2">
                <Label className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                  Description
                </Label>
                <Textarea
                  placeholder="Brief description of the service..."
                  value={description}
                  onChange={(e) => setDescription(e.target.value)}
                  rows={3}
                  className="resize-none text-sm"
                />
              </div>
            </div>

            <div className="flex items-center justify-end gap-3 mt-8 pt-6">
              <Button
                type="button"
                variant="ghost"
                className="border border-border text-foreground hover:bg-muted"
                onClick={() => router.back()}
              >
                Cancel
              </Button>
              <Button type="button" onClick={handleStep1} disabled={creating}>
                {creating && (
                  <div className="w-4 h-4 border-2 border-primary-foreground border-t-transparent rounded-full animate-spin mr-2" />
                )}
                Next <ArrowRight className="h-4 w-4 ml-1.5" />
              </Button>
            </div>
          </Card>
        </div>
      )}

      {step === 2 && (
        <div className="flex flex-col md:flex-row gap-5 items-start w-full">
          <div className="flex flex-col gap-4">
            <Card 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">
                <FileText className="h-8 w-8 text-muted-foreground" />
              </div>
              <div className="text-center">
                <p className="text-sm font-semibold">{name}</p>
                <Badge variant="outline" className="text-[10px] mt-1">
                  {category}
                </Badge>
              </div>
            </Card>
            <div className="border rounded-xl 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">
                Add documents clients need to submit. Mark each as required or
                optional.
              </p>
            </div>
          </div>

          <Card className="p-6 flex flex-col w-full">
            <div className="flex items-center justify-between mb-5">
              <p className="text-sm font-semibold flex items-center gap-2">
                <FileText className="h-4 w-4 text-primary" /> Required Documents
              </p>
              <Button type="button" onClick={addDoc}>
                <Plus className="h-4 w-4 mr-1.5" />
                Add
              </Button>
            </div>

            <div className="space-y-3">
              {docs.map((doc, i) => (
                <div key={i} className="flex items-start gap-2">
                  <div className="flex-1 space-y-1">
                    <Input
                      placeholder="e.g. Sales Invoices, Bank Statement"
                      value={doc.name}
                      onChange={(e) => updateDoc(i, "name", e.target.value)}
                      className={`text-sm ${
                        docErrors[i] ? "border-destructive" : ""
                      }`}
                    />
                    {docErrors[i] && (
                      <p className="text-xs text-destructive">{docErrors[i]}</p>
                    )}
                  </div>
                  <Select
                    value={doc.isRequired ? "true" : "false"}
                    onValueChange={(v) =>
                      updateDoc(i, "isRequired", v === "true")
                    }
                  >
                    <SelectTrigger className="h-9 text-xs w-28 shrink-0">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="true">Required</SelectItem>
                      <SelectItem value="false">Optional</SelectItem>
                    </SelectContent>
                  </Select>
                  {docs.length > 1 && (
                    <Button
                      type="button"
                      variant="ghost"
                      size="icon"
                      className="h-9 w-9 text-destructive hover:text-destructive shrink-0"
                      onClick={() => removeDoc(i)}
                    >
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  )}
                </div>
              ))}
            </div>

            <div className="flex items-center justify-end gap-3 mt-8 pt-6">
              <Button
                type="button"
                variant="ghost"
                className="border border-border text-foreground hover:bg-muted"
                onClick={() => router.back()}
              >
                Cancel
              </Button>
              <Button
                type="button"
                onClick={handleStep2}
                disabled={bulkUpsert.isPending}
              >
                {bulkUpsert.isPending && (
                  <div className="w-4 h-4 border-2 border-primary-foreground border-t-transparent rounded-full animate-spin mr-2" />
                )}
                Create Service
              </Button>
            </div>
          </Card>
        </div>
      )}
    </div>
  );
}