// Onboarding modal — shown on first login when no projects exist
const OBIcons = window.Icons;
const OB_KEY = 'navia_onboarded_v1';

function OnboardingModal({ onClose, onCreateProject, onAddTask }) {
  const [step, setStep] = React.useState(0);

  const steps = [
    {
      icon: '🎉',
      title: 'Navia\'ya hoş geldin!',
      desc: 'Firmalarını yönet, görevleri takip et, ekibinle birlikte çalış. Hızlı bir tur yapalım.',
      action: 'Başla',
      skip: true,
    },
    {
      icon: '📁',
      title: 'İlk firmayı oluştur',
      desc: 'Firmalar, görevlerin bulunduğu çalışma alanlarıdır. Kanban, liste ve sprint görünümleriyle yönetebilirsin.',
      action: 'Firma Oluştur',
      actionFn: () => { onCreateProject(); dismiss(); },
      skip: true,
    },
    {
      icon: '✅',
      title: 'Görev ekle ve takip et',
      desc: 'Her göreve öncelik, son tarih, etiket ve alt görevler ekleyebilirsin. Takvimde sürükleyerek tarihi değiştirebilirsin.',
      action: 'Anladım',
      skip: false,
    },
    {
      icon: '🚀',
      title: 'Hazırsın!',
      desc: 'Şimdi sol menüden bir firma oluştur veya "Yeni Görev" düğmesiyle başla. İyi çalışmalar!',
      action: 'Uygulamayı Keşfet',
      actionFn: dismiss,
      skip: false,
    },
  ];

  function dismiss() {
    try { localStorage.setItem(OB_KEY, '1'); } catch (e) {}
    onClose();
  }

  const current = steps[step];
  const isLast  = step === steps.length - 1;

  return (
    <div className="onboarding-overlay">
      <div className="onboarding-modal">
        {/* Progress dots */}
        <div className="onboarding-dots">
          {steps.map((_, i) => (
            <span key={i} className={`onboarding-dot ${i === step ? 'active' : i < step ? 'done' : ''}`} />
          ))}
        </div>

        {/* Content */}
        <div className="onboarding-icon">{current.icon}</div>
        <h2 className="onboarding-title">{current.title}</h2>
        <p className="onboarding-desc">{current.desc}</p>

        {/* Feature highlights for step 2 */}
        {step === 2 && (
          <ul className="onboarding-features">
            <li><OBIcons.Check size={14} /> Kanban, Liste, Sprint ve Takvim görünümleri</li>
            <li><OBIcons.Check size={14} /> Etiket, öncelik ve son tarih filtrelemeleri</li>
            <li><OBIcons.Check size={14} /> Sürükle-bırak görev yönetimi</li>
            <li><OBIcons.Check size={14} /> Ekiple paylaşım ve davet sistemi</li>
          </ul>
        )}

        {/* Actions */}
        <div className="onboarding-actions-row">
          {current.skip && step < steps.length - 1 && (
            <button className="btn btn-ghost btn-sm" onClick={dismiss}>Geç</button>
          )}
          <button
            className="btn btn-primary onboarding-action-btn"
            onClick={() => {
              if (current.actionFn) { current.actionFn(); return; }
              if (isLast) { dismiss(); return; }
              setStep(s => s + 1);
            }}
          >
            {current.action}
            {!isLast && !current.actionFn && <OBIcons.ArrowRight size={14} />}
          </button>
        </div>

        {/* Close button */}
        <button className="icon-btn icon-btn-sm onboarding-close" onClick={dismiss} title="Kapat">
          <OBIcons.X size={15} />
        </button>
      </div>
    </div>
  );
}

function shouldShowOnboarding(state) {
  try {
    if (localStorage.getItem(OB_KEY)) return false;
  } catch (e) {}
  return !state.projects?.length && !state.tasks?.length;
}

window.OnboardingModal = OnboardingModal;
window.shouldShowOnboarding = shouldShowOnboarding;