import React, { useState } from "react";
import { TabButton } from "./shared/TabButton";
import { ExecutiveDashboard } from "./ExecutiveDashboard";
import { ProcessDeepDive } from "./ProcessDeepDive";
import { RoleReadiness } from "./RoleReadiness";
import { DataMigration } from "./DataMigration";
import { RiskReport } from "./RiskReport";
import { PerformanceHeatmap } from "./PerformanceHeatmap";
import { AccessibilityReport } from "./AccessibilityReport";
import { InterfaceQuality } from "./InterfaceQuality";
import { E2EQuality } from "./E2EQuality";
import { GeoImpact } from "./GeoImpact";
import { UserExperience } from "./UserExperience";
import { HowItWorks } from "./HowItWorks";

const TABS = [
  { id: "exec", label: "Steering Committee", icon: "\u{1F4CA}" },
  { id: "process", label: "Process Deep Dive", icon: "\u{1F504}" },
  { id: "roles", label: "Role Readiness", icon: "\u{1F465}" },
  { id: "data", label: "Data Migration", icon: "\u{1F4E6}" },
  { id: "risk", label: "Risk Register", icon: "\u26A0\uFE0F" },
  { id: "perf", label: "Performance", icon: "\u{1F525}" },
  { id: "a11y", label: "Accessibility", icon: "\u267F" },
  { id: "interfaces", label: "Interfaces", icon: "\u{1F517}" },
  { id: "e2e", label: "E2E Quality", icon: "\u{1F500}" },
  { id: "geo", label: "Global Impact", icon: "\u{1F30D}" },
  { id: "ux", label: "User Experience", icon: "\u{1F464}" },
  { id: "how", label: "How It Works", icon: "\u2699\uFE0F" },
];

export const FullDashboard = () => {
  const [activeTab, setActiveTab] = useState("exec");

  return (
    <div style={{ fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif", background: "#f8fafc", minHeight: "100vh" }}>
      {/* Tab Navigation */}
      <div style={{
        display: "flex",
        overflowX: "auto",
        borderBottom: "1px solid #e2e8f0",
        background: "#fff",
        position: "sticky",
        top: 0,
        zIndex: 10,
      }}>
        {TABS.map(tab => (
          <TabButton
            key={tab.id}
            active={activeTab === tab.id}
            label={tab.label}
            icon={tab.icon}
            onClick={() => setActiveTab(tab.id)}
          />
        ))}
      </div>

      {/* Content */}
      <div style={{ padding: "20px", maxWidth: 1100, margin: "0 auto" }}>
        {activeTab === "exec" && <ExecutiveDashboard />}
        {activeTab === "process" && <ProcessDeepDive />}
        {activeTab === "roles" && <RoleReadiness />}
        {activeTab === "data" && <DataMigration />}
        {activeTab === "risk" && <RiskReport />}
        {activeTab === "perf" && <PerformanceHeatmap />}
        {activeTab === "a11y" && <AccessibilityReport />}
        {activeTab === "interfaces" && <InterfaceQuality />}
        {activeTab === "e2e" && <E2EQuality />}
        {activeTab === "geo" && <GeoImpact />}
        {activeTab === "ux" && <UserExperience />}
        {activeTab === "how" && <HowItWorks />}
      </div>

      {/* Footer */}
      <div style={{ textAlign: "center", padding: "16px", fontSize: 11, color: "#94a3b8", borderTop: "1px solid #e2e8f0" }}>
        Generated by Praman Plugin + Playwright · SAP S/4HANA Transformation Quality Intelligence · Sample Data for Demonstration
      </div>
    </div>
  );
};

export default FullDashboard;
