"use client";

import React, { useState } from 'react';
import { DropZone } from '@puckeditor/core';

export interface TabItem {
  id: string;
  label: string;
}

export interface TabsContainerProps {
  title?: string;
  tabs: TabItem[];
  isEditing?: boolean;
  renderDropZone?: (props: { zone: string }) => React.ReactNode;
}

export function TabsContainer({ title, tabs = [], isEditing = false, renderDropZone }: TabsContainerProps) {
  const [activeTabId, setActiveTabId] = useState<string>(tabs[0]?.id || '');

  React.useEffect(() => {
    if (tabs.length > 0 && !tabs.find(t => t.id === activeTabId)) {
      setActiveTabId(tabs[0].id);
    }
  }, [tabs, activeTabId]);

  return (
    <section className="py-12 bg-transparent">
      <div className="w-full max-w-[1280px] mx-auto px-4 sm:px-6">

        {title && (
          <h2 className="text-2xl md:text-3xl font-bold text-brand-primary mb-8 text-center">
            {title}
          </h2>
        )}

        {tabs.length === 0 ? (
          <div className="p-8 border-2 border-dashed border-gray-300 text-gray-500 rounded-xl text-center bg-gray-50 font-medium">
            Add Tabs from the right panel
          </div>
        ) : isEditing ? (
          /* 💡 EDITOR MODE: all zones stacked so every tab is droppable 💡 */
          <div className="flex flex-col gap-6">
            <div className="flex flex-wrap justify-center gap-4">
              {tabs.map((tab, i) => (
                <button
                  key={`editor-btn-${i}`}
                  className="px-8 py-3.5 rounded-full font-bold text-sm md:text-base bg-white text-gray-500 border border-gray-200 cursor-default opacity-70"
                  tabIndex={-1}
                >
                  {tab.label || `Tab ${i + 1}`}
                </button>
              ))}
            </div>

            {tabs.map((tab, i) => (
              <div key={`editor-zone-${i}`}>
                <div style={{
                  display: 'flex', alignItems: 'center', gap: '8px',
                  marginBottom: '6px', padding: '4px 10px',
                  background: '#1e3a5f', borderRadius: '6px',
                  fontSize: '12px', fontWeight: 700, color: '#60a5fa',
                  letterSpacing: '0.04em', width: 'fit-content',
                }}>
                  <span style={{ fontSize: '14px' }}>⚡</span>
                  Tab zone: <em style={{ color: '#93c5fd' }}>{tab.label || `Tab ${i + 1}`}</em>
                  <span style={{ color: '#475569', fontWeight: 400 }}>(id: {tab.id || '⚠️ set an ID'})</span>
                </div>
                <div style={{
                  border: '2px dashed #cbd5e1',
                  borderRadius: '10px',
                  background: '#f8fafc',
                }}>
                  {/* CRITICAL: The flex & min-h styles ensure the DropZone isn't 0px tall when empty */}
                  <div className="min-h-[80px] flex flex-col [&>div]:flex-1 [&>div]:min-h-[80px]">
                    <DropZone zone={`tab-${i}`} />
                  </div>
                </div>
              </div>
            ))}
          </div>
        ) : (
          /* 💡 LIVE SITE FALLBACK (Should rarely render if RSC override works) 💡 */
          <>
            <div className="flex flex-wrap justify-center gap-4 mb-10">
              {tabs.map((tab, i) => {
                const isActive = activeTabId === tab.id;
                return (
                  <button
                    key={`live-btn-${i}`}
                    onClick={() => setActiveTabId(tab.id)}
                    className={`px-8 py-3.5 rounded-full font-bold text-sm md:text-base transition-all duration-300 shadow-sm ${
                      isActive
                        ? 'bg-brand-primary text-white shadow-lg scale-105 border border-brand-primary'
                        : 'bg-white text-gray-600 border border-gray-200 hover:bg-gray-50'
                    }`}
                  >
                    {tab.label}
                  </button>
                );
              })}
            </div>
            <div className="w-full relative">
              {tabs.map((tab, i) => (
                <div
                  key={`zone-wrapper-${i}`}
                  style={{ display: activeTabId === tab.id ? 'block' : 'none' }}
                  className="w-full"
                >
                  {renderDropZone ? renderDropZone({ zone: `tab-${i}` }) : <DropZone zone={`tab-${i}`} />}
                </div>
              ))}
            </div>
          </>
        )}

      </div>
    </section>
  );
}
