import type { ReactNode } from 'react';
import { ArrowRight, Wrench } from 'lucide-react';

interface StubPageProps {
  icon: ReactNode;
  title: string;
  description: string;
  legacyTab: string;
  color?: string;
  features?: string[];
}

export default function StubPage({ icon, title, description, legacyTab, color = 'var(--ac)', features }: StubPageProps) {
  return (
    <div className="flex items-center justify-center h-full p-8">
      <div className="text-center max-w-md w-full animate-[fadeIn_.4s_ease]">
        {/* Icon with glow */}
        <div className="relative inline-flex items-center justify-center mb-6">
          <div className="absolute inset-0 rounded-full blur-2xl opacity-20"
            style={{ background: color, transform: 'scale(2)' }} />
          <div className="relative w-20 h-20 rounded-2xl flex items-center justify-center"
            style={{ background: `color-mix(in srgb, ${color} 10%, transparent)`, border: `1px solid color-mix(in srgb, ${color} 20%, transparent)` }}>
            <div style={{ color }}>{icon}</div>
          </div>
        </div>

        {/* Title */}
        <h2 className="text-xl font-bold mb-2" style={{ color: 'var(--t1)' }}>{title}</h2>
        <p className="text-sm mb-6" style={{ color: 'var(--t3)' }}>{description}</p>

        {/* Features preview */}
        {features && (
          <div className="mb-6 text-left rounded-xl p-4 mx-auto max-w-xs"
            style={{ background: 'var(--bg1)', border: '1px solid var(--bd)' }}>
            <div className="flex items-center gap-2 mb-3">
              <Wrench size={14} style={{ color: 'var(--t4)' }} />
              <span className="text-[.7rem] font-semibold uppercase tracking-wider" style={{ color: 'var(--t4)' }}>
                Em desenvolvimento
              </span>
            </div>
            {features.map((f, i) => (
              <div key={i} className="flex items-center gap-2 py-1.5">
                <div className="w-1.5 h-1.5 rounded-full flex-shrink-0" style={{ background: color, opacity: 0.6 }} />
                <span className="text-xs" style={{ color: 'var(--t2)' }}>{f}</span>
              </div>
            ))}
          </div>
        )}

        {/* CTA */}
        <a
          href={`/?tab=${legacyTab}`}
          className="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl text-sm font-semibold transition-all duration-200"
          style={{ background: color, color: '#fff' }}
          onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-1px)'; e.currentTarget.style.boxShadow = 'var(--sh2)'; }}
          onMouseLeave={(e) => { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = ''; }}
        >
          Abrir versao atual
          <ArrowRight size={16} />
        </a>

        <p className="text-[.65rem] mt-4" style={{ color: 'var(--t4)' }}>
          Migrando para React — em breve nesta interface
        </p>
      </div>
    </div>
  );
}
