Chemical XThe Secret Sauce to Vibe Coding

// ❌ LEGACY MONOLITH COMPONENT (628 LINES)
// WARNING: This massive 600+ line file causes severe AI Context Window Rot.
// AI Agents scour thousands of lines for a single edit, leading to high latency and hallucinations.

import React, { useState, useEffect, useMemo, useCallback } from 'react';

// ── Scattered Anonymous Types Inlined in File ─────────────────────────────────
type UserAccountType = 'free' | 'pro' | 'enterprise' | 'suspended';
type AuditLogLevel = 'info' | 'warn' | 'error' | 'critical';

interface LegacyUserProfile {
  id: string;
  fullName: string;
  email: string;
  accountType: UserAccountType;
  billingStatus: 'active' | 'past_due' | 'canceled';
  balanceCents: number;
  permissions: string[];
  metadata: {
    lastLoginIp: string;
    loginCount: number;
    preferredTheme: string;
    notificationsEnabled: boolean;
  };
}

interface LegacyDataRecord {
  id: string;
  title: string;
  category: string;
  amount: number;
  status: 'pending' | 'verified' | 'rejected' | 'archived';
  createdAt: string;
  tags: string[];
  ownerId: string;
}

export default function UserDashboardMonolithApp() {
  // ── 1. Massive Unorganized State Declarations (18+ Hooks) ───────────────────
  const [userProfile, setUserProfile] = useState<LegacyUserProfile | null>(null);
  const [records, setRecords] = useState<LegacyDataRecord[]>([]);
  const [isLoadingUser, setIsLoadingUser] = useState<boolean>(true);
  const [isLoadingRecords, setIsLoadingRecords] = useState<boolean>(true);
  const [userError, setUserError] = useState<string | null>(null);
  const [recordsError, setRecordsError] = useState<string | null>(null);
  
  // Search & Filter State
  const [searchQuery, setSearchQuery] = useState<string>('');
  const [selectedCategory, setSelectedCategory] = useState<string>('all');
  const [selectedStatus, setSelectedStatus] = useState<string>('all');
  const [minAmountFilter, setMinAmountFilter] = useState<number>(0);
  const [sortByField, setSortByField] = useState<'title' | 'amount' | 'createdAt'>('createdAt');
  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
  
  // Modal & Selection State
  const [activeModal, setActiveModal] = useState<'create' | 'edit' | 'delete' | 'export' | null>(null);
  const [selectedRecordId, setSelectedRecordId] = useState<string | null>(null);
  const [editingTitle, setEditingTitle] = useState<string>('');
  const [editingAmount, setEditingAmount] = useState<number>(0);
  const [editingCategory, setEditingCategory] = useState<string>('General');
  const [formValidationError, setFormValidationError] = useState<string | null>(null);
  const [isSubmittingForm, setIsSubmittingForm] = useState<boolean>(false);
  
  // Pagination & UI State
  const [currentPage, setCurrentPage] = useState<number>(1);
  const [pageSize, setPageSize] = useState<number>(10);
  const [activeTab, setActiveTab] = useState<'overview' | 'records' | 'analytics' | 'settings'>('overview');
  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState<boolean>(false);
  const [toastNotification, setToastNotification] = useState<{ message: string; type: 'success' | 'error' } | null>(null);

  // ── 2. Scattered Timer & Lifecycle Side Effects ─────────────────────────────
  useEffect(() => {
    let isMounted = true;
    setIsLoadingUser(true);

    // Simulated API call with inline timer
    const userTimer = setTimeout(() => {
      if (isMounted) {
        setUserProfile({
          id: 'usr_88921',
          fullName: 'Quantum Vibe Developer',
          email: '[email protected]',
          accountType: 'pro',
          billingStatus: 'active',
          balanceCents: 145000,
          permissions: ['read:all', 'write:records', 'export:data', 'admin:tools'],
          metadata: {
            lastLoginIp: '192.168.1.102',
            loginCount: 142,
            preferredTheme: 'dark',
            notificationsEnabled: true,
          },
        });
        setIsLoadingUser(false);
      }
    }, 600);

    return () => clearTimeout(userTimer);
  }, []);

  useEffect(() => {
    let isMounted = true;
    setIsLoadingRecords(true);

    // Simulated API call for records
    const recordsTimer = setTimeout(() => {
      if (isMounted) {
        const dummyRecords: LegacyDataRecord[] = Array.from({ length: 45 }).map((_, idx) => ({
          id: `rec_${idx + 1000}`,
          title: `Data Payload Batch #${idx + 1}`,
          category: idx % 3 === 0 ? 'Financial' : idx % 3 === 1 ? 'Operations' : 'Analytics',
          amount: Math.floor(Math.random() * 5000) + 100,
          status: idx % 4 === 0 ? 'pending' : idx % 4 === 1 ? 'verified' : idx % 4 === 2 ? 'rejected' : 'archived',
          createdAt: new Date(Date.now() - idx * 86400000).toISOString(),
          tags: ['vibe-code', 'quantum', `tag-${idx}`],
          ownerId: 'usr_88921',
        }));
        setRecords(dummyRecords);
        setIsLoadingRecords(false);
      }
    }, 900);

    return () => clearTimeout(recordsTimer);
  }, []);

  // Recurring polling loop - BAD PRACTICE (setInterval without cleanup abstraction)
  useEffect(() => {
    const pollInterval = setInterval(() => {
      console.log('Polling background sync metrics...');
    }, 10000);

    return () => clearInterval(pollInterval);
  }, []);

  // ── 3. Un-factored Complex Multi-Clause Booleans Inlined ───────────────────
  // ❌ ANTI-PATTERN: Heavy inlined conditional logic
  const canPerformAdminExport =
    userProfile !== null &&
    userProfile.accountType === 'pro' &&
    userProfile.billingStatus === 'active' &&
    userProfile.permissions.includes('export:data') &&
    records.length > 0 &&
    !isLoadingRecords &&
    minAmountFilter >= 0;

  const isFormValid =
    editingTitle.trim().length >= 3 &&
    editingAmount > 0 &&
    editingCategory !== '' &&
    !isSubmittingForm;

  // ── 4. Dense Inline Filtering & Sorting Calculations ───────────────────────
  const filteredAndSortedRecords = useMemo(() => {
    return records
      .filter((rec) => {
        const matchesSearch =
          rec.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
          rec.id.toLowerCase().includes(searchQuery.toLowerCase());
        const matchesCategory = selectedCategory === 'all' || rec.category === selectedCategory;
        const matchesStatus = selectedStatus === 'all' || rec.status === selectedStatus;
        const matchesAmount = rec.amount >= minAmountFilter;

        return matchesSearch && matchesCategory && matchesStatus && matchesAmount;
      })
      .sort((a, b) => {
        let compA = a[sortByField];
        let compB = b[sortByField];

        if (typeof compA === 'string') {
          compA = (compA as string).toLowerCase();
          compB = (compB as string).toLowerCase();
        }

        if (compA < compB) return sortDirection === 'asc' ? -1 : 1;
        if (compA > compB) return sortDirection === 'asc' ? 1 : -1;
        return 0;
      });
  }, [records, searchQuery, selectedCategory, selectedStatus, minAmountFilter, sortByField, sortDirection]);

  // Pagination Slice
  const totalPages = Math.ceil(filteredAndSortedRecords.length / pageSize) || 1;
  const paginatedRecords = useMemo(() => {
    const startIndex = (currentPage - 1) * pageSize;
    return filteredAndSortedRecords.slice(startIndex, startIndex + pageSize);
  }, [filteredAndSortedRecords, currentPage, pageSize]);

  // ── 5. Massive Event Handler Methods ────────────────────────────────────────
  const handleOpenCreateModal = () => {
    setEditingTitle('');
    setEditingAmount(100);
    setEditingCategory('General');
    setFormValidationError(null);
    setActiveModal('create');
  };

  const handleOpenEditModal = (rec: LegacyDataRecord) => {
    setSelectedRecordId(rec.id);
    setEditingTitle(rec.title);
    setEditingAmount(rec.amount);
    setEditingCategory(rec.category);
    setFormValidationError(null);
    setActiveModal('edit');
  };

  const handleSaveRecord = async () => {
    // Inlined multi-level validation check
    if (!editingTitle.trim()) {
      setFormValidationError('Title is required and cannot be empty.');
      return;
    }
    if (editingTitle.trim().length < 3) {
      setFormValidationError('Title must be at least 3 characters long.');
      return;
    }
    if (editingAmount <= 0) {
      setFormValidationError('Amount must be greater than zero.');
      return;
    }

    setIsSubmittingForm(true);
    setFormValidationError(null);

    try {
      // Simulate async saving
      await new Promise((res) => setTimeout(res, 800));

      if (activeModal === 'create') {
        const newRec: LegacyDataRecord = {
          id: `rec_${Date.now()}`,
          title: editingTitle,
          category: editingCategory,
          amount: editingAmount,
          status: 'pending',
          createdAt: new Date().toISOString(),
          tags: ['new-entry'],
          ownerId: userProfile?.id || 'anon',
        };
        setRecords((prev) => [newRec, ...prev]);
        setToastNotification({ message: 'Record created successfully!', type: 'success' });
      } else if (activeModal === 'edit' && selectedRecordId) {
        setRecords((prev) =>
          prev.map((r) =>
            r.id === selectedRecordId
              ? { ...r, title: editingTitle, amount: editingAmount, category: editingCategory }
              : r
          )
        );
        setToastNotification({ message: 'Record updated successfully!', type: 'success' });
      }

      setActiveModal(null);
      setSelectedRecordId(null);
    } catch (err: any) {
      setFormValidationError('Failed to save record. Please try again.');
    } finally {
      setIsSubmittingForm(false);
    }
  };

  const handleDeleteRecord = (id: string) => {
    if (window.confirm('Are you sure you want to delete this record?')) {
      setRecords((prev) => prev.filter((r) => r.id !== id));
      setToastNotification({ message: 'Record deleted.', type: 'error' });
    }
  };

  const handleExportCSV = () => {
    if (!canPerformAdminExport) {
      alert('You do not have permission or active records to export.');
      return;
    }
    const headers = 'ID,Title,Category,Amount,Status,CreatedAt\n';
    const rows = filteredAndSortedRecords
      .map((r) => `"${r.id}","${r.title}","${r.category}",${r.amount},"${r.status}","${r.createdAt}"`)
      .join('\n');
    const csvContent = 'data:text/csv;charset=utf-8,' + headers + rows;
    const encodedUri = encodeURI(csvContent);
    const link = document.createElement('a');
    link.setAttribute('href', encodedUri);
    link.setAttribute('download', 'monolith_export.csv');
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  // ── 6. Massive Nested JSX DOM Scaffolding (300+ Lines) ────────────────────
  return (
    <div style={{ minHeight: '100vh', backgroundColor: '#0f172a', color: '#f8fafc', fontFamily: 'sans-serif' }}>
      {/* Top Banner Navigation */}
      <header style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '16px 24px', backgroundColor: '#1e293b', borderBottom: '1px solid #334155' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
          <div style={{ width: '32px', height: '32px', borderRadius: '8px', backgroundColor: '#06b6d4', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 'bold' }}>
            M
          </div>
          <h1 style={{ fontSize: '18px', fontWeight: 'bold', margin: 0 }}>Monolith Legacy Console (Anti-Pattern)</h1>
        </div>

        <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
          {isLoadingUser ? (
            <span style={{ fontSize: '12px', color: '#94a3b8' }}>Loading User Profile...</span>
          ) : userProfile ? (
            <div style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '14px' }}>
              <span style={{ fontWeight: '600' }}>{userProfile.fullName}</span>
              <span style={{ padding: '2px 8px', borderRadius: '12px', fontSize: '10px', backgroundColor: '#0284c7', color: '#fff' }}>
                {userProfile.accountType.toUpperCase()}
              </span>
            </div>
          ) : (
            <span style={{ fontSize: '12px', color: '#f43f5e' }}>User Not Authenticated</span>
          )}
        </div>
      </header>

      {/* Main Container Layout */}
      <div style={{ display: 'flex', minHeight: 'calc(100vh - 65px)' }}>
        {/* Sidebar Nav */}
        <aside style={{ width: isSidebarCollapsed ? '60px' : '240px', backgroundColor: '#1e293b', borderRight: '1px solid #334155', padding: '16px', transition: 'width 0.2s' }}>
          <button
            onClick={() => setIsSidebarCollapsed(!isSidebarCollapsed)}
            style={{ width: '100%', padding: '8px', marginBottom: '16px', backgroundColor: '#334155', color: '#fff', border: 'none', borderRadius: '6px', cursor: 'pointer' }}
          >
            {isSidebarCollapsed ? '➔' : '◄ Collapse Sidebar'}
          </button>

          <nav style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
            <button
              onClick={() => setActiveTab('overview')}
              style={{
                textAlign: 'left',
                padding: '10px 12px',
                borderRadius: '6px',
                backgroundColor: activeTab === 'overview' ? '#0284c7' : 'transparent',
                color: '#fff',
                border: 'none',
                cursor: 'pointer',
              }}
            >
              {isSidebarCollapsed ? '📊' : '📊 System Overview'}
            </button>

            <button
              onClick={() => setActiveTab('records')}
              style={{
                textAlign: 'left',
                padding: '10px 12px',
                borderRadius: '6px',
                backgroundColor: activeTab === 'records' ? '#0284c7' : 'transparent',
                color: '#fff',
                border: 'none',
                cursor: 'pointer',
              }}
            >
              {isSidebarCollapsed ? '📁' : '📁 Data Records'}
            </button>

            <button
              onClick={() => setActiveTab('analytics')}
              style={{
                textAlign: 'left',
                padding: '10px 12px',
                borderRadius: '6px',
                backgroundColor: activeTab === 'analytics' ? '#0284c7' : 'transparent',
                color: '#fff',
                border: 'none',
                cursor: 'pointer',
              }}
            >
              {isSidebarCollapsed ? '📈' : '📈 Realtime Analytics'}
            </button>

            <button
              onClick={() => setActiveTab('settings')}
              style={{
                textAlign: 'left',
                padding: '10px 12px',
                borderRadius: '6px',
                backgroundColor: activeTab === 'settings' ? '#0284c7' : 'transparent',
                color: '#fff',
                border: 'none',
                cursor: 'pointer',
              }}
            >
              {isSidebarCollapsed ? '⚙️' : '⚙️ Account Settings'}
            </button>
          </nav>
        </aside>

        {/* Content View Area */}
        <main style={{ flex: 1, padding: '24px', overflowY: 'auto' }}>
          {/* Toast Notification Banner */}
          {toastNotification && (
            <div
              style={{
                marginBottom: '16px',
                padding: '12px 16px',
                borderRadius: '8px',
                backgroundColor: toastNotification.type === 'success' ? '#065f46' : '#9f1239',
                color: '#fff',
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
              }}
            >
              <span>{toastNotification.message}</span>
              <button
                onClick={() => setToastNotification(null)}
                style={{ background: 'none', border: 'none', color: '#fff', cursor: 'pointer', fontWeight: 'bold' }}
              >
                ✕
              </button>
            </div>
          )}

          {/* TAB 1: OVERVIEW */}
          {activeTab === 'overview' && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
              <h2 style={{ fontSize: '22px', margin: 0 }}>System Health & Summary</h2>

              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: '16px' }}>
                <div style={{ padding: '16px', backgroundColor: '#1e293b', borderRadius: '12px', border: '1px solid #334155' }}>
                  <span style={{ fontSize: '12px', color: '#94a3b8' }}>TOTAL RECORDS</span>
                  <p style={{ fontSize: '28px', fontWeight: 'bold', margin: '8px 0 0' }}>{records.length}</p>
                </div>

                <div style={{ padding: '16px', backgroundColor: '#1e293b', borderRadius: '12px', border: '1px solid #334155' }}>
                  <span style={{ fontSize: '12px', color: '#94a3b8' }}>FILTERED COUNT</span>
                  <p style={{ fontSize: '28px', fontWeight: 'bold', margin: '8px 0 0', color: '#38bdf8' }}>
                    {filteredAndSortedRecords.length}
                  </p>
                </div>

                <div style={{ padding: '16px', backgroundColor: '#1e293b', borderRadius: '12px', border: '1px solid #334155' }}>
                  <span style={{ fontSize: '12px', color: '#94a3b8' }}>ACCOUNT BALANCE</span>
                  <p style={{ fontSize: '28px', fontWeight: 'bold', margin: '8px 0 0', color: '#34d399' }}>
                    ${((userProfile?.balanceCents || 0) / 100).toFixed(2)}
                  </p>
                </div>

                <div style={{ padding: '16px', backgroundColor: '#1e293b', borderRadius: '12px', border: '1px solid #334155' }}>
                  <span style={{ fontSize: '12px', color: '#94a3b8' }}>EXPORT STATUS</span>
                  <p style={{ fontSize: '14px', fontWeight: 'bold', margin: '8px 0 0', color: canPerformAdminExport ? '#34d399' : '#f43f5e' }}>
                    {canPerformAdminExport ? 'EXPORT AUTHORIZED' : 'LOCKED / PAST DUE'}
                  </p>
                </div>
              </div>
            </div>
          )}

          {/* TAB 2: RECORDS DATA GRID */}
          {activeTab === 'records' && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '12px' }}>
                <h2 style={{ fontSize: '22px', margin: 0 }}>Data Records Management</h2>

                <div style={{ display: 'flex', gap: '8px' }}>
                  <button
                    onClick={handleExportCSV}
                    disabled={!canPerformAdminExport}
                    style={{
                      padding: '8px 14px',
                      backgroundColor: canPerformAdminExport ? '#059669' : '#475569',
                      color: '#fff',
                      border: 'none',
                      borderRadius: '6px',
                      cursor: canPerformAdminExport ? 'pointer' : 'not-allowed',
                      fontSize: '12px',
                      fontWeight: 'bold',
                    }}
                  >
                    Export CSV
                  </button>

                  <button
                    onClick={handleOpenCreateModal}
                    style={{
                      padding: '8px 14px',
                      backgroundColor: '#0284c7',
                      color: '#fff',
                      border: 'none',
                      borderRadius: '6px',
                      cursor: 'pointer',
                      fontSize: '12px',
                      fontWeight: 'bold',
                    }}
                  >
                    + Add New Record
                  </button>
                </div>
              </div>

              {/* Filter Toolbar */}
              <div style={{ display: 'flex', gap: '12px', padding: '16px', backgroundColor: '#1e293b', borderRadius: '8px', flexWrap: 'wrap' }}>
                <input
                  type="text"
                  placeholder="Search records by title or ID..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  style={{ flex: '1 1 200px', padding: '8px 12px', borderRadius: '6px', border: '1px solid #334155', backgroundColor: '#0f172a', color: '#fff' }}
                />

                <select
                  value={selectedCategory}
                  onChange={(e) => setSelectedCategory(e.target.value)}
                  style={{ padding: '8px 12px', borderRadius: '6px', border: '1px solid #334155', backgroundColor: '#0f172a', color: '#fff' }}
                >
                  <option value="all">All Categories</option>
                  <option value="Financial">Financial</option>
                  <option value="Operations">Operations</option>
                  <option value="Analytics">Analytics</option>
                </select>

                <select
                  value={selectedStatus}
                  onChange={(e) => setSelectedStatus(e.target.value)}
                  style={{ padding: '8px 12px', borderRadius: '6px', border: '1px solid #334155', backgroundColor: '#0f172a', color: '#fff' }}
                >
                  <option value="all">All Statuses</option>
                  <option value="pending">Pending</option>
                  <option value="verified">Verified</option>
                  <option value="rejected">Rejected</option>
                  <option value="archived">Archived</option>
                </select>
              </div>

              {/* Data Table */}
              {isLoadingRecords ? (
                <div style={{ padding: '40px', textAlign: 'center', color: '#94a3b8' }}>Loading record datasets...</div>
              ) : paginatedRecords.length === 0 ? (
                <div style={{ padding: '40px', textAlign: 'center', color: '#94a3b8', backgroundColor: '#1e293b', borderRadius: '8px' }}>
                  No matching records found.
                </div>
              ) : (
                <table style={{ width: '100%', borderCollapse: 'collapse', backgroundColor: '#1e293b', borderRadius: '8px', overflow: 'hidden' }}>
                  <thead>
                    <tr style={{ backgroundColor: '#0f172a', color: '#94a3b8', textAlign: 'left', fontSize: '12px' }}>
                      <th style={{ padding: '12px 16px' }}>RECORD ID</th>
                      <th style={{ padding: '12px 16px' }}>TITLE</th>
                      <th style={{ padding: '12px 16px' }}>CATEGORY</th>
                      <th style={{ padding: '12px 16px' }}>AMOUNT</th>
                      <th style={{ padding: '12px 16px' }}>STATUS</th>
                      <th style={{ padding: '12px 16px' }}>ACTIONS</th>
                    </tr>
                  </thead>
                  <tbody>
                    {paginatedRecords.map((rec) => (
                      <tr key={rec.id} style={{ borderBottom: '1px solid #334155', fontSize: '13px' }}>
                        <td style={{ padding: '12px 16px', fontFamily: 'monospace' }}>{rec.id}</td>
                        <td style={{ padding: '12px 16px', fontWeight: 'bold' }}>{rec.title}</td>
                        <td style={{ padding: '12px 16px' }}>{rec.category}</td>
                        <td style={{ padding: '12px 16px', color: '#38bdf8' }}>${rec.amount.toFixed(2)}</td>
                        <td style={{ padding: '12px 16px' }}>
                          <span style={{ padding: '2px 8px', borderRadius: '4px', fontSize: '11px', textTransform: 'uppercase', backgroundColor: rec.status === 'verified' ? '#065f46' : rec.status === 'pending' ? '#854d0e' : '#9f1239', color: '#fff' }}>
                            {rec.status}
                          </span>
                        </td>
                        <td style={{ padding: '12px 16px' }}>
                          <button
                            onClick={() => handleOpenEditModal(rec)}
                            style={{ marginRight: '8px', background: 'none', border: '1px solid #0284c7', color: '#38bdf8', borderRadius: '4px', padding: '4px 8px', cursor: 'pointer' }}
                          >
                            Edit
                          </button>
                          <button
                            onClick={() => handleDeleteRecord(rec.id)}
                            style={{ background: 'none', border: '1px solid #e11d48', color: '#fb7185', borderRadius: '4px', padding: '4px 8px', cursor: 'pointer' }}
                          >
                            Delete
                          </button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              )}

              {/* Pagination Controls */}
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 0' }}>
                <span style={{ fontSize: '12px', color: '#94a3b8' }}>
                  Showing Page {currentPage} of {totalPages} ({filteredAndSortedRecords.length} Total Items)
                </span>
                <div style={{ display: 'flex', gap: '8px' }}>
                  <button
                    onClick={() => setCurrentPage((p) => Math.max(p - 1, 1))}
                    disabled={currentPage === 1}
                    style={{ padding: '6px 12px', backgroundColor: '#334155', color: '#fff', border: 'none', borderRadius: '4px', cursor: currentPage === 1 ? 'not-allowed' : 'pointer' }}
                  >
                    Previous
                  </button>
                  <button
                    onClick={() => setCurrentPage((p) => Math.min(p + 1, totalPages))}
                    disabled={currentPage === totalPages}
                    style={{ padding: '6px 12px', backgroundColor: '#334155', color: '#fff', border: 'none', borderRadius: '4px', cursor: currentPage === totalPages ? 'not-allowed' : 'pointer' }}
                  >
                    Next
                  </button>
                </div>
              </div>
            </div>
          )}

          {/* TAB 3 & 4: ANALYTICS & SETTINGS */}
          {(activeTab === 'analytics' || activeTab === 'settings') && (
            <div style={{ padding: '32px', textAlign: 'center', backgroundColor: '#1e293b', borderRadius: '12px', border: '1px solid #334155' }}>
              <h3 style={{ margin: 0, fontSize: '20px' }}>{activeTab === 'analytics' ? 'Analytics Engine' : 'User Account Settings'}</h3>
              <p style={{ color: '#94a3b8', fontSize: '14px', marginTop: '8px' }}>
                This is part of the 600+ line legacy monolith view. Decompose into dedicated atomic molecules!
              </p>
            </div>
          )}
        </main>
      </div>

      {/* Modal Dialog (Inlined DOM scaffolding inside main file) */}
      {activeModal && (
        <div style={{ position: 'fixed', inset: 0, backgroundColor: 'rgba(0,0,0,0.75)', display: 'flex', itemsCenter: 'center', justifyContent: 'center', zIndex: 100 }}>
          <div style={{ width: '100%', maxWidth: '480px', backgroundColor: '#1e293b', borderRadius: '12px', padding: '24px', border: '1px solid #334155' }}>
            <h3 style={{ marginTop: 0 }}>{activeModal === 'create' ? 'Create New Record' : 'Edit Record'}</h3>

            {formValidationError && (
              <div style={{ padding: '8px 12px', backgroundColor: '#9f1239', color: '#fff', borderRadius: '6px', fontSize: '12px', marginBottom: '12px' }}>
                {formValidationError}
              </div>
            )}

            <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
              <label style={{ fontSize: '12px', color: '#94a3b8' }}>
                Record Title
                <input
                  type="text"
                  value={editingTitle}
                  onChange={(e) => setEditingTitle(e.target.value)}
                  style={{ width: '100%', padding: '8px', marginTop: '4px', borderRadius: '6px', border: '1px solid #334155', backgroundColor: '#0f172a', color: '#fff' }}
                />
              </label>

              <label style={{ fontSize: '12px', color: '#94a3b8' }}>
                Amount ($)
                <input
                  type="number"
                  value={editingAmount}
                  onChange={(e) => setEditingAmount(Number(e.target.value))}
                  style={{ width: '100%', padding: '8px', marginTop: '4px', borderRadius: '6px', border: '1px solid #334155', backgroundColor: '#0f172a', color: '#fff' }}
                />
              </label>

              <label style={{ fontSize: '12px', color: '#94a3b8' }}>
                Category
                <select
                  value={editingCategory}
                  onChange={(e) => setEditingCategory(e.target.value)}
                  style={{ width: '100%', padding: '8px', marginTop: '4px', borderRadius: '6px', border: '1px solid #334155', backgroundColor: '#0f172a', color: '#fff' }}
                >
                  <option value="Financial">Financial</option>
                  <option value="Operations">Operations</option>
                  <option value="Analytics">Analytics</option>
                  <option value="General">General</option>
                </select>
              </label>
            </div>

            <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '8px', marginTop: '20px' }}>
              <button
                onClick={() => setActiveModal(null)}
                style={{ padding: '8px 16px', backgroundColor: '#334155', color: '#fff', border: 'none', borderRadius: '6px', cursor: 'pointer' }}
              >
                Cancel
              </button>
              <button
                onClick={handleSaveRecord}
                disabled={isSubmittingForm}
                style={{ padding: '8px 16px', backgroundColor: '#0284c7', color: '#fff', border: 'none', borderRadius: '6px', cursor: 'pointer' }}
              >
                {isSubmittingForm ? 'Saving...' : 'Save Record'}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}