"use client";

import { useEffect, useState } from "react";
import api from "@/lib/api";
import toast from "react-hot-toast";
/* ---------------- TYPES ---------------- */

type ProductType = "simple" | "variable";

interface ProductFormData {
  name: string;
  sku: string;
  category_id: string;
  brand_id: string;
  short_description: string;
  description: string;
  price: string;
  sale_price: string;
  unit_type: string;
  unit_value: string;
  stock_quantity: string;
  stock_status: string;
  product_type: ProductType;
}

interface Option {
  id: number;
  name: string;
}

interface ProductFormProps {
  product?: any;
  onSubmit: (data: FormData) => Promise<void>;
}

/* ---------------- COMPONENT ---------------- */

export default function ProductForm({
  product,
  onSubmit,
}: ProductFormProps) {
  const [categories, setCategories] = useState<Option[]>([]);
  const [brands, setBrands] = useState<Option[]>([]);
  const [attributes, setAttributes] = useState<any[]>([]);

  const [selectedValues, setSelectedValues] = useState<
    Record<number, number[]>
  >({});

  const [form, setForm] = useState<ProductFormData>({
    name: "",
    sku: "",
    category_id: "",
    brand_id: "",
    short_description: "",
    description: "",
    price: "",
    sale_price: "",
    unit_type: "piece",
    unit_value: "1",
    stock_quantity: "0",
    stock_status: "in_stock",
    product_type: "simple",
  });

  const [images, setImages] = useState<File[]>([]);
  const [loading, setLoading] = useState<boolean>(false);

  /* ---------------- LOAD DATA ---------------- */

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

  useEffect(() => {
    if (product) {
      setForm({
        name: product.name ?? "",
        sku: product.sku ?? "",
        category_id: product.category_id ?? "",
        brand_id: product.brand_id ?? "",
        short_description: product.short_description ?? "",
        description: product.description ?? "",
        price: product.price ?? "",
        sale_price: product.sale_price ?? "",
        unit_type: product.unit_type ?? "piece",
        unit_value: product.unit_value ?? "1",
        stock_quantity: product.stock_quantity ?? "0",
        stock_status: product.stock_status ?? "in_stock",
        product_type: product.product_type ?? "simple",
      });

      if (product.selected_attributes) {
        const temp: Record<number, number[]> = {};

        product.selected_attributes.forEach((attr: any) => {
          temp[attr.id] = attr.values.map((v: any) => v.id);
        });

        setSelectedValues(temp);
      }
    }
  }, [product]);

  const loadInitialData = async (): Promise<void> => {
    try {
      const token = localStorage.getItem("auth_token");

      const [catRes, brandRes, attrRes] = await Promise.all([
        api.get("/vendor/categories", {
          headers: { Authorization: `Bearer ${token}` },
        }),
        api.get("/vendor/brands", {
          headers: { Authorization: `Bearer ${token}` },
        }),
        api.get("/vendor/attributes", {
          headers: { Authorization: `Bearer ${token}` },
        }),
      ]);

      setCategories(catRes.data.data ?? []);
      setBrands(brandRes.data.data ?? []);
      setAttributes(attrRes.data.data ?? []);
    } catch (err) {
      console.log(err);
    }
  };

  /* ---------------- ATTRIBUTES ---------------- */

  const handleAttributeChange = (
    attributeId: number,
    valueId: number
  ): void => {
    setSelectedValues((prev) => {
      const current = prev[attributeId] ?? [];

      return {
        ...prev,
        [attributeId]: current.includes(valueId)
          ? current.filter((v) => v !== valueId)
          : [...current, valueId],
      };
    });
  };

  /* ---------------- SUBMIT ---------------- */

  const submit = async (): Promise<void> => {
    try {
      setLoading(true);

      const data = new FormData();

      Object.entries(form).forEach(([key, value]) => {
        data.append(key, String(value));
      });

      images.forEach((img) => {
        data.append("images[]", img);
      });

      Object.keys(selectedValues).forEach((attrId) => {
        data.append("selected_attributes[]", attrId);
      });

      Object.entries(selectedValues).forEach(
        ([attrId, values]) => {
          values.forEach((valueId) => {
            data.append(
              `selected_values[${attrId}][]`,
              String(valueId)
            );
          });
        }
      );

      await onSubmit(data);
    } catch (err) {
      console.log(err);
      toast.error("Failed to save product / you have no permission yet");
    } finally {
      setLoading(false);
    }
  };

  /* ---------------- UI ---------------- */

  return (
    <div className="bg-white rounded-2xl border p-6">

      <h2 className="text-2xl font-bold mb-6">
        Product Information
      </h2>

      {/* GRID INPUTS */}
      <div className="grid md:grid-cols-2 gap-4">

        <Input
          label="Product Name"
          value={form.name}
          onChange={(v: string) =>
            setForm({ ...form, name: v })
          }
        />

        <Input
          label="SKU"
          value={form.sku}
          onChange={(v: string) =>
            setForm({ ...form, sku: v })
          }
        />

        <Select
          label="Category"
          value={form.category_id}
          options={categories}
          onChange={(v: string) =>
            setForm({ ...form, category_id: v })
          }
        />

        <Select
          label="Brand"
          value={form.brand_id}
          options={brands}
          onChange={(v: string) =>
            setForm({ ...form, brand_id: v })
          }
        />

        <Input
          label="Price"
          value={form.price}
          onChange={(v: string) =>
            setForm({ ...form, price: v })
          }
        />

        <Input
          label="Sale Price"
          value={form.sale_price}
          onChange={(v: string) =>
            setForm({ ...form, sale_price: v })
          }
        />

        <Input
          label="Stock Quantity"
          value={form.stock_quantity}
          onChange={(v: string) =>
            setForm({
              ...form,
              stock_quantity: v,
            })
          }
        />

        <div>
            <label className="font-bold">
              Stock Status
            </label>

            <select
              value={form.stock_status}
              onChange={(e) =>
                setForm({
                  ...form,
                  stock_status: e.target.value,
                })
              }
              className="w-full border p-3 rounded"
            >
              <option value="in_stock">
                In Stock
              </option>

              <option value="out_of_stock">
                Out Of Stock
              </option>
            </select>
          </div>

        <Input
          label="Unit Type"
          value={form.unit_type}
          onChange={(v: string) =>
            setForm({ ...form, unit_type: v })
          }
        />

        <Input
          label="Unit Value"
          value={form.unit_value}
          onChange={(v: string) =>
            setForm({ ...form, unit_value: v })
          }
        />
      </div>

      {/* PRODUCT TYPE */}
      <div className="mt-4">
        <label className="font-bold">Product Type</label>

        <select
          value={form.product_type}
          onChange={(e) =>
            setForm({
              ...form,
              product_type: e.target.value as ProductType,
            })
          }
          className="w-full border p-3 rounded"
        >
          <option value="simple">Simple</option>
          <option value="variable">Variable</option>
        </select>
      </div>

      {/* ATTRIBUTES */}
      {form.product_type === "variable" && (
        <div className="mt-4">
          <h3 className="font-bold mb-2">
            Attributes
          </h3>

          {attributes.map((attr: any) => (
            <div key={attr.id} className="mb-3">
              <p className="font-semibold">
                {attr.name}
              </p>

              <div className="flex gap-2 flex-wrap">
                {attr.values.map((val: any) => (
                  <label
                    key={val.id}
                    className="border px-2 py-1 rounded"
                  >
                    <input
                      type="checkbox"
                      checked={
                        selectedValues[attr.id]?.includes(val.id) ??
                        false
                      }
                      onChange={() =>
                        handleAttributeChange(attr.id, val.id)
                      }
                    />
                    {val.value}
                  </label>
                ))}
              </div>
            </div>
          ))}
        </div>
      )}

      <div className="mt-6">
        <label className="font-bold block mb-2">
          Short Description
        </label>

        <textarea
          rows={3}
          value={form.short_description}
          onChange={(e) =>
            setForm({
              ...form,
              short_description: e.target.value,
            })
          }
          className="w-full border border-gray-300 p-4 rounded-xl"
          placeholder="Short product summary..."
        />
      </div>

      {/* DESCRIPTION */}
      <div className="mt-6">
        <label className="font-bold block mb-2">
          Description
        </label>

        <textarea
          rows={5}
          value={form.description}
          onChange={(e) =>
            setForm({
              ...form,
              description: e.target.value,
            })
          }
          placeholder="Write product description..."
          className="w-full border border-gray-300 focus:border-green-500 focus:ring-2 focus:ring-green-100 p-4 rounded-xl outline-none transition"
        />
      </div>

      {/* IMAGE UPLOAD */}
      <div className="mt-6">
        <label className="font-bold block mb-2">
          Product Images
        </label>

        <div className="border-2 border-dashed border-gray-300 rounded-xl p-6 text-center hover:border-green-500 transition cursor-pointer">
          <input
            type="file"
            multiple
            className="hidden"
            id="imageUpload"
            onChange={(e) =>
              setImages(Array.from(e.target.files ?? []))
            }
          />

          <label htmlFor="imageUpload" className="cursor-pointer">
            <p className="text-gray-500">
              Click to upload or drag images here
            </p>

            <p className="text-sm text-gray-400 mt-1">
              PNG, JPG (multiple allowed)
            </p>
          </label>
        </div>

        {/* PREVIEW */}
        {images.length > 0 && (
          <div className="flex gap-3 mt-4 flex-wrap">
            {images.map((img, i) => (
              <div key={i} className="relative">

                {/* IMAGE */}
                <img
                  src={URL.createObjectURL(img)}
                  className="w-20 h-20 object-cover rounded-lg border"
                />

                {/* REMOVE BUTTON */}
                <button
                  type="button"
                  onClick={() => {
                    setImages((prev) =>
                      prev.filter((_, index) => index !== i)
                    );
                  }}
                  className="absolute -top-2 -right-2 bg-red-600 text-white w-5 h-5 flex items-center justify-center rounded-full text-xs shadow"
                >
                  ✕
                </button>

              </div>
            ))}
          </div>
        )}
      </div>

      {/* SUBMIT BUTTON */}
      <div className="mt-8">
        <button
          onClick={submit}
          disabled={loading}
          className="w-full bg-green-600 hover:bg-green-700 transition text-white py-3 rounded-xl font-bold text-lg shadow"
        >
          {loading ? "Saving..." : "Save Product"}
        </button>
      </div>
     </div>
  );
}

/* ---------------- INPUT ---------------- */

function Input({
  label,
  value,
  onChange,
}: {
  label: string;
  value: string;
  onChange: (v: string) => void;
}) {
  return (
    <div>
      <label className="font-bold">{label}</label>
      <input
        value={value}
        onChange={(e) => onChange(e.target.value)}
        className="w-full border p-3 rounded"
      />
    </div>
  );
}

/* ---------------- SELECT ---------------- */

function Select({
  label,
  value,
  options,
  onChange,
}: {
  label: string;
  value: string;
  options: Option[];
  onChange: (v: string) => void;
}) {
  return (
    <div>
      <label className="font-bold">{label}</label>
      <select
        value={value}
        onChange={(e) => onChange(e.target.value)}
        className="w-full border p-3 rounded"
      >
        <option value="">Select</option>
        {options.map((o) => (
          <option key={o.id} value={o.id}>
            {o.name}
          </option>
        ))}
      </select>
    </div>
  );
}