const { useState } = React;

// ===== Data =====
const COLS = ["A","B","C","D","E","F","G","H","I","J","K","L","M"];
const DATA = [
  { product: "Laptops",     q1: 25435, q2: 28510, q3: 26305, q4: 30120, total: 110370 },
  { product: "Monitors",    q1: 14620, q2: 15200, q3: 16010, q4: 18450, total:  64280 },
  { product: "Keyboards",   q1:  7200, q2:  6950, q3:  7450, q4:  8100, total:  29700 },
  { product: "Mice",        q1:  5320, q2:  5850, q3:  6120, q4:  6980, total:  24270 },
  { product: "Accessories", q1:  9410, q2:  9853, q3:  9875, q4: 11230, total:  40368 },
];
// Selected cell: C7 = SUM(C2:C6)
const C_SUM = DATA.reduce((s, r) => s + r.q1, 0); // 63,985
const fmt = (n) => n.toLocaleString("en-US");

// ===== TITLEBAR =====
function Titlebar() {
  return (
    <div className="titlebar">
      <div className="xl-logo">X</div>
      <button className="tb-title">
        Book1
        <span className="caret"><I.CaretSm /></span>
      </button>
      <span className="tb-saved"><span className="ico"><I.Save /></span> Saved</span>
      <div className="tb-spacer"></div>
      <div className="tb-search">
        <I.Search />
        <input placeholder="Search (Alt + Q)" />
      </div>
      <div className="tb-spacer"></div>
      <div className="tb-right">
        <div className="tb-actions">
          <button className="comments-btn"><I.Comment /> Comments</button>
          <button className="share-btn"><I.Share /> Share</button>
        </div>
        <div className="tb-avatar">MA</div>
      </div>
    </div>
  );
}

// ===== RIBBON TABS =====
const RIBBON_TABS = ["Home","Insert","Page Layout","Formulas","Data","Review","View","Help"];

function RibbonTabs({ active, onChange }) {
  return (
    <div className="ribbon-tabs">
      <button className="file-tab">File</button>
      {RIBBON_TABS.map(t => (
        <button
          key={t}
          className={"ribbon-tab" + (active === t ? " is-active" : "")}
          onClick={() => onChange(t)}>
          {t}
        </button>
      ))}
      <div className="tabs-right">
        <button className="icon-btn" title="Ribbon options"><I.Caret /></button>
      </div>
    </div>
  );
}

