'use client';

import React from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import styles from './Header.module.css';
import { useLocale } from '@/lib/i18n/LocaleContext';
import { useUser } from '@/lib/auth/UserContext';

interface HeaderProps {
  activeTab: 'plans' | 'goals' | 'import' | 'simulation' | 'approvals' | 'history' | 'dashboard' | 'audit' | 'none';
}

export default function Header({ activeTab }: HeaderProps) {
  const router = useRouter();
  const { locale, setLocale, t } = useLocale();
  const { role, refreshUser } = useUser();

  const handleLogout = async () => {
    try {
      await fetch('/api/auth/logout', { method: 'POST' });
      await refreshUser();
      router.push('/login');
      router.refresh();
    } catch (err) {
      console.error('Failed to log out', err);
    }
  };

  const showImportLink = role === 'admin' || role === 'analyst' || role === 'commercial_leader';
  const showSimulationLink = role === 'admin' || role === 'analyst';
  const showApprovalsLink = role === 'admin' || role === 'commercial_leader';
  const showDashboardLink = role === 'admin' || role === 'director' || role === 'analyst';
  const showAuditLogsLink = role === 'admin';

  return (
    <header className={styles.header}>
      <div className={styles.logoArea}>
        <span className={styles.logoText}>Remuneración Estelar</span>
      </div>
      <nav className={styles.nav}>
        <Link
          href="/plans"
          className={`${styles.navLink} ${activeTab === 'plans' ? styles.navLinkActive : ''}`}
        >
          {t('nav.plans')}
        </Link>
        <Link
          href="/goals"
          className={`${styles.navLink} ${activeTab === 'goals' ? styles.navLinkActive : ''}`}
        >
          {t('nav.goals')}
        </Link>
        {showImportLink && (
          <Link
            href="/sales/import"
            className={`${styles.navLink} ${activeTab === 'import' ? styles.navLinkActive : ''}`}
            id="nav-import-sales"
          >
            {t('nav.import')}
          </Link>
        )}
        {showSimulationLink && (
          <Link
            href="/sales/simulation"
            className={`${styles.navLink} ${activeTab === 'simulation' ? styles.navLinkActive : ''}`}
            id="nav-simulation"
          >
            {t('nav.simulation')}
          </Link>
        )}
        {showApprovalsLink && (
          <Link
            href="/settlements/approvals"
            className={`${styles.navLink} ${activeTab === 'approvals' ? styles.navLinkActive : ''}`}
            id="nav-approvals"
          >
            {t('nav.approvals')}
          </Link>
        )}
        <Link
          href="/history"
          className={`${styles.navLink} ${activeTab === 'history' ? styles.navLinkActive : ''}`}
          id="nav-history"
        >
          {t('nav.history')}
        </Link>
        {showDashboardLink && (
          <Link
            href="/dashboard"
            className={`${styles.navLink} ${activeTab === 'dashboard' ? styles.navLinkActive : ''}`}
            id="nav-dashboard"
          >
            {t('nav.dashboard')}
          </Link>
        )}
        {showAuditLogsLink && (
          <Link
            href="/admin/audit-logs"
            className={`${styles.navLink} ${activeTab === 'audit' ? styles.navLinkActive : ''}`}
            id="nav-audit-logs"
          >
            {t('nav.audit')}
          </Link>
        )}
      </nav>
      <div className={styles.rightArea}>
        <select
          value={locale}
          onChange={(e) => setLocale(e.target.value as 'en' | 'es')}
          className={styles.localeSelector}
          id="language-selector"
        >
          <option value="es">ES</option>
          <option value="en">EN</option>
        </select>
        <button onClick={handleLogout} className={styles.logoutBtn}>
          {t('nav.logout')}
        </button>
      </div>
    </header>
  );
}

