"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";
import { object } from "zod";
import { set } from "date-fns";

interface SpecificationData {
  specificationTitle: string;
  titles: string[];
  descriptions: string[];
}

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

const SpecificationForm: React.FC<SpecificationFormProps> = ({ content, onUpdate }) => {
  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)
    // setSubmittedData(content as SpecificationData[])

    

    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.keys(content).length; i++){
          
          const specData: SpecificationData = {
            specificationTitle: Object.keys(content)[i],
            titles: Object.keys(Object.values(content)[i]),
            descriptions: Object.values(Object.values(content)[i])
          }
          data.push(specData)

      }

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

    }

  }, [content])

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

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

  const handleSubmit = () => {
    const newData: SpecificationData = {
      specificationTitle,
      titles: [...titles],
      descriptions: [...descriptions],
    };

    setSubmittedData((prev) => [...prev, newData]);

    console.log(submittedData)

    setSpecificationTitle("");
    setTitles([""]);
    setDescriptions([""]);
  };

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

  const handleEdit = (index: number) => {
    const data = submittedData[index];
    setSpecificationTitle(data.specificationTitle);
    setTitles(data.titles);
    setDescriptions(data.descriptions);
    setEditingIndex(index);
  };

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

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

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

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


  const generateJson = () => {

    var obj: Record<string, Record<string, string>> = {};

    for (var i = 0; i < submittedData.length; i++) {
      var obj2: { [key: string]: string } = {};
      for (var j = 0; j < submittedData[i].titles.length; j++) {
        obj2[submittedData[i].titles[j]] = submittedData[i].descriptions[j]
      }
      obj[submittedData[i].specificationTitle] = obj2
    }
    return JSON.stringify(obj)

  }

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

    var data = JSON.parse(generateJson())
    onUpdate(data)
    // console.log(data)
    console.log(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"
        >
          Product Specification
        </label>
        <div className="mt-2">
          <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;
                  });
                }}
              />
              <Input
                placeholder="Description"
                value={descriptions[index]}
                onChange={(e) => {
                  setDescriptions((prev) => {
                    const newDescriptions = [...prev];
                    newDescriptions[index] = e.target.value;
                    return newDescriptions;
                  });
                }}
              />
              {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 mt-4"> */}
        {/* Specification Title Input */}
        {/* <label className="mb-5">Add Product Specification</label>
        <Input
          placeholder="Specification Title"
          value={specificationTitle}
          onChange={(e) => setSpecificationTitle(e.target.value)}
          className="mb-4"
        /> */}

        {/* Dynamic Title and Description Inputs */}

        {/* Submit and Reset Buttons */}
      {/* </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>
                      <p>
                        <strong>Description:</strong> {data.descriptions[idx]}
                      </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 SpecificationForm;