"use client";

import React from "react";
import { LayoutRendererProps } from "../BaseLayoutRenderer";

/**
 * heroSection 컴포넌트
 */
export interface HeroSectionLayoutProps extends LayoutRendererProps {
  renderer: any; // HeroSectionLayoutRenderer 타입
}

export const HeroSectionLayout: React.FC<HeroSectionLayoutProps> = ({
  layout,
  isDesignMode = false,
  isSelected = false,
  onClick,
  className = "",
  renderer,
  ...props
}) => {
  if (!layout.layoutConfig.heroSection) {
    return (
      <div className="error-layout flex items-center justify-center p-4 border-2 border-red-300 bg-red-50 rounded">
        <div className="text-center text-red-600">
          <div className="font-medium">heroSection 설정이 없습니다.</div>
          <div className="text-sm mt-1">layoutConfig.heroSection가 필요합니다.</div>
        </div>
      </div>
    );
  }

  const heroSectionConfig = layout.layoutConfig.heroSection;
  const containerStyle = renderer.getLayoutContainerStyle();

  // heroSection 컨테이너 스타일
  const heroSectionStyle: React.CSSProperties = {
    ...containerStyle,
    // TODO: 레이아웃 전용 스타일 정의
    height: "100%",
    width: "100%",
  };

  // 디자인 모드 스타일
  if (isDesignMode) {
    heroSectionStyle.border = isSelected ? "2px solid #3b82f6" : "1px solid #e2e8f0";
    heroSectionStyle.borderRadius = "8px";
  }

  return (
    <div
      className={`hero-section-layout ${isDesignMode ? "design-mode" : ""} ${className}`}
      style={heroSectionStyle}
      onClick={onClick}
      draggable={isDesignMode}
      onDragStart={props.onDragStart}
      onDragEnd={props.onDragEnd}
      {...props}
    >
      {layout.zones.map((zone: any) => {
        const zoneChildren = renderer.getZoneChildren(zone.id);

        // TODO: 존별 스타일 정의
        const zoneStyle: React.CSSProperties = {
          // 레이아웃별 존 스타일 구현
        };

        return renderer.renderZone(zone, zoneChildren, {
          style: zoneStyle,
          className: "hero-section-zone",
        });
      })}

      {/* 디자인 모드에서 빈 영역 표시 */}
      {isDesignMode && layout.zones.length === 0 && (
        <div
          className="empty-hero-section-container"
          style={{
            flex: 1,
            border: "2px dashed #cbd5e1",
            borderRadius: "8px",
            backgroundColor: "rgba(148, 163, 184, 0.05)",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            fontSize: "14px",
            color: "#64748b",
            minHeight: "100px",
            padding: "20px",
            textAlign: "center",
          }}
        >
          heroSection에 존을 추가하세요
        </div>
      )}
    </div>
  );
};