'use client';

import React, { useState } from 'react';
import { useRouter } from 'next/navigation';
import { 
  CheckCircle2, 
  ArrowRight, 
  BookOpen, 
  ChevronDown, 
  ChevronUp, 
  X, 
  Trophy, 
  RotateCcw,
  Clock,
} from 'lucide-react';
import Icons8Icon from '@/components/icons/Icons8Icon';
import { useOnboarding } from '@/lib/useOnboarding';

interface OnboardingWidgetProps {
  onOpenTour?: () => void;
}

export default function OnboardingWidget({ onOpenTour }: OnboardingWidgetProps) {
  const router = useRouter();
  const {
    steps,
    completedSteps,
    completedCount,
    totalSteps,
    progressPercent,
    isAllCompleted,
    dismissed,
    toggleStep,
    dismissWidget,
    resetOnboarding,
  } = useOnboarding();

  const [expanded, setExpanded] = useState(true);

  if (dismissed || isAllCompleted) return null;

  return (
    <div className="glass-panel bg-[var(--panel-bg)] border border-[var(--panel-border)] rounded-3xl p-5 md:p-6 shadow-sm font-sans space-y-5 transition-all">
      {/* Widget Header Banner */}
      <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 border-b border-white/5 pb-4">
        <div className="flex items-center gap-3">
          {isAllCompleted ? (
            <Trophy className="w-7 h-7 text-amber-400 animate-bounce shrink-0" />
          ) : (
            <Icons8Icon name="overview" className="h-7 w-7 text-emerald-400 shrink-0" />
          )}
          <div>
            <div className="flex items-center gap-2">
              <span className="text-[10px] font-black uppercase tracking-widest text-emerald-500 dark:text-emerald-400">
                {isAllCompleted ? 'Setup Complete' : 'First-Time User Onboarding'}
              </span>
              <span className="px-2 py-0.5 rounded-full bg-emerald-500/10 text-emerald-400 text-[10px] font-bold border border-emerald-500/20">
                {completedCount} / {totalSteps} Steps ({progressPercent}%)
              </span>
            </div>
            <h2 className="text-lg font-black text-[var(--text-title)]">
              {isAllCompleted ? '🎉 Onboarding Complete! Store is Ready' : 'Welcome! Let’s set up your WhatsApp Store'}
            </h2>
          </div>
        </div>

        {/* Action Controls */}
        <div className="flex items-center gap-2 self-end md:self-auto shrink-0">
          <button
            onClick={() => setExpanded(!expanded)}
            className="p-2 rounded-xl bg-black/20 dark:bg-white/5 border border-white/10 hover:bg-white/10 text-gray-400 hover:text-white transition-all cursor-pointer"
            title={expanded ? 'Collapse Checklist' : 'Expand Checklist'}
            aria-label="Toggle checklist view"
          >
            {expanded ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
          </button>

          <button
            onClick={dismissWidget}
            className="p-2 rounded-xl bg-black/20 dark:bg-white/5 border border-white/10 hover:bg-white/10 text-gray-400 hover:text-white transition-all cursor-pointer"
            title="Dismiss widget"
            aria-label="Dismiss onboarding widget"
          >
            <X className="w-4 h-4" />
          </button>
        </div>
      </div>

      {/* Visual Progress Bar */}
      <div className="space-y-1.5">
        <div className="flex justify-between items-center text-xs font-semibold">
          <span className="text-[var(--text-muted)]">Overall Onboarding Progress</span>
          <span className="text-emerald-500 font-mono font-bold">{progressPercent}% Completed</span>
        </div>
        <div className="h-2.5 w-full bg-black/20 dark:bg-white/5 rounded-full overflow-hidden border border-white/5">
          <div 
            className="h-full bg-gradient-to-r from-emerald-500 to-teal-400 rounded-full transition-all duration-500 shadow-sm"
            style={{ width: `${progressPercent}%` }}
          />
        </div>
      </div>

      {/* Expanded Step Checklist List */}
      {expanded && (
        <div className="space-y-3 pt-2">
          {isAllCompleted ? (
            <div className="p-4 rounded-2xl bg-emerald-500/10 border border-emerald-500/30 flex flex-col md:flex-row items-center justify-between gap-4">
              <div className="space-y-1 text-center md:text-left">
                <h4 className="text-sm font-bold text-emerald-400">All System Features Are Configured!</h4>
                <p className="text-xs text-[var(--text-muted)]">
                  Your products, WhatsApp bot, message templates, and payout settings are fully configured.
                </p>
              </div>
              <button
                onClick={resetOnboarding}
                className="px-4 py-2 rounded-xl bg-black/30 border border-white/10 text-xs font-bold text-gray-300 hover:text-white hover:bg-white/10 flex items-center gap-1.5 shrink-0 cursor-pointer"
              >
                <RotateCcw className="w-3.5 h-3.5" />
                <span>Reset Progress</span>
              </button>
            </div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
              {steps.map((step) => {
                const isDone = completedSteps[step.id];
                return (
                  <div
                    key={step.id}
                    className={`p-4 rounded-2xl border transition-all flex flex-col justify-between space-y-3 ${
                      isDone 
                        ? 'bg-emerald-500/5 border-emerald-500/30 opacity-85' 
                        : 'bg-white dark:bg-white/5 border-slate-200 dark:border-white/10 hover:border-emerald-500/50 shadow-sm'
                    }`}
                  >
                    <div className="space-y-2">
                      <div className="flex items-center justify-between">
                        <span className="text-[10px] font-black uppercase tracking-wider text-emerald-400">
                          {step.badge}
                        </span>
                        <div className="flex items-center gap-1 text-[10px] text-[var(--text-muted)]">
                          <Clock className="w-3 h-3" />
                          <span>{step.estimatedTime}</span>
                        </div>
                      </div>

                      <div className="flex items-start gap-3">
                        <button
                          onClick={() => toggleStep(step.id)}
                          className={`mt-0.5 w-5 h-5 rounded-md flex items-center justify-center shrink-0 transition-all cursor-pointer shadow-sm ${
                            isDone 
                              ? 'bg-[#008069] border-2 border-[#008069] text-white' 
                              : 'border-2 border-[#008069] bg-white dark:bg-black/40 text-transparent hover:bg-[#008069]/10'
                          }`}
                          aria-label={`Mark step ${step.title} as ${isDone ? 'incomplete' : 'complete'}`}
                        >
                          <CheckCircle2 className="w-3.5 h-3.5" />
                        </button>
                        <div className="space-y-0.5">
                          <h3 className={`text-xs font-black ${isDone ? 'line-through text-gray-400' : 'text-[var(--text-title)]'}`}>
                            {step.title}
                          </h3>
                          <p className="text-[11px] text-[var(--text-muted)] leading-relaxed">
                            {step.shortDesc}
                          </p>
                        </div>
                      </div>
                    </div>

                    <div className="pt-2 border-t border-white/5 flex items-center justify-between gap-2">
                      <button
                        onClick={() => toggleStep(step.id)}
                        className="text-[10px] font-bold text-[var(--text-muted)] hover:text-white transition-colors cursor-pointer"
                      >
                        {isDone ? 'Mark Incomplete' : 'Mark Complete'}
                      </button>

                      <button
                        onClick={() => router.push(step.href)}
                        className={`px-3 py-1.5 rounded-xl text-xs font-black flex items-center gap-1 transition-all cursor-pointer ${
                          isDone 
                            ? 'bg-black/20 dark:bg-white/5 text-gray-300 hover:text-white border border-white/10' 
                            : 'bg-[#008069] text-white hover:bg-[#006e5a] shadow-sm'
                        }`}
                      >
                        <span>{step.actionText}</span>
                        <ArrowRight className="w-3 h-3" />
                      </button>
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </div>
      )}
    </div>
  );
}