import React from 'react';
import { Link } from 'react-router-dom';
import AdminHeader from '@/components/admin/AdminHeader';
import QuarterlyWindows from '@/pages/Admin/configuration/QuarterlyWindows';
import IsicHsCodes from '@/pages/Admin/configuration/IsicHsCodes';
import UnitMaster from '@/pages/Admin/configuration/UnitMaster';
import AdminUsers from '@/pages/Admin/configuration/AdminUsers';
import CompanyProfile from '@/pages/Admin/configuration/CompanyProfile';
import CaretUp from '@/assets/images/caret-up.svg';

const Configuration = () => {
  const tabs = ['Quarterly Windows', 'HS Codes', 'Unit Master', 'Admin Users', 'Company Profile'];
  const [active, setActive] = React.useState(tabs[0]);

  const Breadcrumbs = (
    <nav className="mb-6 text-sm text-[#8F9299] flex items-center gap-3">
      <Link to="/admin/dashboard" className="flex items-center gap-1 text-[#232528] hover:underline">
        Dashboard
        <img src={CaretUp} alt="Dashboard" className="h-3 w-3" />
      </Link>
      <span className="flex items-center gap-1 text-[#92722A] font-medium">
        Configuration
        <img src={CaretUp} alt="Configuration" className="h-3 w-3" />
      </span>
    </nav>
  );

  const PageHeader = (
    <div className="w-full mb-6">
      <div className="h-14 w-full border-b border-[#E5E7EB] flex items-end">
        <div className="flex h-full items-end gap-6 overflow-x-auto">
          {tabs.map((t) => (
            <button
              key={t}
              type="button"
              onClick={() => setActive(t)}
              className={`pb-3 text-sm whitespace-nowrap border-b-2 cursor-pointer transition-colors ${
                active === t
                  ? 'text-[#92722A] border-[#92722A] font-medium'
                  : 'text-[#232528] border-transparent hover:text-[#92722A]'
              }`}
            >
              {t}
            </button>
          ))}
        </div>
      </div>
    </div>
  );

  const isQuarterTab = active === 'Quarterly Windows';
  const isIsicTab = active === 'HS Codes';
  const isUnitMasterTab = active === 'Unit Master';
  const isAdminTab = active === 'Admin Users';
  const isCompanyProfileTab = active === 'Company Profile';

  return (
    <div className="min-h-screen bg-[#F7F7F7]">
      <AdminHeader />
      <div className="max-w-[1280px] mx-auto px-4 py-6">
        {Breadcrumbs}
        {PageHeader}

        {isQuarterTab && <QuarterlyWindows />}

        {isIsicTab && <IsicHsCodes />}

        {isUnitMasterTab && <UnitMaster />}

        {isAdminTab && <AdminUsers />}

        {isCompanyProfileTab && <CompanyProfile />}

        {!isQuarterTab && !isIsicTab && !isUnitMasterTab && !isAdminTab && !isCompanyProfileTab && (
          <div className="bg-white w-full rounded-lg shadow-sm ring-1 ring-gray-200">
            <div className="px-6 py-10 text-sm text-[#5F646D]">{active} content coming soon…</div>
          </div>
        )}
      </div>
    </div>
  );
};

export default Configuration;