'use client';

import { Sparkles, Lightbulb, AlertTriangle, CheckCircle } from 'lucide-react';

/**
 * TipBox Component - Multi-Style Callout System
 *
 * Provides three distinct styles for callouts/notes:
 *
 * 1. Compact Style:
 *    - Lucide icon on left
 *    - Compact padding (p-4)
 *    - Smaller text (text-sm)
 *    - Subtle background with thin border
 *    - Best for minor notes and tips
 *
 * 2. Prominent Style:
 *    - NO icon
 *    - Larger padding (p-6)
 *    - Larger text (text-base)
 *    - Gradient border with soft glow
 *    - More visual weight
 *    - Best for important warnings and security notices
 *
 * 3. Protip Style:
 *    - Sparkles icon with "Pro Tip" label
 *    - Golden/amber color scheme
 *    - Premium visual treatment with glow
 *    - Best for highlighting valuable tips and tricks
 *
 * Usage:
 * <TipBox variant="compact" type="info">
 *   This is a compact tip
 * </TipBox>
 *
 * <TipBox variant="prominent" type="warning">
 *   This is an important security warning
 * </TipBox>
 *
 * <TipBox variant="protip">
 *   This is a valuable pro tip
 * </TipBox>
 */

type TipType = 'info' | 'warning' | 'success';
type TipVariant = 'compact' | 'prominent' | 'protip';

interface TipBoxProps {
  children: React.ReactNode;
  variant?: TipVariant;
  type?: TipType;
}

const icons: Record<TipType, React.ReactNode> = {
  info: <Lightbulb className="w-5 h-5 text-purple-400" />,
  warning: <AlertTriangle className="w-5 h-5 text-amber-400" />,
  success: <CheckCircle className="w-5 h-5 text-green-400" />,
};

const compactStyles: Record<TipType, string> = {
  info: 'bg-purple-500/10 border-purple-500/20 text-purple-300',
  warning: 'bg-amber-500/10 border-amber-500/20 text-amber-300',
  success: 'bg-green-500/10 border-green-500/20 text-green-300',
};

const prominentStyles: Record<TipType, string> = {
  info: 'bg-gradient-to-br from-purple-500/5 via-cyan-500/5 to-purple-500/5 border-purple-500/30 text-gray-300 shadow-lg shadow-purple-500/10',
  warning:
    'bg-gradient-to-br from-amber-500/5 via-orange-500/5 to-amber-500/5 border-amber-500/30 text-gray-300 shadow-lg shadow-amber-500/10',
  success:
    'bg-gradient-to-br from-green-500/5 via-emerald-500/5 to-green-500/5 border-green-500/30 text-gray-300 shadow-lg shadow-green-500/10',
};

const protipStyle =
  'bg-gradient-to-r from-amber-500/15 via-yellow-500/10 to-amber-500/15 border-amber-400/40 text-amber-100 shadow-lg shadow-amber-500/20 ring-1 ring-amber-400/20';

export const TipBox = ({ children, variant = 'compact', type = 'info' }: TipBoxProps) => {
  // Protip variant - premium golden style
  if (variant === 'protip') {
    return (
      <div
        className={`flex gap-3 p-5 rounded-xl border ${protipStyle}`}
        role="note"
        aria-label="Pro tip"
      >
        <span className="flex-shrink-0 mt-0.5">
          <Sparkles className="w-5 h-5 text-amber-300" />
        </span>
        <div>
          <span className="text-xs font-semibold uppercase tracking-wider text-amber-400 block mb-1">
            Pro Tip
          </span>
          <div className="text-sm leading-relaxed">{children}</div>
        </div>
      </div>
    );
  }

  const icon = icons[type];
  const styleClass = variant === 'compact' ? compactStyles[type] : prominentStyles[type];

  // Compact style
  if (variant === 'compact') {
    return (
      <div
        className={`flex gap-3 p-4 rounded-xl border ${styleClass}`}
        role="note"
        aria-label={`${type} note`}
      >
        <span className="flex-shrink-0 mt-0.5">{icon}</span>
        <div className="text-sm leading-relaxed">{children}</div>
      </div>
    );
  }

  // Prominent style
  return (
    <div
      className={`p-6 rounded-2xl border ${styleClass}`}
      role="alert"
      aria-label={`${type} alert`}
    >
      <div className="text-base leading-relaxed">{children}</div>
    </div>
  );
};
