import React, { useState, useEffect, useCallback, useMemo } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import api from '../api';
import OnboardingWizard from './OnboardingWizard';

import { useLanguage } from '../providers/language/LanguageContext';

interface OnboardingStep {
  id: string;
  label: string;
  description: string;
  completed: boolean;
  action?: () => void;
}

interface OnboardingAssistantProps {
  onDismiss?: () => void;
}

const _STORAGE_KEY = 'onboarding_hidden';

export function _isOnboardingHidden(): boolean {
  try {
    return localStorage.getItem(_STORAGE_KEY) === 'true';
  } catch {
    return false;
  }
}

export function _showOnboarding(): void {
  try {
    localStorage.removeItem(_STORAGE_KEY);
  } catch { /* ignore */ }
}

function _hideOnboarding(): void {
  try {
    localStorage.setItem(_STORAGE_KEY, 'true');
  } catch { /* ignore */ }
}

const OnboardingAssistant: React.FC<OnboardingAssistantProps> = ({ onDismiss }) => {
  const { t } = useLanguage();
  const callouts = useMemo(() => ({
    mandate: t('Tipp: Ein Mandant ist Ihr Arbeitsbereich. Sie koennen spaeter weitere Mandanten fuer Teams oder Projekte erstellen.'),
    feature: t('Tipp: Im Store finden Sie AI-Workspace, CommCoach und weitere Features. Aktivieren Sie mindestens eines, um loszulegen.'),
    connection: t('Tipp: Verbinden Sie Ihre Datenquellen (z.B. SharePoint, Google Drive), damit der AI-Assistent auf Ihre Dokumente zugreifen kann.'),
    chat: t('Tipp: Starten Sie einen Chat mit dem AI-Assistenten. Er kann Ihre verbundenen Daten analysieren und Fragen beantworten.'),
  }), [t]);
  const navigate = useNavigate();
  const location = useLocation();
  const [hidden, setHidden] = useState(() => _isOnboardingHidden());
  const [steps, setSteps] = useState<OnboardingStep[]>([]);
  const [loading, setLoading] = useState(true);
  const [dontShowAgain, setDontShowAgain] = useState(false);
  const [showWizard, setShowWizard] = useState(false);

  const _checkOnboardingState = useCallback(async () => {
    setLoading(true);
    try {
      const onboardingSteps: OnboardingStep[] = [];

      // Check admin mandates (user-owned or where user is admin)
      let hasAdminMandate = false;
      try {
        const mandatesRes = await api.get('/api/store/mandates');
        const mandates = mandatesRes.data?.mandates || mandatesRes.data || [];
        hasAdminMandate = Array.isArray(mandates) && mandates.length > 0;
      } catch { /* ignore */ }

      // Check if user has any feature access (via navigation = mandate member)
      let hasFeature = false;
      let workspaceInstancePath: string | undefined;
      let workspaceInstanceIds: string[] = [];
      try {
        const navRes = await api.get('/api/navigation?language=de');
        const blocks = navRes.data?.blocks || [];
        const dynamicBlock = blocks.find((b: { type: string }) => b.type === 'dynamic');
        const mandates = dynamicBlock?.mandates || [];
        for (const m of mandates) {
          for (const f of m.features || []) {
            for (const inst of f.instances || []) {
              hasFeature = true;
              if (f.uiComponent === 'feature.workspace' && inst.views?.length > 0) {
                workspaceInstanceIds.push(inst.id);
                if (!workspaceInstancePath) {
                  workspaceInstancePath = inst.views[0].uiPath;
                }
              }
            }
          }
        }
      } catch { /* ignore */ }

      const mandateStepDone = hasAdminMandate || hasFeature;

      onboardingSteps.push({
        id: 'mandate',
        label: t('Mandat einrichten'),
        description: hasAdminMandate
          ? t('Dein Mandant ist eingerichtet.')
          : hasFeature
            ? t('Du bist Mitglied eines Mandanten')
            : t('Erstelle deinen Arbeitsbereich'),
        completed: mandateStepDone,
        action: mandateStepDone ? undefined : () => setShowWizard(true),
      });

      onboardingSteps.push({
        id: 'feature',
        label: t('Aktiviere dein erstes Feature'),
        description: hasFeature
          ? t('Du hast aktive Features')
          : t('Aktiviere dein erstes Feature im'),
        completed: hasFeature,
        action: hasFeature ? undefined : () => navigate('/store'),
      });

      let hasConnection = false;
      try {
        const connRes = await api.get('/api/connections/');
        const items = connRes.data?.items || connRes.data?.data || connRes.data || [];
        hasConnection = Array.isArray(items) && items.length > 0;
      } catch { /* ignore */ }

      onboardingSteps.push({
        id: 'connection',
        label: t('Verbinde deine erste Datenquelle'),
        description: hasConnection
          ? t('Du hast Verbindungen eingerichtet')
          : t('Verbinde deine erste Datenquelle'),
        completed: hasConnection,
        action: hasConnection ? undefined : () => navigate('/basedata/connections'),
      });

      let hasChat = false;
      for (const instId of workspaceInstanceIds) {
        if (hasChat) break;
        try {
          const wfRes = await api.get(`/api/workspace/${instId}/workflows`);
          const wfs = wfRes.data?.workflows || wfRes.data?.data || wfRes.data?.items || [];
          if (Array.isArray(wfs) && wfs.length > 0) hasChat = true;
        } catch { /* ignore */ }
      }

      const chatAction = workspaceInstancePath ? () => navigate(workspaceInstancePath!) : undefined;
      onboardingSteps.push({
        id: 'chat',
        label: t('Starte deinen ersten AI-Chat'),
        description: hasChat
          ? t('Du hast bereits Chats gestartet')
          : t('Starte deinen ersten Chat mit'),
        completed: hasChat,
        action: hasChat ? undefined : chatAction,
      });

      setSteps(onboardingSteps);

      if (onboardingSteps.every(s => s.completed)) {
        setHidden(true);
        _hideOnboarding();
      }
    } catch (err) {
      console.error('Onboarding check failed:', err);
    } finally {
      setLoading(false);
    }
  }, [navigate, t]);

  useEffect(() => {
    const state = location.state as { showOnboarding?: number } | null;
    if (state?.showOnboarding) {
      setHidden(false);
      window.history.replaceState({}, '');
    }
  }, [location.state]);

  useEffect(() => {
    if (!hidden) _checkOnboardingState();
  }, [hidden, _checkOnboardingState]);

  const _handleDismiss = () => {
    if (dontShowAgain) {
      _hideOnboarding();
    }
    setHidden(true);
    onDismiss?.();
  };

  if (showWizard) {
    return (
      <OnboardingWizard
        onComplete={() => {
          setShowWizard(false);
          _checkOnboardingState();
        }}
        onDismiss={() => setShowWizard(false)}
      />
    );
  }

  if (hidden || loading) return null;

  const completedCount = steps.filter(s => s.completed).length;
  if (completedCount === steps.length) return null;

  return (
    <div style={{
      padding: 16, margin: '0 0 20px 0', borderRadius: 12,
      border: '1px solid var(--border-color, #e5e7eb)',
      background: 'linear-gradient(135deg, var(--bg-primary, #fff) 0%, #eef2ff 100%)',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 12 }}>
        <div>
          <h3 style={{ margin: 0, fontSize: '1rem' }}>{t('Willkommen bei Poweron')}</h3>
          <p style={{ margin: '4px 0 0', fontSize: '0.85rem', color: 'var(--text-secondary, #6b7280)' }}>
            {t('{completed} von {total} Schritten abgeschlossen', { completed: String(completedCount), total: String(steps.length) })}
          </p>
        </div>
      </div>

      <div style={{ display: 'flex', gap: 4, marginBottom: 16, height: 4 }}>
        {steps.map((step) => (
          <div
            key={step.id}
            style={{
              flex: 1, borderRadius: 2, height: 4,
              background: step.completed ? 'var(--accent, #4f46e5)' : 'var(--border-color, #e5e7eb)',
              transition: 'background 0.3s',
            }}
          />
        ))}
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {steps.map((step, idx) => {
          const isNextStep = !step.completed && steps.slice(0, idx).every(s => s.completed);
          return (
            <div key={step.id}>
              <div
                style={{
                  display: 'flex', alignItems: 'center', gap: 10, padding: '8px 12px',
                  borderRadius: 8, background: step.completed ? 'transparent' : 'var(--bg-primary, #fff)',
                  border: step.completed ? 'none' : isNextStep ? '1px solid var(--accent, #4f46e5)' : '1px solid var(--border-color, #e5e7eb)',
                  opacity: step.completed ? 0.6 : 1,
                  cursor: step.action ? 'pointer' : 'default',
                }}
                onClick={step.action}
              >
                <span style={{ fontSize: '1.1rem', flexShrink: 0, width: 24, textAlign: 'center' }}>
                  {step.completed ? '\u2713' : '\u25CB'}
                </span>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 500, fontSize: '0.85rem', textDecoration: step.completed ? 'line-through' : 'none' }}>
                    {step.label}
                  </div>
                  <div style={{ fontSize: '0.8rem', color: 'var(--text-secondary, #6b7280)' }}>
                    {step.description}
                  </div>
                </div>
                {step.action && !step.completed && (
                  <span style={{ fontSize: '0.8rem', color: 'var(--accent, #4f46e5)', fontWeight: 500 }}>{'\u2192'}</span>
                )}
              </div>
              {isNextStep && callouts[step.id as keyof typeof callouts] && (
                <div style={{
                  marginTop: 4, marginLeft: 34, padding: '6px 10px',
                  fontSize: '0.78rem', color: 'var(--accent, #4f46e5)',
                  background: 'rgba(79, 70, 229, 0.06)', borderRadius: 6,
                  borderLeft: '3px solid var(--accent, #4f46e5)',
                }}>
                  {callouts[step.id as keyof typeof callouts]}
                </div>
              )}
            </div>
          );
        })}
      </div>

      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        marginTop: 14, paddingTop: 10,
        borderTop: '1px solid var(--border-color, #e5e7eb)',
      }}>
        <label style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: '0.8rem', color: 'var(--text-secondary, #6b7280)', cursor: 'pointer' }}>
          <input
            type="checkbox"
            checked={dontShowAgain}
            onChange={(e) => setDontShowAgain(e.target.checked)}
            style={{ margin: 0 }}
          />
          {t('Nicht wieder anzeigen')}
        </label>
        <button
          onClick={_handleDismiss}
          style={{
            border: '1px solid var(--border-color, #d1d5db)',
            background: 'transparent',
            cursor: 'pointer',
            fontSize: '0.8rem',
            color: 'var(--text-secondary, #6b7280)',
            padding: '4px 12px',
            borderRadius: 6,
          }}
        >
          {t('Schliessen')}
        </button>
      </div>
    </div>
  );
};

export default OnboardingAssistant;