import React, { useEffect, useState } from 'react';
import {
  navigateSystem,
  parseRoute,
  SYSTEM_SECTION_LABELS,
  type SystemSection,
} from '../navigation';
import { OrganizationSection } from './OrganizationSection';
import { NetworkSection } from './NetworkSection';
import { AppTemplatesSection } from './AppTemplatesSection';

const SECTIONS: { id: SystemSection; icon: React.ReactNode; hint: string }[] = [
  {
    id: 'organization',
    hint: 'Đuôi email & tổ chức',
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M3 21h18" /><path d="M5 21V7l8-4v18" /><path d="M19 21V11l-6-4" />
      </svg>
    ),
  },
  {
    id: 'network',
    hint: 'WiFi được phép',
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M5 12.55a11 11 0 0 1 14.08 0" />
        <path d="M1.42 9a16 16 0 0 1 21.16 0" />
        <circle cx="12" cy="20" r="1" />
      </svg>
    ),
  },
  {
    id: 'templates',
    hint: 'Bộ keyword app',
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <rect x="3" y="3" width="7" height="7" rx="1" /><rect x="14" y="3" width="7" height="7" rx="1" />
        <rect x="3" y="14" width="7" height="7" rx="1" /><rect x="14" y="14" width="7" height="7" rx="1" />
      </svg>
    ),
  },
];

export const SystemTab: React.FC = () => {
  const [section, setSection] = useState<SystemSection>(() => parseRoute().systemSection);

  useEffect(() => {
    const sync = () => setSection(parseRoute().systemSection);
    window.addEventListener('popstate', sync);
    return () => window.removeEventListener('popstate', sync);
  }, []);

  const selectSection = (id: SystemSection) => {
    setSection(id);
    navigateSystem(id);
  };

  return (
    <div className="tab-page system-page">
      <header className="page-header">
        <h1 className="page-title">Quản lý hệ thống</h1>
        <p className="page-desc">
          Cấu hình tổ chức, mạng WiFi và khung ứng dụng dùng chung cho toàn hệ thống.
        </p>
      </header>

      <nav className="system-subnav" aria-label="Mục hệ thống">
        {SECTIONS.map((s) => (
          <button
            key={s.id}
            type="button"
            className={`system-subnav-btn ${section === s.id ? 'active' : ''}`}
            onClick={() => selectSection(s.id)}
          >
            <span className="system-subnav-icon">{s.icon}</span>
            <span className="system-subnav-text">
              <strong>{SYSTEM_SECTION_LABELS[s.id]}</strong>
              <small>{s.hint}</small>
            </span>
          </button>
        ))}
      </nav>

      <div className="system-panel">
        {section === 'organization' && <OrganizationSection />}
        {section === 'network' && <NetworkSection />}
        {section === 'templates' && <AppTemplatesSection />}
      </div>
    </div>
  );
};