/* global React */
const { useState } = React;

const LAYOUT_DEFS = [
  { mode: '1x1', title: 'Single (1x1)', lines: [] },
  { mode: '1x2', title: 'Split Vertical (1x2)', lines: [{ x1: 12, y1: 2, x2: 12, y2: 22 }] },
  { mode: '2x1', title: 'Split Horizontal (2x1)', lines: [{ x1: 2, y1: 12, x2: 22, y2: 12 }] },
  { mode: '2x2', title: 'Grid (2x2)', lines: [
    { x1: 12, y1: 2, x2: 12, y2: 22 },
    { x1: 2, y1: 12, x2: 22, y2: 12 },
  ]},
];

const EDGE_ICONS = {
  left:   { title: 'Toggle Left Sidebar',  line: { x1: 8,  y1: 2, x2: 8,  y2: 22 } },
  right:  { title: 'Toggle Right Sidebar', line: { x1: 16, y1: 2, x2: 16, y2: 22 } },
  top:    { title: 'Toggle Top Bar',       line: { x1: 2,  y1: 8, x2: 22, y2: 8  } },
  bottom: { title: 'Toggle Bottom Bar',    line: { x1: 2, y1: 16, x2: 22, y2: 16 } },
};

function LayoutIcon({ lines }) {
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
      <rect x="2" y="2" width="20" height="20" rx="2" />
      {lines.map((l, i) => <line key={i} x1={l.x1} y1={l.y1} x2={l.x2} y2={l.y2} />)}
    </svg>
  );
}

function EdgeIcon({ edge }) {
  const { line } = EDGE_ICONS[edge];
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
      <rect x="2" y="2" width="20" height="20" rx="2" />
      <line x1={line.x1} y1={line.y1} x2={line.x2} y2={line.y2} />
    </svg>
  );
}

function HelpIcon() {
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="10" />
      <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
      <line x1="12" y1="17" x2="12.01" y2="17" />
    </svg>
  );
}

function SettingsIcon() {
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="3" />
      <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
    </svg>
  );
}

function WrapIcon({ on }) {
  return on ? (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="9 10 4 15 9 20" /><path d="M20 4v7a4 4 0 0 1-4 4H4" />
    </svg>
  ) : (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" />
    </svg>
  );
}

function AppSidebar({ layout, setLayout, edges, toggleEdge, wrap, setWrap, onOpenSettings }) {
  return (
    <div className="app-sidebar">
      <div className="app-sidebar-top">
        {LAYOUT_DEFS.map(def => (
          <div key={def.mode}
               className={`app-sidebar-btn${def.mode === layout ? ' app-sidebar-btn-active' : ''}`}
               onClick={() => setLayout(def.mode)}
               title={def.title} role="button">
            <LayoutIcon lines={def.lines} />
          </div>
        ))}
        <div className="app-sidebar-separator" />
        {Object.keys(EDGE_ICONS).map(edge => (
          <div key={edge}
               className={`app-sidebar-btn${edges[edge] ? ' app-sidebar-btn-active' : ''}`}
               onClick={() => toggleEdge(edge)}
               title={EDGE_ICONS[edge].title} role="button">
            <EdgeIcon edge={edge} />
          </div>
        ))}
      </div>
      <div className="app-sidebar-bottom">
        <button className={`app-sidebar-btn${wrap ? ' app-sidebar-btn-active' : ''}`}
                onClick={() => setWrap(!wrap)} title={wrap ? 'Disable Line Wrap' : 'Enable Line Wrap'}>
          <WrapIcon on={wrap} />
        </button>
        <button className="app-sidebar-btn" title="Help / Documentation"><HelpIcon /></button>
        <button className="app-sidebar-btn" title="Settings" onClick={onOpenSettings}><SettingsIcon /></button>
      </div>
    </div>
  );
}

window.AppSidebar = AppSidebar;