// [OK] QUANTUM ATOMIC EXAMPLE (< 75 LINES)
// Pure declarative Table of Contents layout. Subcomponents handle domain state directly.
import React from 'react';
import { useDashboardState } from '@/hooks/useDashboardState';
import { DashboardHeaderMolecule } from '@/components/molecules/DashboardHeaderMolecule';
import { KpiGridOrganism } from '@/components/organisms/KpiGridOrganism';
import { RecordsTableOrganism } from '@/components/organisms/RecordsTableOrganism';
import { RecordEditModalMolecule } from '@/components/molecules/RecordEditModalMolecule';

export default function QuantumDashboardView() {
  const { isReady, activeRecords, activeModal, handleSelectRecord, handleCloseModal } = useDashboardState();

  if (!isReady) return <DashboardLoadingAtom />;

  return (
    <main className="flex flex-col gap-6 p-6 max-w-7xl mx-auto">
      {/* 1. Declarative Header */}
      <DashboardHeaderMolecule />

      {/* 2. Isolated KPI Grid Organism */}
      <KpiGridOrganism />

      {/* 3. Encapsulated Table Organism */}
      <RecordsTableOrganism records={activeRecords} onSelect={handleSelectRecord} />

      {/* 4. Isolated Modal Capsule */}
      {activeModal && <RecordEditModalMolecule modal={activeModal} onClose={handleCloseModal} />}
    </main>
  );
}