import React from 'react';
import { BottomSheet } from './BottomSheet';
import { BlocksPanel } from '../left/BlocksPanel';
import { PagesPanel } from '../left/PagesPanel';
import { LayersPanel } from '../left/LayersPanel';
import { AssetsPanel } from '../left/AssetsPanel';
import { GuidedStyles } from '../right/GuidedStyles';
import { useMobileChrome, MobileSheetTab } from '../../state/MobileChromeContext';

const TABS: { id: MobileSheetTab; label: string; icon: string }[] = [
  { id: 'blocks', label: 'Blocks', icon: 'fa-cube' },
  { id: 'pages', label: 'Pages', icon: 'fa-file-o' },
  { id: 'layers', label: 'Layers', icon: 'fa-sitemap' },
  { id: 'assets', label: 'Assets', icon: 'fa-image' },
  { id: 'styles', label: 'Styles', icon: 'fa-paint-brush' },
];

/**
 * Mobile replacement for the desktop LeftPanel/RightPanel column layout
 * (Phase A). A fixed bottom tab bar (Blocks/Pages/Layers/Assets/Styles)
 * toggles a single `BottomSheet` at a time, hosting the SAME panel
 * component the desktop side panels use -- unchanged, so behavior/state
 * stays identical, only the chrome around it differs. Tapping the active
 * tab again, tapping the backdrop, the sheet's close button, or Escape all
 * close the open sheet.
 *
 * "Styles" hosts `GuidedStyles`, which already falls back to the
 * site-design panel when nothing is selected and switches to the
 * per-type style panel once something is -- this is the natural place to
 * edit a tapped element's styling (Phase B deepens the tap-to-select flow;
 * this component only wires up the sheet, per the Phase A brief).
 *
 * Sheet-open state itself lives in `MobileChromeContext` (Mobile-A2), not
 * a private `useState`, so Phase B can open/close a sheet from elsewhere
 * (e.g. a canvas selection toolbar). The toggle-to-close-on-repeat-tap
 * behavior is local to this click handler -- `openSheet` always opens.
 */
export const MobilePanelBar: React.FC = () => {
  const { activeSheet, openSheet, closeSheet } = useMobileChrome();

  const handleTabClick = (tab: MobileSheetTab) => {
    if (activeSheet === tab) closeSheet();
    else openSheet(tab);
  };

  const activeLabel = TABS.find((t) => t.id === activeSheet)?.label ?? '';

  return (
    <>
      <BottomSheet open={activeSheet !== null} onClose={closeSheet} title={activeLabel}>
        {activeSheet === 'blocks' && <BlocksPanel />}
        {activeSheet === 'pages' && <PagesPanel />}
        {activeSheet === 'layers' && <LayersPanel />}
        {activeSheet === 'assets' && <AssetsPanel />}
        {activeSheet === 'styles' && <GuidedStyles />}
      </BottomSheet>

      <nav className="mobile-tab-bar" aria-label="Editor panels">
        {TABS.map((tab) => (
          <button
            key={tab.id}
            type="button"
            className={`mobile-tab-btn${activeSheet === tab.id ? ' active' : ''}`}
            onClick={() => handleTabClick(tab.id)}
            aria-pressed={activeSheet === tab.id}
          >
            <i className={`fa ${tab.icon}`} aria-hidden="true" />
            <span>{tab.label}</span>
          </button>
        ))}
      </nav>
    </>
  );
};