import { withConfiguration } from '@pega/cosmos-react-core';
import type { CaseViewProps } from '@pega/cosmos-react-work';

import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';

// Presentation-only component: props contract defined by CaseViewProps.
// No PCore / PConnect dependencies — all data is provided through props.
function {{COMPONENT_CLASS_NAME}}(props: CaseViewProps) {
  const {
    caseId,
    heading,
    subheading,
    caseType,
    summaryFields,
    tabs,
    tabContent,
    stages,
    tasks,
    banners,
    utilities,
    summaryExpanded,
    onToggleSummary,
    utilitiesExpanded,
    onToggleUtilities
  } = props;

  const activeTab = tabContent?.find(t => t.id === tabs.currentTabId);

  return (
    <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
      <header>
        <span>{caseType}</span>
        <h1>{typeof heading === 'string' ? heading : heading?.text}</h1>
        {subheading && (
          <p>
            {(() => {
              if (typeof subheading === 'string') return subheading;
              if (Array.isArray(subheading)) return subheading.join(' ');
              return subheading?.text;
            })()}
          </p>
        )}
        <span>{caseId}</span>
      </header>

      {banners && <section aria-label='Banners'>{banners}</section>}

      <section aria-label='Summary' aria-expanded={summaryExpanded}>
        <button type='button' onClick={onToggleSummary}>{summaryExpanded ? 'Collapse' : 'Expand'} summary</button>
        {summaryExpanded && (
          <>
            <dl>
              {summaryFields.primary?.map(f => (
                <div key={String(f.name)}>
                  <dt>{f.name}</dt>
                  <dd>{f.value}</dd>
                </div>
              ))}
            </dl>
            {summaryFields.secondary && summaryFields.secondary.length > 0 && (
              <dl>
                {summaryFields.secondary.map(f => (
                  <div key={String(f.name)}>
                    <dt>{f.name}</dt>
                    <dd>{f.value}</dd>
                  </div>
                ))}
              </dl>
            )}
          </>
        )}
      </section>

      {stages && <section aria-label='Stages'>{stages}</section>}

      <nav aria-label='Tabs'>
        {tabs.items.map(tab => (
          <button
            type='button'
            key={tab.id}
            onClick={e => tabs.onClick(tab.id, e)}
            aria-selected={tab.id === tabs.currentTabId}
          >
            {tab.name}
          </button>
        ))}
      </nav>

      {activeTab && <section aria-label='Tab content'>{activeTab.content}</section>}

      {tasks && <section aria-label='Tasks'>{tasks}</section>}

      <section aria-label='Utilities' aria-expanded={utilitiesExpanded}>
        <button type='button' onClick={onToggleUtilities}>{utilitiesExpanded ? 'Collapse' : 'Expand'} utilities</button>
        {utilitiesExpanded && utilities}
      </section>
    </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
  );
}

export default withConfiguration({{COMPONENT_CLASS_NAME}});