import React, { useEffect, useState } from 'react';
import { useConfig } from '../hooks/useApi';

type Page = 'dashboard' | 'checklist' | 'documents' | 'scanner' | 'incidents' | 'education' | 'settings';

interface NavigationProps {
  currentPage: Page;
  onNavigate: (page: Page) => void;
  badges?: {
    incidents?: number; // overdue incidents
    scanner?: number;   // critical vulnerabilities
  };
}

const NAV_ITEMS: { id: Page; label: string; icon: string; premium?: boolean }[] = [
  { id: 'dashboard', label: 'Dashboard', icon: 'dashboard' },
  { id: 'checklist', label: 'Compliance Checklist', icon: 'checklist' },
  { id: 'documents', label: 'Document Generator', icon: 'documents' },
  { id: 'education', label: 'CRA Guide', icon: 'education' },
  { id: 'scanner', label: 'Vulnerability Scanner', icon: 'scanner', premium: true },
  { id: 'incidents', label: 'Incident Center', icon: 'incidents', premium: true },
  { id: 'settings', label: 'Settings', icon: 'settings' },
];

export function Navigation({ currentPage, onNavigate, badges }: NavigationProps) {
  const config = useConfig();
  const isPremium = config.plan !== 'free';

  return (
    <div className="cra-nav">
      <div className="cra-nav-header">
        <div className="cra-nav-brand">
          <span className="cra-nav-logo" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width="16" height="16">
              <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
            </svg>
          </span>
          <h1 className="cra-nav-title">ResilienceWP</h1>
        </div>
        <span className={`cra-plan-badge cra-plan-${config.plan}`}>
          {config.plan.toUpperCase()}
        </span>
      </div>
      <nav className="cra-nav-links">
        {NAV_ITEMS.map((item) => {
          const badgeCount = badges?.[item.id as keyof typeof badges];
          return (
            <button
              key={item.id}
              className={`cra-nav-link ${currentPage === item.id ? 'active' : ''} ${item.premium && !isPremium ? 'premium-locked' : ''}`}
              onClick={() => onNavigate(item.id)}
            >
              <span className="cra-nav-icon" aria-hidden="true">{renderIcon(item.icon)}</span>
              <span className="cra-nav-label">{item.label}</span>
              {badgeCount && badgeCount > 0 ? (
                <span className="cra-nav-badge">{badgeCount > 9 ? '9+' : badgeCount}</span>
              ) : item.premium && !isPremium ? (
                <span className="cra-premium-tag">PAID</span>
              ) : null}
            </button>
          );
        })}
        <CraCountdown />
      </nav>
    </div>
  );
}

function CraCountdown() {
  const REPORTING_DEADLINE = new Date('2026-09-11T00:00:00Z').getTime();
  const [now, setNow] = useState(Date.now());

  useEffect(() => {
    const id = setInterval(() => setNow(Date.now()), 60_000);
    return () => clearInterval(id);
  }, []);

  const diff = REPORTING_DEADLINE - now;
  if (diff <= 0) {
    return (
      <div className="cra-countdown cra-countdown--active">
        <span className="cra-countdown-label">CRA Reporting</span>
        <strong className="cra-countdown-value">Active Now</strong>
      </div>
    );
  }

  const days = Math.floor(diff / 86_400_000);
  const hours = Math.floor((diff % 86_400_000) / 3_600_000);

  return (
    <div className="cra-countdown">
      <span className="cra-countdown-label">CRA Reporting Deadline</span>
      <strong className="cra-countdown-value">{days}d {hours}h</strong>
    </div>
  );
}

function renderIcon(name: string) {
  const common = {
    viewBox: '0 0 24 24',
    fill: 'none',
    stroke: 'currentColor',
    strokeWidth: 2,
    strokeLinecap: 'round' as const,
    strokeLinejoin: 'round' as const,
    width: 16,
    height: 16,
  };

  if (name === 'dashboard') {
    return (
      <svg {...common}><rect x="3" y="3" width="7" height="7" /><rect x="14" y="3" width="7" height="5" /><rect x="14" y="12" width="7" height="9" /><rect x="3" y="14" width="7" height="7" /></svg>
    );
  }
  if (name === 'checklist') {
    return (
      <svg {...common}><path d="M9 6h11" /><path d="M9 12h11" /><path d="M9 18h11" /><path d="m3 6 1.5 1.5L7 5" /><path d="m3 12 1.5 1.5L7 11" /><path d="m3 18 1.5 1.5L7 17" /></svg>
    );
  }
  if (name === 'documents') {
    return (
      <svg {...common}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><path d="M14 2v6h6" /></svg>
    );
  }
  if (name === 'education') {
    return (
      <svg {...common}><path d="M2 7l10-5 10 5-10 5-10-5z" /><path d="M6 10v5c0 1.5 2.7 3 6 3s6-1.5 6-3v-5" /></svg>
    );
  }
  if (name === 'scanner') {
    return (
      <svg {...common}><circle cx="11" cy="11" r="7" /><path d="m21 21-4.3-4.3" /></svg>
    );
  }
  if (name === 'incidents') {
    return (
      <svg {...common}><path d="M12 9v4" /><path d="M12 17h.01" /><path d="M10.3 3.6 1.8 18A2 2 0 0 0 3.5 21h17a2 2 0 0 0 1.7-3L13.7 3.6a2 2 0 0 0-3.4 0z" /></svg>
    );
  }
  return (
    <svg {...common}><circle cx="12" cy="12" r="3" /><path d="M19.4 15a1 1 0 0 0 .2 1.1l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1 1 0 0 0-1.1-.2 1 1 0 0 0-.6.9V20a2 2 0 1 1-4 0v-.2a1 1 0 0 0-.6-.9 1 1 0 0 0-1.1.2l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1 1 0 0 0 .2-1.1 1 1 0 0 0-.9-.6H4a2 2 0 1 1 0-4h.2a1 1 0 0 0 .9-.6 1 1 0 0 0-.2-1.1l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1 1 0 0 0 1.1.2H9a1 1 0 0 0 .6-.9V4a2 2 0 1 1 4 0v.2a1 1 0 0 0 .6.9 1 1 0 0 0 1.1-.2l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1 1 0 0 0-.2 1.1V9c0 .4.2.7.6.9H20a2 2 0 1 1 0 4h-.2a1 1 0 0 0-.4 1.1z" /></svg>
  );
}