import { Button, Tag, Typography } from 'antd';
import type { ReactNode } from 'react';

const { Paragraph, Text } = Typography;

export type LayoutSavedPaneSpec = {
  summary: string;
};

export function LayoutSavedPanePlaceholder({
  label,
  selected,
  spec,
  action,
}: {
  label: string;
  selected: boolean;
  spec: LayoutSavedPaneSpec | null;
  action?: ReactNode;
}) {
  return (
    <div className={`layout-playground__saved-pane-placeholder${selected ? ' is-selected' : ''}`}>
      <div className="layout-playground__saved-pane-placeholder-head">
        <Tag color={selected ? 'blue' : 'default'}>{label}</Tag>
        <Tag bordered={false} className="layout-playground__saved-pane-placeholder-status">
          컴포넌트 미지정
        </Tag>
      </div>
      <div className="layout-playground__saved-pane-placeholder-body">
        <Text strong className="layout-playground__saved-pane-placeholder-title">
          등록된 기능 명세가 없습니다.
        </Text>
        <Paragraph className="layout-playground__saved-pane-placeholder-copy">
          현재 section은 레이아웃 구조만 저장되어 있습니다. 필요한 컴포넌트와 상호작용은 이후에 독립적으로 연결할 수 있습니다.
        </Paragraph>
        {spec ? (
          <div className="layout-playground__saved-pane-placeholder-meta">
            <div className="layout-playground__saved-pane-placeholder-meta-item layout-playground__saved-pane-placeholder-meta-item--wide">
              <span>배치 규칙</span>
              <strong>{spec.summary}</strong>
            </div>
          </div>
        ) : null}
      </div>
      {action ? <div className="layout-playground__saved-pane-placeholder-actions">{action}</div> : null}
    </div>
  );
}

export function LayoutSavedSelectionSummary({
  items,
  selectedId,
  onSelect,
  spec,
}: {
  items: Array<{ id: string; label: string }>;
  selectedId: string | null;
  onSelect: (id: string) => void;
  spec: LayoutSavedPaneSpec | null;
}) {
  return (
    <div className="layout-playground__saved-selection-summary">
      <div className="layout-playground__saved-selection-summary-copy">
        <Text strong>{items.find((item) => item.id === selectedId)?.label ?? 'Pane 선택 없음'}</Text>
        <Text type="secondary">
          {spec ? spec.summary : '분할 정보가 없습니다.'}
        </Text>
      </div>
      <div className="layout-playground__saved-selection-summary-actions">
        {items.map((item) => (
          <Button
            key={item.id}
            size="small"
            type={item.id === selectedId ? 'primary' : 'default'}
            onClick={() => {
              onSelect(item.id);
            }}
          >
            {item.label}
          </Button>
        ))}
      </div>
    </div>
  );
}
