"use client";

import { useEffect, 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 {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  ArrowLeft,
  Briefcase,
  Info,
  Plus,
  Trash2,
  FileText,
} from "lucide-react";
import { Skeleton } from "@/components/ui/skeleton";
import {
  useGetService,
  useUpdateService,
  useGetServiceDocuments,
  useBulkUpsertDocuments,
  useDeleteDocument,
} from "../hooks/service.hook";
import { ServiceCategory } from "../types/service.type";
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;

export function EditServicePage({ id }: { id: string }) {
  const router = useRouter();
  const { data: response, isLoading } = useGetService(id);
  const { data: docsResponse } = useGetServiceDocuments(id);
  const service = response?.data;

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

  const [form, setForm] = useState({
    name: "",
    category: "GST" as ServiceCategory,
    price: "",
    description: "",
    isDiyEnabled: false,
  });
  const [errors, setErrors] = useState<Record<string, string>>({});
  const [ready, setReady] = useState(false);
  const [docs, setDocs] = useState<DocRow[]>([]);
  const [docErrors, setDocErrors] = useState<string[]>([]);

  useEffect(() => {
    if (service && !ready) {
      setForm({
        name: service.name,
        category: service.category,
        price: String(service.price),
        description: service.description ?? "",
        isDiyEnabled: service.isDiyEnabled,
      });
      setReady(true);
    }
  }, [service, ready]);

  useEffect(() => {
    if (docsResponse?.data) {
      setDocs(
        docsResponse.data.map((d) => ({
          id: d.id,
          name: d.name,
          isRequired: d.isRequired,
        }))
      );
    }
  }, [docsResponse]);

  const { mutate, isPending } = useUpdateService();
  const bulkUpsert = useBulkUpsertDocuments(id);
  const deleteDoc = useDeleteDocument(id);

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

  const removeDoc = (i: number) => {
    const doc = docs[i];
    if (doc.id) {
      deleteDoc.mutate(doc.id);
    }
    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 validate = () => {
    const e: Record<string, string> = {};
    if (!form.name.trim()) e.name = "Service name is required";
    if (!form.price || isNaN(Number(form.price)) || Number(form.price) < 50)
      e.price = "Price must be at least ₹50";
    return e;
  };

  const handleSubmit = () => {
    const e = validate();
    if (Object.keys(e).length) {
      setErrors(e);
      return;
    }
    const docErrs = docs.map((d) =>
      d.name.trim() ? "" : "Document name is required"
    );
    if (docErrs.some(Boolean)) {
      setDocErrors(docErrs);
      return;
    }
    setErrors({});
    mutate(
      {
        id,
        payload: {
          name: capitalizeFirstLetter(form.name.trim()),
          category: form.category,
          price: Number(form.price),
          isDiyEnabled: form.isDiyEnabled,
          description: form.description.trim() || undefined,
        },
      },
      {
        onSuccess: () => {
          const validDocs = docs.filter((d) => d.name.trim());
          if (validDocs.length) {
            bulkUpsert.mutate(validDocs, {
              onSuccess: () => router.push("/admin/services"),
            });
          } else {
            router.push("/admin/services");
          }
        },
      }
    );
  };

  const set = (key: string, value: any) => {
    setForm((prev) => ({ ...prev, [key]: value }));
    setErrors((prev) => {
      const n = { ...prev };
      delete n[key];
      return n;
    });
  };

  if (isLoading) {
    return (
      <div className="space-y-4">
        <Skeleton className="h-8 w-24" />
        <div className="flex flex-col md:flex-row gap-5">
          <Skeleton className="h-48 md:w-56 w-full rounded-xl" />
          <Skeleton className="h-64 w-full rounded-xl" />
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-4">
      {/* Header */}
      <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">Edit Service</h2>
        <p className="text-muted-foreground text-sm mt-0.5">
          Update service details
        </p>
      </div>

      <div className="flex flex-col md:flex-row gap-5 items-start w-full">
        {" "}
        {/* LEFT CARD */}
        <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">{form.name || "Service"}</p>
              <p className="text-xs text-muted-foreground">
                {form.price
                  ? `₹${Number(form.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">
              Changes will be saved immediately after clicking Save Changes.
            </p>
          </div>
        </div>
        {/* RIGHT FORM */}
        <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
                htmlFor="name"
                className="text-xs font-semibold uppercase tracking-wide text-muted-foreground"
              >
                Service Name <span className="text-destructive">*</span>
              </Label>
              <Input
                id="name"
                value={form.name}
                onChange={(e) => set("name", e.target.value)}
                className={errors.name ? "border-destructive" : ""}
              />
              <FieldError msg={errors.name} />
            </div>

            <div className="space-y-1.5">
              <Label
                htmlFor="price"
                className="text-xs font-semibold uppercase tracking-wide text-muted-foreground"
              >
                Price (₹) <span className="text-destructive">*</span>
              </Label>
              <Input
                id="price"
                type="number"
                value={form.price}
                onChange={(e) => set("price", e.target.value)}
                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={form.category}
                onValueChange={(v) => set("category", v as ServiceCategory)}
              >
                <SelectTrigger className="h-9 text-sm w-full">
                  <SelectValue />
                </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={form.isDiyEnabled ? "true" : "false"}
                onValueChange={(v) => set("isDiyEnabled", 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
                value={form.description}
                onChange={(e) => set("description", e.target.value)}
                rows={3}
                className="resize-none text-sm"
              />
            </div>
          </div>

          {/* Documents Section */}
          <div className="mt-6 pt-5 border-t border-border">
            <div className="flex items-center justify-between mb-3">
              <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide flex items-center gap-1.5">
                <FileText className="h-3.5 w-3.5" /> Required Documents
              </p>
              <Button type="button" onClick={addDoc}>
                <Plus className="h-4 w-4 mr-1.5" />
                Add
              </Button>
            </div>
            {docs.length === 0 && (
              <p className="text-xs text-muted-foreground">
                No documents added yet.
              </p>
            )}
            <div className="space-y-2">
              {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"
                      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>
                  <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>

          <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.push("/admin/services")}
            >
              Cancel
            </Button>
            <Button type="button" onClick={handleSubmit} disabled={isPending}>
              {isPending && (
                <div className="w-4 h-4 border-2 border-primary-foreground border-t-transparent rounded-full animate-spin mr-2" />
              )}
              Save Changes
            </Button>
          </div>
        </Card>
      </div>
    </div>
  );
}