// ===== RIBBON HOME =====
function RibbonHome() {
  return (
    <div className="ribbon-cmd">

      {/* Clipboard */}
      <div className="rgroup">
        <button className="cmd-big" title="Paste">
          <span className="icon-lg"><I.Paste /></span>
          <span className="lbl">Paste<span className="caret"><I.CaretSm /></span></span>
        </button>
        <div className="gcol" style={{justifyContent:"center", gap:2}}>
          <button className="cmd" title="Cut"><I.Cut /></button>
          <button className="cmd" title="Copy"><I.Copy /></button>
          <button className="cmd" title="Format Painter"><I.Painter /></button>
        </div>
        <span className="glabel">Clipboard</span>
      </div>

      {/* Font */}
      <div className="rgroup">
        <div className="gcol" style={{gap:2}}>
          <div className="grow">
            <div className="rselect w-font">Calibri<span className="caret"><I.CaretSm /></span></div>
            <div className="rselect w-size">11<span className="caret"><I.CaretSm /></span></div>
            <button className="cmd" title="Increase font size"><I.FontUp /></button>
            <button className="cmd" title="Decrease font size"><I.FontDown /></button>
          </div>
          <div className="grow">
            <button className="cmd" title="Bold"><I.Bold /></button>
            <button className="cmd" title="Italic"><I.Italic /></button>
            <button className="cmd" title="Underline"><I.Underline /><span className="caret"><I.CaretSm /></span></button>
            <button className="cmd" title="Borders"><I.Border /><span className="caret"><I.CaretSm /></span></button>
            <button className="cmd split-stack" title="Fill color">
              <I.Fill />
              <span className="color-strip yellow"></span>
            </button>
            <button className="cmd split-stack" title="Text color">
              <I.TextColor />
              <span className="color-strip red"></span>
            </button>
          </div>
        </div>
        <span className="glabel">Font</span>
      </div>

      {/* Alignment */}
      <div className="rgroup">
        <div className="gcol" style={{gap:2}}>
          <div className="grow">
            <button className="cmd" title="Top align"><I.VTop /></button>
            <button className="cmd" title="Middle align"><I.VMid /></button>
            <button className="cmd" title="Bottom align"><I.VBot /></button>
            <button className="cmd" title="Angle"><I.AngleUp /><span className="caret"><I.CaretSm /></span></button>
            <button className="cmd-with-cap" title="Wrap text"><I.Wrap /> Wrap Text</button>
          </div>
          <div className="grow">
            <button className="cmd" title="Align left"><I.AlignLeft /></button>
            <button className="cmd" title="Align center"><I.AlignCenter /></button>
            <button className="cmd" title="Align right"><I.AlignRight /></button>
            <button className="cmd" title="Decrease indent"><I.IndentDec /></button>
            <button className="cmd" title="Increase indent"><I.IndentInc /></button>
            <button className="cmd-with-cap" title="Merge &amp; Center"><I.Merge /> Merge Cells<span className="caret"><I.CaretSm /></span></button>
          </div>
        </div>
        <span className="glabel">Alignment</span>
      </div>

      {/* Number */}
      <div className="rgroup">
        <div className="gcol" style={{gap:2}}>
          <div className="grow">
            <div className="rselect w-num">General<span className="caret"><I.CaretSm /></span></div>
          </div>
          <div className="grow">
            <button className="cmd" title="Currency"><I.Currency /><span className="caret"><I.CaretSm /></span></button>
            <button className="cmd" title="Percent"><I.Percent /></button>
            <button className="cmd" title="Comma"><I.Comma /></button>
            <button className="cmd" title="Increase decimal"><I.IncDecim /></button>
            <button className="cmd" title="Decrease decimal"><I.DecDecim /></button>
          </div>
        </div>
        <span className="glabel">Number</span>
      </div>

      {/* Styles */}
      <div className="rgroup">
        <button className="cmd-tall" title="Conditional Formatting">
          <span className="icon-md"><I.Conditional /></span>
          <span className="lbl2">Conditional<br/>Formatting</span>
          <span className="caret"><I.CaretSm /></span>
        </button>
        <button className="cmd-tall" title="Format as Table">
          <span className="icon-md"><I.FormatAsTable /></span>
          <span className="lbl2">Format as<br/>Table</span>
          <span className="caret"><I.CaretSm /></span>
        </button>
        <button className="cmd-tall" title="Cell Styles">
          <span className="icon-md"><I.CellStyles /></span>
          <span className="lbl2">Cell<br/>Styles</span>
          <span className="caret"><I.CaretSm /></span>
        </button>
        <span className="glabel">Styles</span>
      </div>

      {/* Cells */}
      <div className="rgroup">
        <button className="cmd-tall" title="Insert">
          <span className="icon-md"><I.InsertCell /></span>
          <span className="lbl2">Insert</span>
          <span className="caret"><I.CaretSm /></span>
        </button>
        <button className="cmd-tall" title="Delete">
          <span className="icon-md"><I.DeleteCell /></span>
          <span className="lbl2">Delete</span>
          <span className="caret"><I.CaretSm /></span>
        </button>
        <button className="cmd-tall" title="Format">
          <span className="icon-md"><I.FormatCell /></span>
          <span className="lbl2">Format</span>
          <span className="caret"><I.CaretSm /></span>
        </button>
        <span className="glabel">Cells</span>
      </div>

      {/* Editing */}
      <div className="rgroup">
        <button className="cmd-tall" title="AutoSum">
          <span className="icon-md"><I.AutoSum /></span>
          <span className="lbl2">AutoSum</span>
          <span className="caret"><I.CaretSm /></span>
        </button>
        <button className="cmd-tall" title="Sort &amp; Filter">
          <span className="icon-md"><I.SortFilter /></span>
          <span className="lbl2">Sort &amp;<br/>Filter</span>
          <span className="caret"><I.CaretSm /></span>
        </button>
        <button className="cmd-tall" title="Find &amp; Select">
          <span className="icon-md"><I.Find /></span>
          <span className="lbl2">Find &amp;<br/>Select</span>
          <span className="caret"><I.CaretSm /></span>
        </button>
        <span className="glabel">Editing</span>
      </div>

      {/* Sensitivity */}
      <div className="rgroup">
        <button className="cmd-tall" title="Sensitivity">
          <span className="icon-md"><I.Sensitivity /></span>
          <span className="lbl2">Sensitivity</span>
        </button>
        <span className="glabel">Sensitivity</span>
      </div>

    </div>
  );
}

// ===== FORMULA BAR =====
function FormulaBar() {
  return (
    <div className="formula-bar">
      <div className="name-box">C7 <span className="caret"><I.CaretSm /></span></div>
      <div className="fb-divider"></div>
      <button className="fb-icon" title="Cancel"><I.X /></button>
      <button className="fb-icon" title="Confirm"><I.Check /></button>
      <button className="fb-icon fx" title="Insert function">fx</button>
      <div className="fb-divider"></div>
      <div className="formula-input">=SUM(C2:C6)</div>
    </div>
  );
}

