"use client";

import { FormEvent, useCallback, useEffect, useMemo, useState } from "react";
import { AlertTriangle, Edit3, Loader2, Plus, ShieldCheck, Trash2, X } from "lucide-react";
import { AdminGuard } from "@/components/admin/AdminGuard";
import { AdminShell } from "@/components/admin/AdminShell";
import { adminRequest, type AdminAmcPackage } from "@/lib/admin-api";

type AmcVehicleType = AdminAmcPackage["vehicleType"];

const amcVehicleTypes: AmcVehicleType[] = ["car", "bike", "ev-car", "ev-bike"];

type AmcFormState = {
  id?: number;
  vehicleType: AmcVehicleType;
  name: string;
  displayOrder: string;
  idealFor: string;
  includedText: string;
  additionalBenefitsText: string;
  premiumBenefitsText: string;
  exclusiveBenefitsText: string;
  notIncludedText: string;
  validityMonths: string;
  termsText: string;
  isActive: boolean;
};

const defaultTerms = [
  "Plan validity: 12 Months",
  "AMC is non-transferable",
  "Terms can be customized if required",
];

function linesToItems(value: string) {
  return value
    .split("\n")
    .map((line) => line.trim())
    .filter(Boolean);
}

function itemsToText(items?: string[]) {
  return (items ?? []).join("\n");
}

function findSection(servicePackage: AdminAmcPackage, heading: string) {
  return servicePackage.sections.find((section) => section.heading === heading)?.items ?? [];
}

function getVehicleLabel(vehicleType: AmcVehicleType) {
  if (vehicleType === "ev-car") {
    return "EV Car";
  }

  if (vehicleType === "ev-bike") {
    return "EV Bike";
  }

  return vehicleType === "car" ? "Car" : "Bike";
}

function createEmptyForm(vehicleType: AmcVehicleType, displayOrder: number): AmcFormState {
  return {
    vehicleType,
    name: "",
    displayOrder: String(displayOrder),
    idealFor: "",
    includedText: "",
    additionalBenefitsText: "",
    premiumBenefitsText: "",
    exclusiveBenefitsText: "",
    notIncludedText: "",
    validityMonths: "12",
    termsText: defaultTerms.join("\n"),
    isActive: true,
  };
}

function formFromPackage(servicePackage: AdminAmcPackage): AmcFormState {
  return {
    id: servicePackage.id,
    vehicleType: servicePackage.vehicleType,
    name: servicePackage.name,
    displayOrder: String(servicePackage.displayOrder),
    idealFor: servicePackage.idealFor,
    includedText: itemsToText(findSection(servicePackage, "What's Included")),
    additionalBenefitsText: itemsToText(findSection(servicePackage, "Additional Benefits")),
    premiumBenefitsText: itemsToText(findSection(servicePackage, "Premium Benefits")),
    exclusiveBenefitsText: itemsToText(findSection(servicePackage, "Exclusive Benefits")),
    notIncludedText: itemsToText(findSection(servicePackage, "Not Included")),
    validityMonths: String(servicePackage.validityMonths),
    termsText: itemsToText(servicePackage.terms),
    isActive: servicePackage.isActive,
  };
}

function buildSections(form: AmcFormState) {
  return [
    { heading: "What's Included", items: linesToItems(form.includedText) },
    { heading: "Additional Benefits", items: linesToItems(form.additionalBenefitsText) },
    { heading: "Premium Benefits", items: linesToItems(form.premiumBenefitsText) },
    { heading: "Exclusive Benefits", items: linesToItems(form.exclusiveBenefitsText) },
    { heading: "Not Included", items: linesToItems(form.notIncludedText) },
  ].filter((section) => section.items.length > 0);
}

