import type { WalkthroughCheckInPage } from '@/business/walkthrough/types';
import WalkThroughForm from '@/components/frameworks/WalkThroughForm';
import WalkThroughSummary from '@/components/frameworks/WalkThroughSummary';
import { StatePanel } from '@/components/ui/state-panel';
import { WalkthroughCheckInHeader } from '@/components/walkthrough-checkin/WalkthroughCheckInHeader';
import { WalkthroughCheckInStats } from '@/components/walkthrough-checkin/WalkthroughCheckInStats';
import { WalkthroughCheckInTabs } from '@/components/walkthrough-checkin/WalkthroughCheckInTabs';
import { WalkthroughHistoryView } from '@/components/walkthrough-checkin/WalkthroughHistoryView';

interface WalkthroughCheckInViewProps {
  readonly page: WalkthroughCheckInPage;
}

export function WalkthroughCheckInView({ page }: WalkthroughCheckInViewProps) {
  return (
    <div className="space-y-6">
      <WalkthroughCheckInHeader loading={page.loading} onRefresh={page.refresh} />

      {page.errorMessage && (
        <StatePanel tone="red" role="alert">
          {page.errorMessage}
        </StatePanel>
      )}

      <WalkthroughCheckInStats stats={page.stats} />

      <WalkthroughCheckInTabs
        tabs={page.tabs}
        activeTab={page.activeTab}
        onSelectTab={page.setActiveTab}
      />

      {page.activeTab === 'new' && (
        <WalkThroughForm
          onSubmit={page.submit}
          submitting={page.submitting}
          userName={page.userName}
        />
      )}

      {page.activeTab === 'summary' && (
        <WalkThroughSummary checkins={page.checkins} loading={page.loading} />
      )}

      {page.activeTab === 'history' && (
        <WalkthroughHistoryView
          loading={page.loading}
          rows={page.historyRows}
          onStartWalkthrough={() => page.setActiveTab('new')}
        />
      )}
    </div>
  );
}