// ===== GRID =====
function Grid() {
  const selRowIdx = 7;   // row 7 (1-indexed = total row)
  const selColIdx = 2;   // C
  const ROW_COUNT = 18;

  return (
    <div className="grid-wrap">
      <table className="grid-table">
        <colgroup>
          <col style={{ width: "var(--gutter-w)" }} />
          <col style={{ width: "var(--col-w-num)" }} />
          <col style={{ width: "var(--col-w-prod)" }} />
          {Array.from({length: 10}).map((_,i) => <col key={i} style={{ width: "var(--col-w)" }} />)}
        </colgroup>
        <thead>
          <tr>
            <th className="corner"></th>
            {COLS.map((c, i) => (
              <th key={c} className={i === selColIdx ? "col-hl" : ""}>{c}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {Array.from({length: ROW_COUNT}).map((_, rIdx) => {
            const rowNum = rIdx + 1;
            const isRowHl = rowNum === selRowIdx;
            const isHeaderRow = rowNum === 1;
            const isDataRow  = rowNum >= 2 && rowNum <= 6;
            const isTotalRow = rowNum === 7;
            const dataIdx = rowNum - 2;
            const row = isDataRow ? DATA[dataIdx] : null;

            return (
              <tr key={rIdx}>
                <th className={isRowHl ? "row-hl" : ""}>{rowNum}</th>

                {/* A: row index */}
                <td className="col-idx">
                  <div className="cell idx">
                    {isDataRow ? (dataIdx + 1) : ""}
                  </div>
                </td>

                {/* B: product name */}
                <td className="col-prod">
                  <div className="cell">
                    {isHeaderRow ? "Product"
                      : isDataRow ? row.product
                      : isTotalRow ? "Total"
                      : ""}
                  </div>
                </td>

                {/* C: Q1 (selected col, contains total selection at row 7) */}
                <td className={isTotalRow ? "is-selected" : ""}>
                  <div className="cell num">
                    {isHeaderRow ? "Q1 Sales"
                      : isDataRow ? fmt(row.q1)
                      : isTotalRow ? fmt(C_SUM)
                      : ""}
                  </div>
                </td>

                {/* D: Q2 */}
                <td>
                  <div className="cell num">
                    {isHeaderRow ? "Q2 Sales"
                      : isDataRow ? fmt(row.q2)
                      : ""}
                  </div>
                </td>

                {/* E: Q3 */}
                <td>
                  <div className="cell num">
                    {isHeaderRow ? "Q3 Sales"
                      : isDataRow ? fmt(row.q3)
                      : ""}
                  </div>
                </td>

                {/* F: Q4 */}
                <td>
                  <div className="cell num">
                    {isHeaderRow ? "Q4 Sales"
                      : isDataRow ? fmt(row.q4)
                      : ""}
                  </div>
                </td>

                {/* G: Total */}
                <td>
                  <div className="cell num">
                    {isHeaderRow ? "Total Sales"
                      : isDataRow ? fmt(row.total)
                      : ""}
                  </div>
                </td>

                {/* H-M empty */}
                {[0,1,2,3,4,5].map(i => <td key={i}><div className="cell"></div></td>)}
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

// ===== FORMAT PANEL =====
function FormatPanel() {
  const [tab, setTab] = useState("num");
  const tabs = [
    { id: "num",   icon: <I.FmtNum />,    title: "Number" },
    { id: "font",  icon: <I.FmtFont />,   title: "Font" },
    { id: "align", icon: <I.FmtAlign />,  title: "Alignment" },
    { id: "fill",  icon: <I.FmtFill />,   title: "Fill" },
    { id: "bord",  icon: <I.FmtBorder />, title: "Border" },
    { id: "fx",    icon: <I.FmtEffect />, title: "Effects" },
  ];

  return (
    <aside className="fmt-panel">
      <div className="fmt-head">
        <div className="fmt-title">Format</div>
        <button className="icon-btn" title="Close"><I.X /></button>
      </div>

      <div className="fmt-tabs">
        {tabs.map(t => (
          <button key={t.id}
                  className={"fmt-tab" + (tab === t.id ? " is-active" : "")}
                  onClick={() => setTab(t.id)}
                  title={t.title}>
            {t.icon}
          </button>
        ))}
      </div>

      <div className="fmt-body">
        <div className="fmt-section">
          <div className="fmt-section-title">Number Format</div>
          <div className="fmt-row">
            <div className="fmt-select">General <span className="caret"><I.CaretSm /></span></div>
          </div>
          <div className="fmt-row" style={{marginTop: 6, justifyContent: "space-between"}}>
            <div className="fmt-btn-row">
              <button className="pbtn" title="Currency"><I.Currency /></button>
              <button className="pbtn" title="Percent"><I.Percent /></button>
              <button className="pbtn" title="Comma"><I.Comma /></button>
            </div>
            <div className="fmt-btn-row">
              <button className="pbtn" title="Increase decimal"><I.IncDecim /></button>
              <button className="pbtn" title="Decrease decimal"><I.DecDecim /></button>
            </div>
          </div>
        </div>

        <div className="fmt-section">
          <div className="fmt-section-title">Font</div>
          <div className="fmt-row">
            <div className="fmt-select">Calibri <span className="caret"><I.CaretSm /></span></div>
            <div className="fmt-select" style={{maxWidth: 56}}>11 <span className="caret"><I.CaretSm /></span></div>
          </div>
          <div className="fmt-row" style={{marginTop: 6, justifyContent: "space-between"}}>
            <div className="fmt-btn-row">
              <button className="pbtn"><I.Bold /></button>
              <button className="pbtn"><I.Italic /></button>
              <button className="pbtn"><I.Underline /></button>
              <button className="pbtn"><I.Strike /></button>
            </div>
            <div className="fmt-btn-row">
              <button className="pbtn split-stack"><I.Fill /></button>
              <button className="pbtn split-stack"><I.TextColor /></button>
            </div>
          </div>
        </div>

        <div className="fmt-section">
          <div className="fmt-section-title">Alignment</div>
          <div className="fmt-row" style={{justifyContent:"space-between"}}>
            <div className="fmt-btn-row">
              <button className="pbtn"><I.AlignLeft /></button>
              <button className="pbtn"><I.AlignCenter /></button>
              <button className="pbtn"><I.AlignRight /></button>
            </div>
            <div className="fmt-btn-row">
              <button className="pbtn"><I.VTop /></button>
              <button className="pbtn"><I.VMid /></button>
              <button className="pbtn"><I.VBot /></button>
            </div>
          </div>
          <div className="fmt-row" style={{marginTop: 6}}>
            <div className="fmt-btn-row">
              <button className="pbtn"><I.Wrap /></button>
              <button className="pbtn"><I.Merge /></button>
            </div>
          </div>
        </div>

        <div className="fmt-section">
          <div className="fmt-section-title">Fill</div>
          <div className="fmt-row">
            <div className="fmt-select compact" style={{flex: 1}}>
              <span style={{display:"inline-flex", alignItems:"center", gap:6}}>
                <span style={{width:14, height:14, background:"#FFFFFF", border:"1px solid #D1D1D1", borderRadius:2}}></span>
                No Fill
              </span>
              <span className="caret"><I.CaretSm /></span>
            </div>
          </div>
        </div>

        <div className="fmt-section">
          <div className="fmt-section-title">Border</div>
          <div className="fmt-row">
            <div className="fmt-select compact" style={{flex: 1}}>
              <span>No Border</span>
              <span className="caret"><I.CaretSm /></span>
            </div>
          </div>
        </div>
      </div>

      <a className="fmt-more">More Formatting Options</a>
    </aside>
  );
}

// ===== BOTTOM SHEET TABS =====
const SHEETS = [
  { name: "Sales Summary", active: true },
  { name: "Products" },
  { name: "Regions" },
  { name: "Data" },
];

function BottomTabs() {
  return (
    <div className="bottom-tabs">
      <div className="bnav">
        <button className="icon-btn"><I.ChevL /></button>
        <button className="icon-btn"><I.ChevR /></button>
      </div>
      {SHEETS.map((s, i) => (
        <button key={i} className={"sheet-tab" + (s.active ? " is-active" : "")}>
          {s.name}
        </button>
      ))}
      <button className="sheet-tab-plus" title="Add sheet"><I.Plus /></button>
    </div>
  );
}

// ===== STATUS BAR =====
function StatusBar() {
  return (
    <div className="statusbar">
      <span className="item">Ready</span>
      <span className="sep"></span>
      <span className="item"><I.Access /> Accessibility: Good to go</span>

      <div className="right">
        <span className="vsw">
          <button className="vbtn is-active" title="Normal"><I.ViewNormal /></button>
          <button className="vbtn" title="Page Layout"><I.ViewLayout /></button>
          <button className="vbtn" title="Page Break Preview"><I.ViewBreak /></button>
        </span>
        <span className="zoom">
          <button className="icon-btn" style={{width: 18, height: 18}}><I.ZoomOut /></button>
          <span className="slider"></span>
          <button className="icon-btn" style={{width: 18, height: 18}}><I.ZoomIn /></button>
          <span className="pct">100%</span>
        </span>
      </div>
    </div>
  );
}

// ===== ROOT =====
function App() {
  const [tab, setTab] = useState("Home");
  return (
    <div className="app">
      <Titlebar />
      <RibbonTabs active={tab} onChange={setTab} />
      <RibbonHome />
      <FormulaBar />
      <div className="workspace">
        <Grid />
        <FormatPanel />
      </div>
      <BottomTabs />
      <StatusBar />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);