export default function AdminAmcPackagesPage() {
  const [activeVehicleType, setActiveVehicleType] = useState<AmcVehicleType>("car");
  const [packages, setPackages] = useState<AdminAmcPackage[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [isSaving, setIsSaving] = useState(false);
  const [isDeletingId, setIsDeletingId] = useState<number | null>(null);
  const [errorMessage, setErrorMessage] = useState("");
  const [form, setForm] = useState<AmcFormState | null>(null);
  const [pendingDeletePackage, setPendingDeletePackage] = useState<AdminAmcPackage | null>(null);

  const nextDisplayOrder = useMemo(
    () =>
      packages.reduce(
        (highest, servicePackage) => Math.max(highest, servicePackage.displayOrder),
        0,
      ) + 1,
    [packages],
  );

  const loadPackages = useCallback(async () => {
    setIsLoading(true);
    setErrorMessage("");

    try {
      const data = await adminRequest<{ packages: AdminAmcPackage[] }>(
        `/api/admin/amc-packages?vehicleType=${activeVehicleType}`,
      );
      setPackages(data.packages);
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : "Could not load AMC packages");
    } finally {
      setIsLoading(false);
    }
  }, [activeVehicleType]);

  useEffect(() => {
    loadPackages();
  }, [loadPackages]);

  useEffect(() => {
    if (!form && !pendingDeletePackage) {
      return;
    }

    const previousOverflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";

    return () => {
      document.body.style.overflow = previousOverflow;
    };
  }, [form, pendingDeletePackage]);

  async function savePackage(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();

    if (!form) {
      return;
    }

    const sections = buildSections(form);

    if (sections.length === 0) {
      setErrorMessage("Add at least one AMC package section");
      return;
    }

    setIsSaving(true);
    setErrorMessage("");

    const payload = {
      vehicleType: form.vehicleType,
      name: form.name.trim(),
      displayOrder: Number(form.displayOrder || 999),
      idealFor: form.idealFor.trim(),
      sections,
      validityMonths: Number(form.validityMonths || 12),
      terms: linesToItems(form.termsText),
      isActive: form.isActive,
    };

    try {
      if (form.id) {
        await adminRequest(`/api/admin/amc-packages/${form.id}`, {
          method: "PUT",
          body: JSON.stringify(payload),
        });
      } else {
        await adminRequest("/api/admin/amc-packages", {
          method: "POST",
          body: JSON.stringify(payload),
        });
      }

      setForm(null);
      await loadPackages();
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : "Could not save AMC package");
    } finally {
      setIsSaving(false);
    }
  }

  async function deletePackage(servicePackage: AdminAmcPackage) {
    setIsDeletingId(servicePackage.id);
    setErrorMessage("");

    try {
      await adminRequest(`/api/admin/amc-packages/${servicePackage.id}`, {
        method: "DELETE",
      });
      setPendingDeletePackage(null);
      await loadPackages();
    } catch (error) {
      setErrorMessage(error instanceof Error ? error.message : "Could not delete AMC package");
    } finally {
      setIsDeletingId(null);
    }
  }

  return (
    <AdminGuard>
      <AdminShell
        title="AMC Packages"
        lead="Manage annual maintenance contract plans, validity, and benefits."
      >
        <section className="space-y-5">
          <div className="rounded-lg border border-border bg-white p-5 shadow-sm">
            <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
              <div className="flex items-center gap-3">
                <div className="grid h-11 w-11 place-items-center rounded-md bg-primary/10 text-primary">
                  <ShieldCheck className="h-5 w-5" />
                </div>
                <div>
                  <p className="text-xs font-black uppercase tracking-[0.16em] text-muted-foreground">
                    {getVehicleLabel(activeVehicleType)} AMC
                  </p>
                  <h2 className="mt-1 text-xl font-black tracking-tight text-foreground">
                    12-month plans and coverage details
                  </h2>
                </div>
              </div>
              <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
                <div className="flex gap-1 overflow-x-auto rounded-md border border-border bg-slate-50 p-1">
                  {amcVehicleTypes.map((vehicleType) => (
                    <button
                      key={vehicleType}
                      type="button"
                      onClick={() => {
                        setForm(null);
                        setPendingDeletePackage(null);
                        setActiveVehicleType(vehicleType);
                      }}
                      className={`h-9 w-24 shrink-0 rounded border px-3 text-sm font-black transition sm:w-28 ${
                        activeVehicleType === vehicleType
                          ? "border-primary bg-white text-foreground shadow-sm"
                          : "border-slate-300 bg-white text-muted-foreground hover:border-slate-400 hover:text-foreground"
                      }`}
                    >
                      {getVehicleLabel(vehicleType)}
                    </button>
                  ))}
                </div>
                <button
                  type="button"
                  onClick={() => setForm(createEmptyForm(activeVehicleType, nextDisplayOrder))}
                  className="inline-flex h-11 items-center justify-center gap-2 rounded-md bg-primary px-4 text-sm font-black text-primary-foreground transition hover:opacity-95"
                >
                  <Plus className="h-4 w-4" />
                  Add AMC package
                </button>
              </div>
            </div>
          </div>

          {errorMessage ? (
            <div className="flex items-center gap-2 rounded-lg border border-red-200 bg-red-50 p-4 text-sm font-bold text-red-700">
              <AlertTriangle className="h-4 w-4 shrink-0" />
              {errorMessage}
            </div>
          ) : null}

          {isLoading ? (
            <div className="grid min-h-56 place-items-center rounded-lg border border-border bg-white">
              <Loader2 className="h-6 w-6 animate-spin text-primary" />
            </div>
          ) : (
            <div className="grid gap-4 xl:grid-cols-2">
              {packages.length === 0 ? (
                <div className="grid min-h-44 place-items-center rounded-lg border border-dashed border-border bg-white p-6 text-center">
                  <div>
                    <ShieldCheck className="mx-auto h-6 w-6 text-muted-foreground" />
                    <p className="mt-3 text-sm font-black text-foreground">
                      No {getVehicleLabel(activeVehicleType).toLowerCase()} AMC packages yet.
                    </p>
                  </div>
                </div>
              ) : null}

              {packages.map((servicePackage) => (
                <article
                  key={servicePackage.id}
                  className="rounded-lg border border-border bg-white p-5 shadow-sm"
                >
                  <div className="flex items-start justify-between gap-4">
                    <div className="min-w-0">
                      <div className="flex flex-wrap items-center gap-2">
                        <span className="inline-flex rounded-md bg-primary/10 px-2.5 py-1 text-xs font-black text-primary">
                          #{servicePackage.displayOrder}
                        </span>
                        <span
                          className={`inline-flex rounded-full px-2.5 py-1 text-xs font-black ${
                            servicePackage.isActive
                              ? "bg-emerald-50 text-emerald-700"
                              : "bg-slate-100 text-muted-foreground"
                          }`}
                        >
                          {servicePackage.isActive ? "Active" : "Inactive"}
                        </span>
                      </div>
                      <h3 className="mt-3 text-xl font-black tracking-tight text-foreground">
                        {servicePackage.name}
                      </h3>
                      <p className="mt-2 text-sm font-semibold leading-6 text-muted-foreground">
                        Ideal for: {servicePackage.idealFor}
                      </p>
                    </div>
                    <div className="flex shrink-0 gap-2">
                      <button
                        type="button"
                        onClick={() => setForm(formFromPackage(servicePackage))}
                        className="grid h-9 w-9 place-items-center rounded-md border border-border text-muted-foreground transition hover:bg-slate-100 hover:text-foreground"
                        aria-label={`Edit ${servicePackage.name}`}
                      >
                        <Edit3 className="h-4 w-4" />
                      </button>
                      <button
                        type="button"
                        onClick={() => setPendingDeletePackage(servicePackage)}
                        className="grid h-9 w-9 place-items-center rounded-md border border-red-200 text-red-600 transition hover:bg-red-50"
                        aria-label={`Delete ${servicePackage.name}`}
                      >
                        <Trash2 className="h-4 w-4" />
                      </button>
                    </div>
                  </div>

                  <div className="mt-5 grid gap-4 md:grid-cols-2">
                    {servicePackage.sections.map((section) => (
                      <div key={section.heading} className="rounded-md bg-slate-50 p-4">
                        <h4 className="text-sm font-black text-foreground">{section.heading}</h4>
                        <ul className="mt-3 space-y-2 text-sm font-semibold leading-6 text-muted-foreground">
                          {section.items.map((item) => (
                            <li key={item}>{item}</li>
                          ))}
                        </ul>
                      </div>
                    ))}
                  </div>

                  <div className="mt-5 rounded-md border border-border p-4">
                    <h4 className="text-sm font-black text-foreground">Validity & Terms</h4>
                    <p className="mt-2 text-sm font-bold text-muted-foreground">
                      Validity: {servicePackage.validityMonths} Months
                    </p>
                    <ul className="mt-2 space-y-1 text-sm font-semibold text-muted-foreground">
                      {servicePackage.terms.map((term) => (
                        <li key={term}>{term}</li>
                      ))}
                    </ul>
                  </div>
                </article>
              ))}
            </div>
          )}
        </section>

        {form ? (
          <div className="fixed inset-0 z-[70] grid place-items-center overflow-y-auto bg-slate-950/45 px-4 py-6">
            <form
              onSubmit={savePackage}
              className="w-full max-w-3xl rounded-lg border border-border bg-white p-5 shadow-2xl"
            >
              <div className="flex items-start justify-between gap-4">
                <div>
                  <p className="text-xs font-black uppercase tracking-[0.16em] text-primary">
                    {form.id ? "Edit AMC package" : "Add AMC package"}
                  </p>
                  <h2 className="mt-1 text-xl font-black tracking-tight text-foreground">
                    {getVehicleLabel(form.vehicleType)} annual maintenance plan
                  </h2>
                </div>
                <button
                  type="button"
                  onClick={() => setForm(null)}
                  className="grid h-9 w-9 place-items-center rounded-md text-muted-foreground hover:bg-slate-100"
                  aria-label="Close AMC package form"
                >
                  <X className="h-5 w-5" />
                </button>
              </div>

              <div className="mt-5 grid gap-4 md:grid-cols-2">
                <Field label="Plan name">
                  <input
                    value={form.name}
                    onChange={(event) => setForm({ ...form, name: event.target.value })}
                    className="h-11 rounded-md border border-border px-3 text-sm font-semibold outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/15"
                    required
                  />
                </Field>
                <Field label="Display order">
                  <input
                    value={form.displayOrder}
                    onChange={(event) => setForm({ ...form, displayOrder: event.target.value })}
                    type="number"
                    min="1"
                    className="h-11 rounded-md border border-border px-3 text-sm font-semibold outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/15"
                    required
                  />
                </Field>
                <Field label="Ideal for">
                  <textarea
                    value={form.idealFor}
                    onChange={(event) => setForm({ ...form, idealFor: event.target.value })}
                    className="min-h-24 rounded-md border border-border px-3 py-2 text-sm font-semibold outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/15"
                    required
                  />
                </Field>
                <Field label="Validity months">
                  <input
                    value={form.validityMonths}
                    onChange={(event) => setForm({ ...form, validityMonths: event.target.value })}
                    type="number"
                    min="1"
                    className="h-11 rounded-md border border-border px-3 text-sm font-semibold outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/15"
                    required
                  />
                </Field>
              </div>

              <div className="mt-4 grid gap-4 md:grid-cols-2">
                <TextareaField
                  label="What's Included"
                  value={form.includedText}
                  onChange={(value) => setForm({ ...form, includedText: value })}
                  required
                />
                <TextareaField
                  label="Additional Benefits"
                  value={form.additionalBenefitsText}
                  onChange={(value) => setForm({ ...form, additionalBenefitsText: value })}
                />
                <TextareaField
                  label="Premium Benefits"
                  value={form.premiumBenefitsText}
                  onChange={(value) => setForm({ ...form, premiumBenefitsText: value })}
                />
                <TextareaField
                  label="Exclusive Benefits"
                  value={form.exclusiveBenefitsText}
                  onChange={(value) => setForm({ ...form, exclusiveBenefitsText: value })}
                />
                <TextareaField
                  label="Not Included"
                  value={form.notIncludedText}
                  onChange={(value) => setForm({ ...form, notIncludedText: value })}
                />
                <TextareaField
                  label="Validity & Terms"
                  value={form.termsText}
                  onChange={(value) => setForm({ ...form, termsText: value })}
                />
              </div>

              <label className="mt-4 flex items-center gap-3 rounded-md border border-border bg-slate-50 p-3">
                <input
                  checked={form.isActive}
                  onChange={(event) => setForm({ ...form, isActive: event.target.checked })}
                  type="checkbox"
                  className="h-4 w-4 accent-primary"
                />
                <span className="text-sm font-bold text-foreground">Active for customers</span>
              </label>

              <div className="mt-6 flex justify-end gap-2">
                <button
                  type="button"
                  onClick={() => setForm(null)}
                  className="h-10 rounded-md border border-border px-4 text-sm font-black text-muted-foreground transition hover:bg-slate-100 hover:text-foreground"
                >
                  Cancel
                </button>
                <button
                  type="submit"
                  disabled={isSaving}
                  className="inline-flex h-10 items-center gap-2 rounded-md bg-primary px-4 text-sm font-black text-primary-foreground transition hover:opacity-95 disabled:cursor-not-allowed disabled:opacity-60"
                >
                  {isSaving ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
                  Save AMC package
                </button>
              </div>
            </form>
          </div>
        ) : null}

        {pendingDeletePackage ? (
          <div className="fixed inset-0 z-[70] grid place-items-center bg-slate-950/45 px-4">
            <div className="w-full max-w-sm rounded-lg border border-border bg-white p-5 shadow-2xl">
              <div className="grid h-11 w-11 place-items-center rounded-md bg-red-50 text-red-600">
                <Trash2 className="h-5 w-5" />
              </div>
              <h2 className="mt-4 text-xl font-black tracking-tight text-foreground">
                Delete AMC package?
              </h2>
              <p className="mt-2 text-sm leading-6 text-muted-foreground">
                This will remove {pendingDeletePackage.name} from{" "}
                {getVehicleLabel(pendingDeletePackage.vehicleType).toLowerCase()} AMC packages.
              </p>
              <div className="mt-5 flex justify-end gap-2">
                <button
                  type="button"
                  onClick={() => setPendingDeletePackage(null)}
                  className="h-10 rounded-md border border-border px-4 text-sm font-black text-muted-foreground transition hover:bg-slate-100 hover:text-foreground"
                >
                  Cancel
                </button>
                <button
                  type="button"
                  onClick={() => deletePackage(pendingDeletePackage)}
                  disabled={isDeletingId === pendingDeletePackage.id}
                  className="inline-flex h-10 items-center gap-2 rounded-md bg-red-600 px-4 text-sm font-black text-white transition hover:bg-red-700 disabled:cursor-not-allowed disabled:opacity-60"
                >
                  {isDeletingId === pendingDeletePackage.id ? (
                    <Loader2 className="h-4 w-4 animate-spin" />
                  ) : null}
                  Delete
                </button>
              </div>
            </div>
          </div>
        ) : null}
      </AdminShell>
    </AdminGuard>
  );
}

function Field({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <label className="grid gap-2">
      <span className="text-xs font-black uppercase tracking-[0.14em] text-muted-foreground">
        {label}
      </span>
      {children}
    </label>
  );
}

function TextareaField({
  label,
  value,
  onChange,
  required = false,
}: {
  label: string;
  value: string;
  onChange: (value: string) => void;
  required?: boolean;
}) {
  return (
    <label className="grid gap-2">
      <span className="text-xs font-black uppercase tracking-[0.14em] text-muted-foreground">
        {label}
      </span>
      <textarea
        value={value}
        onChange={(event) => onChange(event.target.value)}
        className="min-h-32 rounded-md border border-border px-3 py-2 text-sm font-semibold outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/15"
        placeholder="One item per line"
        required={required}
      />
    </label>
  );
}