"use client";

import React, { useState } from "react";
import { ComponentData } from "@/types/screen";
import { componentRegistry, ComponentRenderer } from "../DynamicComponentRenderer";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { ChevronDown, ChevronUp } from "lucide-react";

// 접을 수 있는 패널 컴포넌트 렌더러
const PanelRenderer: ComponentRenderer = ({ component, children, ...props }) => {
  const config = component.componentConfig || {};
  const { title = "패널 제목", collapsible = true, defaultExpanded = true, style = {} } = config;

  const [isExpanded, setIsExpanded] = useState(defaultExpanded);

  return (
    <Card 
      className="h-full w-full border-2 border-border shadow-lg hover:shadow-xl transition-all duration-300 hover:border-orange-300" 
      style={style}
    >
      <CardHeader className="pb-2 bg-gradient-to-r from-slate-50 to-muted border-b border-border">
        <div className="flex items-center justify-between">
          <CardTitle className="text-lg font-semibold text-foreground">{title}</CardTitle>
          {collapsible && (
            <Button
              variant="ghost"
              size="sm"
              onClick={() => setIsExpanded(!isExpanded)}
              className="pointer-events-none h-6 w-6 p-0 hover:bg-amber-100 rounded-full"
              disabled
            >
              {isExpanded ? <ChevronUp className="h-4 w-4 text-amber-600" /> : <ChevronDown className="h-4 w-4 text-amber-600" />}
            </Button>
          )}
        </div>
      </CardHeader>
      {isExpanded && (
        <CardContent className="flex-1 bg-white">
          {children && React.Children.count(children) > 0 ? (
            children
          ) : (
            <div className="flex h-full items-center justify-center text-center p-8">
              <div className="bg-muted rounded-lg p-6 border-2 border-dashed border-input">
                <div className="text-sm text-muted-foreground font-medium">패널 내용 영역</div>
                <div className="mt-2 text-xs text-muted-foreground/70">컴포넌트를 여기에 배치하세요</div>
              </div>
            </div>
          )}
        </CardContent>
      )}
    </Card>
  );
};

// 레지스트리에 등록
componentRegistry.register("panel", PanelRenderer);
componentRegistry.register("panel-collapsible", PanelRenderer);

export { PanelRenderer };
