"use client";
import React, { useEffect, useState } from "react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { FaPlus, FaTrash, FaEdit } from "react-icons/fa";


interface SpecificationData {
  specificationParentTitle?: string;
  specificationTitle: string;
  titles: string[];
}

interface SpecificationFormProps {
  content: string | JSON;
  onUpdate: (content: string) => void;
}

const FilterSpecsForm: React.FC<SpecificationFormProps> = ({ content, onUpdate }) => {

  const [specificationParentTitle, setSpecificationParentTitle] = useState<string>("");

  const [specificationTitle, setSpecificationTitle] = useState<string>("");
  const [titles, setTitles] = useState<string[]>([""]);
  //   const [descriptions, setDescriptions] = useState<string[]>([""]);
  const [submittedData, setSubmittedData] = useState<SpecificationData[]>([]);
  const [editingIndex, setEditingIndex] = useState<number | null>(null);


  useEffect(() => {
    console.log(content)


    if (typeof content === "object") {

      var data = []

      console.log(content)
      console.log(Object.keys(content))
      console.log(Object.values(content))

      for (let i = 0; i < Object.entries(content).length; i++) {

        
        var keys = Object.keys(content)[i].split("-")

        const specData: SpecificationData = {
          specificationTitle: Object.keys(content)[i],
          titles: Object.values(Object.values(content)[i]),
        }
        data.push(specData)

      }

      // console.log(data)
      setSubmittedData(data)
      // WRITE CODE HERE

    }

  }, [content])

  const handleAddInput = () => {
    setTitles((prev) => [...prev, ""]);
  };

  const handleDeleteInput = (index: number) => {
    if (titles.length > 1) {
      setTitles((prev) => prev.filter((_, i) => i !== index));
    }
  };

  const handleSubmit = () => {
    const newData: SpecificationData = {
      specificationTitle: `${specificationParentTitle}-${specificationTitle}`,
      titles: [...titles],
    };

    console.log("newData:", newData);

    // create updated array before setting state
    const updatedData = [...submittedData, newData];

    setSubmittedData(updatedData);

    console.log("updatedData:", updatedData);

    setSpecificationParentTitle("");
    setSpecificationTitle("");
    setTitles([""]);

    // pass the fresh data to UpdateJSON
    UpdateJSON(updatedData);
  };


  const handleReset = () => {
    setSpecificationParentTitle("");
    setSpecificationTitle("");
    setTitles([""]);
  };

  const handleEdit = (index: number) => {
    const data = submittedData[index];

    setSpecificationParentTitle(data.specificationParentTitle || "");
    setSpecificationTitle(data.specificationTitle);
    setTitles(data.titles);
    setEditingIndex(index);
  };

  const handleUpdate = () => {
    if (editingIndex !== null) {
      const updatedData: SpecificationData = {
        specificationTitle: `${specificationParentTitle}-${specificationTitle}`,
        titles: [...titles],
      };


      setSubmittedData((prev) => {
        const newData = [...prev];
        newData[editingIndex] = updatedData;
        return newData;
      });

      setSpecificationTitle("");
      setTitles([""]);
      setEditingIndex(null);
    }
  };

  const handleDeleteSubmittedData = (index: number) => {
    setSubmittedData((prev) => prev.filter((_, i) => i !== index));
  };


  const generateJson = (subData: SpecificationData[]) => {
    const ds: Record<string, string[]> = {};

    console.log(submittedData);

    subData.forEach((data) => {
      console.log(data.specificationTitle);
      console.log(data.titles);

      ds[data.specificationTitle] = data.titles;

    })

    return ds;
  }

  const UpdateJSON = (updatedData: SpecificationData[]) => {
    const ds = generateJson(updatedData);
    console.log(ds);
    onUpdate(JSON.stringify(ds));
  };


  const onSubmit2 = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();

    UpdateJSON(submittedData)
  }

  return (
    <div className="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
      <div className="col-span-3">
        <label
          htmlFor="name"
          className="block text-sm/6 font-medium text-gray-900"
        >
          Filter Specification
        </label>

        <div className="mt-2">

          <input

            type="text"
            placeholder="Specification Parent Title"
            value={specificationParentTitle}
            onChange={(e) => setSpecificationParentTitle(e.target.value)}
            required
            className="block w-full rounded-md border bg-white px-3 py-1.5 mb-4 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-primary sm:text-sm/6"
          />

          <input
            type="text"
            placeholder="Specification Title"
            value={specificationTitle}
            onChange={(e) => setSpecificationTitle(e.target.value)}
            required
            className="block w-full rounded-md border bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-primary sm:text-sm/6"
          />
          {titles.map((_, index) => (
            <div key={index} className="flex gap-4 mt-4">
              <Input
                placeholder="Name"
                value={titles[index]}
                onChange={(e) => {
                  setTitles((prev) => {
                    const newTitles = [...prev];
                    newTitles[index] = e.target.value;
                    return newTitles;
                  });
                }}
              />
              {index > 0 && (
                <Button
                  variant="ghost"
                  onClick={() => handleDeleteInput(index)}
                  className="mb-4"
                >
                  <FaTrash className="h-4 w-4 hover:text-red-500" />
                </Button>
              )}
              {index === titles.length - 1 && (
                <Button
                  variant="ghost"
                  onClick={handleAddInput}
                  className="mb-4"
                >
                  <FaPlus className="h-4 w-4 hover:text-primary" />
                </Button>
              )}
            </div>
          ))}
        </div>
        <div className="flex gap-4">
          <Button
            type="button"
            onClick={editingIndex !== null ? handleUpdate : handleSubmit}
            className="text-white w-6/12 bg-primary hover:bg-secondary"
          >
            {editingIndex !== null ? "Update" : "Add"}
          </Button>
          <Button type="button" variant="outline" onClick={handleReset} className="w-6/12">
            Reset
          </Button>
        </div>
        <Button onClick={(e) => onSubmit2(e)} className="w-full text-white mt-4">
          Finish
        </Button>
      </div>


      <div className="col-span-3">
        <div className="p-4">
          <p className="text-md mb-4">Added Specification:</p>

          {/* Display submitted data */}
          <div className="max-h-[400px] overflow-y-auto">
            {submittedData.map((data, index) => (
              <div
                key={index}
                className="mb-4 p-4 border rounded-lg shadow flex justify-between items-start"
              >
                <div>
                  <h2 className="font-semibold">{data.specificationTitle}</h2>
                  {data.titles.map((title, idx) => (
                    <div key={idx} className="mt-2">
                      <p>
                        <strong>Title:</strong> {title}
                      </p>
                    </div>
                  ))}
                </div>
                <div className="flex gap-2">
                  <Button
                    type="button"
                    variant="ghost"
                    onClick={() => handleEdit(index)}
                  >
                    <FaEdit className="h-4 w-4 hover:text-yellow-400" />
                  </Button>
                  <Button
                    type="button"
                    variant="ghost"
                    onClick={() => handleDeleteSubmittedData(index)}
                  >
                    <FaTrash className="h-4 w-4 hover:text-red-500" />
                  </Button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default FilterSpecsForm;