import { NavLink, useLocation, useNavigate } from 'react-router-dom';
import { useBusiness } from '../context/BusinessContext';
import { getBusinessImage } from '../utils/businessProfile';

const SVG_ICONS = {
  analytics: (
    <svg className="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M7 20V10m5 10V4m5 16v-6M4 20h16" />
    </svg>
  ),
  globalSms: (
    <svg className="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
    </svg>
  ),
  events: (
    <svg className="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
    </svg>
  ),
  templates: (
    <svg className="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
    </svg>
  ),
};

function TopLevelStatus({ done, active }) {
  if (done) {
    return (
      <span className="inline-flex h-5 w-5 items-center justify-center rounded-full bg-primary-blue text-white ">
        <svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M5 13l4 4L19 7" />
        </svg>
      </span>
    );
  }

  if (active) {
    return <span className="inline-block h-2.5 w-2.5 rounded-full bg-primary-blue " />;
  }

  return <span className="inline-block h-2.5 w-2.5 rounded-full bg-gray-200" />;
}

function StageMarker({ done, active, enabled }) {
  if (done) {
    return (
      <span className="inline-flex h-4 w-4 items-center justify-center rounded-full bg-primary-blue text-white ">
        <svg className="h-2.5 w-2.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M5 13l4 4L19 7" />
        </svg>
      </span>
    );
  }

  if (active) {
    return <span className="inline-block h-3 w-3 rounded-full border-2 border-white bg-primary-blue shadow-[0_0_0_1px_var(--color-primary-blue)]" />;
  }

  if (!enabled) {
    return <span className="inline-block h-3 w-3 rounded-full bg-gray-200" />;
  }

  return <span className="inline-block h-3 w-3 rounded-full bg-refresh-active" />;
}

