'use client';

import React from 'react';
import { Lightbulb, CheckCircle2 } from 'lucide-react';
import { OnboardingStepKey, useOnboarding } from '@/lib/useOnboarding';

interface OnboardingGuideBannerProps {
  stepId: OnboardingStepKey;
  title: string;
  description: string;
  tip: string;
  onOpenTour?: () => void;
}

export default function OnboardingGuideBanner({
  stepId,
  title,
  description,
  tip,
  onOpenTour,
}: OnboardingGuideBannerProps) {
  const { completedSteps, toggleStep } = useOnboarding();
  const isDone = completedSteps[stepId];

  if (isDone) return null;

  return (
    <div className={`p-4 md:p-5 rounded-3xl border transition-all font-sans mb-6 ${
      isDone 
        ? 'bg-emerald-500/5 border-emerald-500/20' 
        : 'glass-panel bg-gradient-to-r from-emerald-500/10 via-teal-500/5 to-transparent border-emerald-500/30'
    }`}>
      <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
        <div className="flex items-start gap-3.5">
          {isDone ? (
            <CheckCircle2 className="w-6 h-6 text-emerald-400 shrink-0 mt-0.5" />
          ) : (
            <Lightbulb className="w-6 h-6 text-emerald-400 shrink-0 mt-0.5" />
          )}
          <div className="space-y-1">
            <div className="flex items-center gap-2">
              <span className="text-[10px] font-black uppercase tracking-widest text-emerald-400">
                Learning Guide • {isDone ? 'Step Completed' : 'Recommended Step'}
              </span>
            </div>
            <h3 className="text-sm font-extrabold text-[var(--text-title)]">{title}</h3>
            <p className="text-xs text-[var(--text-muted)] leading-relaxed">{description}</p>
            <p className="text-xs text-emerald-600 dark:text-emerald-400 font-medium pt-1">
              <span>{tip}</span>
            </p>
          </div>
        </div>

        <div className="flex items-center gap-2.5 self-end md:self-auto shrink-0">

          <button
            onClick={() => toggleStep(stepId)}
            className={`px-4 py-2 rounded-xl text-xs font-black uppercase tracking-wider flex items-center gap-1.5 transition-all cursor-pointer ${
              isDone
                ? 'bg-emerald-500/20 text-emerald-400 border border-emerald-500/30 hover:bg-emerald-500/30'
                : 'bg-[#008069] text-white hover:bg-[#006e5a] shadow-md'
            }`}
          >
            <CheckCircle2 className="w-4 h-4" />
            <span>{isDone ? 'Step Completed' : 'Mark as Complete'}</span>
          </button>
        </div>
      </div>
    </div>
  );
}