"use client";

import { useState } from "react";
import { ChevronDown, ChevronRight } from "lucide-react";

interface StructureProductDataProps {
  parentData: Record<string, unknown> | null;
  childData: Record<string, unknown>[] | null;
}

function renderValue(value: unknown): string {
  if (value === null || value === undefined) return "";
  if (typeof value === "object") return JSON.stringify(value, null, 2);
  return String(value);
}

export function StructureProductData({
  parentData,
  childData,
}: StructureProductDataProps) {
  const [expandedChildren, setExpandedChildren] = useState<Set<number>>(
    new Set()
  );

  const hasParent = parentData && Object.keys(parentData).length > 0;
  const hasChildren = childData && childData.length > 0;

  if (!hasParent && !hasChildren) return null;

  const toggleChild = (index: number) => {
    setExpandedChildren((prev) => {
      const next = new Set(prev);
      if (next.has(index)) {
        next.delete(index);
      } else {
        next.add(index);
      }
      return next;
    });
  };

  return (
    <div className="space-y-4">
      {hasParent && (
        <div>
          <h4 className="text-sm font-semibold text-gray-700 mb-2">
            Parent Data
          </h4>
          <table className="w-full text-xs border-collapse">
            <thead>
              <tr className="bg-gray-50 border-b">
                <th className="px-3 py-2 text-left font-medium text-gray-600 w-1/3">
                  Field
                </th>
                <th className="px-3 py-2 text-left font-medium text-gray-600">
                  Value
                </th>
              </tr>
            </thead>
            <tbody>
              {Object.entries(parentData!).map(([key, value]) => (
                <tr key={key} className="border-b">
                  <td className="px-3 py-1.5 font-medium text-gray-600">
                    {key}
                  </td>
                  <td className="px-3 py-1.5 text-gray-700 break-all">
                    {renderValue(value)}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {hasChildren && (
        <div>
          <h4 className="text-sm font-semibold text-gray-700 mb-2">
            Child Data ({childData!.length} items)
          </h4>
          <div className="max-h-96 overflow-y-auto space-y-2">
            {childData!.map((child, index) => (
              <div
                key={index}
                className="border rounded-lg overflow-hidden"
              >
                <button
                  onClick={() => toggleChild(index)}
                  className="w-full flex items-center gap-2 px-3 py-2 bg-gray-50 hover:bg-gray-100 text-xs font-medium text-gray-700 transition-colors"
                >
                  {expandedChildren.has(index) ? (
                    <ChevronDown className="h-3.5 w-3.5" />
                  ) : (
                    <ChevronRight className="h-3.5 w-3.5" />
                  )}
                  Child {index + 1}
                </button>
                {expandedChildren.has(index) && (
                  <div className="px-3 py-2">
                    <table className="w-full text-xs border-collapse">
                      <tbody>
                        {Object.entries(child).map(([key, value]) => (
                          <tr key={key} className="border-b last:border-0">
                            <td className="py-1 pr-3 font-medium text-gray-600 w-1/3">
                              {key}
                            </td>
                            <td className="py-1 text-gray-700 break-all">
                              {renderValue(value)}
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}