export default function Sidebar({ onOpenReview, reviewLoading = false, reviewError = '' }) {
  const {
    activeBusiness,
    activeBusinessId,
    clearBusiness,
    hasGlobalSms,
    isSetupComplete,
    hasSelectedTemplates,
  } = useBusiness();
  const navigate = useNavigate();
  const location = useLocation();
  const businessImage = getBusinessImage(activeBusiness);

  const analyticsPath = `/${activeBusinessId}/analytics`;
  const globalSmsPath = `/${activeBusinessId}/global-sms`;
  const eventsPath = `/${activeBusinessId}/events`;
  const templatesPath = `/${activeBusinessId}/templates`;

  const isAnalyticsRoute = location.pathname === analyticsPath;
  const isGlobalSmsRoute = location.pathname === globalSmsPath;
  const isEventsRoute = location.pathname === eventsPath;
  const isTemplatesRoute = location.pathname === templatesPath;

  const omniSubsteps = [
    { id: 'profile', label: 'Add / Select Profile', done: hasGlobalSms, active: isGlobalSmsRoute && !hasGlobalSms },
    { id: 'validate', label: 'Validate cURL', done: hasGlobalSms, active: false },
    { id: 'fields', label: 'Complete Fields', done: isSetupComplete, active: isGlobalSmsRoute && hasGlobalSms && !isSetupComplete },
    { id: 'ready', label: 'Ready', done: isSetupComplete, active: isGlobalSmsRoute && isSetupComplete },
  ];

  const stepItems = [
    {
      id: 'globalSms',
      to: globalSmsPath,
      label: 'Omni-channel SMS',
      enabled: true,
      done: isSetupComplete && !isGlobalSmsRoute,
      active: isGlobalSmsRoute,
      expanded: isGlobalSmsRoute,
      substeps: omniSubsteps,
    },
    {
      id: 'events',
      to: eventsPath,
      label: 'Events',
      enabled: isSetupComplete,
      done: hasSelectedTemplates && !isEventsRoute,
      active: isEventsRoute,
    },
    {
      id: 'templates',
      to: templatesPath,
      label: 'Templates',
      enabled: hasSelectedTemplates,
      done: false,
      active: isTemplatesRoute,
    },
  ];

  function handleSwitch() {
    clearBusiness();
    navigate('/');
  }

  return (
    <aside className="fixed top-0 left-0 h-screen w-60 bg-white border-r border-gray-200 flex flex-col z-10">
      {/* Business info + switch */}
      <div className="px-5 py-5 border-b border-gray-100">
        <button
          onClick={handleSwitch}
          className="flex items-center gap-2 text-gray-500 hover:text-gray-800 transition text-sm group font-medium"
        >
          <span className="group-hover:-translate-x-0.5 transition-transform text-lg leading-none">&larr;</span>
          <span>Switch Business</span>
        </button>
        {activeBusiness && (
          <div className="mt-5 flex flex-col items-center text-center">
            <div className="flex h-16 w-16 rounded-2xl border border-gray-200 bg-white items-center justify-center text-lg font-bold text-white shrink-0 overflow-hidden shadow-sm">
              {businessImage ? (
                <img
                  src={businessImage}
                  alt={activeBusiness.brandName || 'Business'}
                  className="h-full w-full object-contain p-1.5"
                />
              ) : (
                <span className="flex h-full w-full items-center justify-center rounded-2xl bg-primary-blue text-lg">
                  {activeBusiness.brandName?.[0]?.toUpperCase() || 'B'}
                </span>
              )}
            </div>
            <div className="mt-3 min-w-0 w-full">
              <p className="text-[15px] font-semibold leading-tight text-gray-800 truncate">{activeBusiness.brandName}</p>
              {activeBusinessId && (
                <>
                  <div className="mt-3 flex justify-center">
                    <div className="relative inline-flex items-center">
                      <button
                        onClick={onOpenReview}
                        disabled={reviewLoading}
                        className="group inline-flex h-9 w-9 items-center justify-center rounded-full border border-gray-200 bg-white text-gray-500 shadow-sm transition hover:border-gray-300 hover:bg-gray-50 hover:text-primary-blue disabled:cursor-wait disabled:opacity-60"
                        title="View brand details"
                        aria-label="View brand details"
                      >
                        {reviewLoading ? (
                          <span className="h-4 w-4 rounded-full border-2 border-gray-200 border-t-primary-blue animate-spin" />
                        ) : (
                          <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M1.458 12C2.732 7.943 6.523 5 12 5c5.477 0 9.268 2.943 10.542 7-1.274 4.057-5.065 7-10.542 7-5.477 0-9.268-2.943-10.542-7z" />
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 15a3 3 0 100-6 3 3 0 000 6z" />
                          </svg>
                        )}
                        <span className="pointer-events-none absolute left-1/2 top-full mt-2 hidden -translate-x-1/2 whitespace-nowrap rounded-md border border-gray-200 bg-white px-2.5 py-1 text-xs font-medium text-gray-600 shadow-sm group-hover:block">
                          View brand details
                        </span>
                      </button>
                    </div>
                  </div>
                  {reviewError && (
                    <p className="mt-2 text-xs text-red-600">{reviewError}</p>
                  )}
                </>
              )}
            </div>
          </div>
        )}
      </div>

      {/* Nav */}
      <nav className="flex-1 px-3 pt-5">
        <div className="mb-4">
          {isSetupComplete ? (
            <NavLink
              to={analyticsPath}
              className={`flex items-center gap-3 rounded-xl px-3 py-3 text-sm font-semibold transition-colors ${
                isAnalyticsRoute
                  ? 'bg-gray-100 text-gray-900'
                  : 'text-gray-600 hover:bg-page-bg hover:text-gray-900'
              }`}
            >
              {SVG_ICONS.analytics}
              <span className="flex-1 truncate">Analytics</span>
            </NavLink>
          ) : (
            <div className="flex items-center gap-3 rounded-xl px-3 py-3 text-sm font-semibold text-gray-300 cursor-not-allowed select-none">
              {SVG_ICONS.analytics}
              <span className="flex-1 truncate">Analytics</span>
            </div>
          )}
        </div>

        <div className="space-y-1">
          {stepItems.map((item, index) => (
            <div key={item.id} className="relative grid grid-cols-[26px_minmax(0,1fr)] gap-2">
              <div className="relative flex min-h-full justify-center">
                {index > 0 && <div className="absolute left-1/2 -top-2 h-7 w-px -translate-x-1/2 bg-gray-200" />}
                {index < stepItems.length - 1 && <div className="absolute left-1/2 top-5 -bottom-2 w-px -translate-x-1/2 bg-gray-200" />}
                <div className="absolute left-1/2 top-5 -translate-x-1/2 -translate-y-1/2">
                  <StageMarker done={item.done} active={item.active} enabled={item.enabled} />
                </div>
              </div>

              <div>
                {item.enabled ? (
                  <NavLink
                    to={item.to}
                    className={`flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors duration-150 ${
                      item.active
                        ? 'bg-gray-100/70 text-gray-800'
                        : 'text-gray-500 hover:text-gray-800 hover:bg-page-bg'
                    }`}
                  >
                    {SVG_ICONS[item.id]}
                    <span className="flex-1 truncate">{item.label}</span>
                    <div className="flex items-center gap-3">
                      {!item.substeps && <TopLevelStatus done={item.done} active={item.active} />}
                      {item.substeps && (
                        <svg
                          className={`h-4 w-4 text-gray-400 transition-transform ${item.expanded ? 'rotate-180' : ''}`}
                          fill="none"
                          stroke="currentColor"
                          viewBox="0 0 24 24"
                        >
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
                        </svg>
                      )}
                    </div>
                  </NavLink>
                ) : (
                  <div
                    aria-disabled="true"
                    className="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium text-gray-300 cursor-not-allowed select-none"
                  >
                    {SVG_ICONS[item.id]}
                    <span className="flex-1 truncate">{item.label}</span>
                    <div className="flex items-center gap-3">
                      {!item.substeps && <TopLevelStatus done={item.done} active={item.active} />}
                    </div>
                  </div>
                )}

                {item.expanded && item.substeps && (
                  <div className="relative mt-2 mb-2 pb-1">
                    <div className="absolute left-[21.5px] top-1 bottom-3 w-px bg-gray-200" />
                    <div className="space-y-0.5">
                      {item.substeps.map((substep) => (
                        <div key={substep.id} className="relative flex items-center pr-3 group cursor-default">
                          <div className="w-[44px] flex justify-center items-center shrink-0">
                            {substep.active && <div className="z-10 h-1.5 w-1.5 rounded-full bg-primary-blue shadow-[0_0_0_2px_white]" />}
                          </div>
                          <div
                            className={`flex-1 px-3 py-2 rounded-md text-[14px] transition-colors ${
                              substep.active
                                ? 'bg-white text-primary-blue font-semibold'
                                : 'text-gray-500 font-medium hover:text-gray-800 hover:bg-page-bg'
                            }`}
                          >
                            {substep.label}
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            </div>
          ))}
        </div>
      </nav>

      <div className="px-5 py-4 border-t border-gray-100">
        <p className="text-xs text-gray-500 font-medium tracking-wide">TRAI-compliant SMS</p>
      </div>
    </aside>
  );
}