import { Command } from 'commander'
import prompts from 'prompts'
import path from 'path'
import fs from 'fs-extra'
import ora from 'ora'
import { kleur } from '../utils/colors'

const COMPONENTS = [
    'hero-ultra',
    'navbar-ultra',
    'feature-cards-ultra',
    'sidebar-ultra',
    'glow-buttons-ultra',
    'dashboard-ultra',
    'pricing-ultra',
    'table-ultra',
    'btn-glass-ultra',
    'badge-neon-ultra',
    'input-cyber-ultra',
    'card-gradient-ultra',
    'aurora-bg-elite',
    'tooltip-cyber-elite',
    'input-elite-ultra',
    'card-float-elite',
    'card-royal-elite',
    'btn-royal-elite',
    'card-prism-elite',
    'progress-vapor-elite',
    'card-vapor-elite',
    'b-glass',
    'b-neumorphic',
    'b-skeuo',
    'b-brutalist',
    'b-cyber-neon',
    'b-clay',
    'b-aurora'
]

const TEMPLATES: Record<string, string> = {
    'hero-ultra': `<!-- BismillahCSS Hero Ultra -->
<section class="b-hero-ultra" style="min-height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at center, #1a1a2e 0%, #0f0f1a 100%); color: white; position: relative; overflow: hidden;">
    <div class="b-container" style="text-align: center; z-index: 10;">
        <h1 style="font-size: 5rem; letter-spacing: -2px; margin-bottom: 20px; font-weight: 800; background: linear-gradient(90deg, #00f2fe 0%, #4facfe 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Beyond The Future</h1>
        <p style="font-size: 1.25rem; opacity: 0.8; max-width: 600px; margin: 0 auto 40px;">Experience the world's most advanced design intelligence layer. Fast, accessible, and breathtakingly beautiful.</p>
        <button class="b-btn b-magnetic" style="padding: 15px 40px; border-radius: 50px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: white; cursor: pointer; backdrop-filter: blur(10px); transition: all 0.3s ease;">Get Started</button>
    </div>
    <!-- Ambient Glare -->
    <div class="b-glare" style="position: absolute; width: 600px; height: 600px; background: radial-gradient(circle, rgba(0,242,254,0.1) 0%, rgba(0,0,0,0) 70%); top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;"></div>
</section>`,

    'navbar-ultra': `<!-- BismillahCSS Navbar Ultra -->
<nav class="b-navbar-ultra" style="position: fixed; top: 0; left: 0; right: 0; padding: 20px 0; z-index: 1000; background: rgba(15, 15, 26, 0.8); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,0.05);">
    <div class="b-container" style="display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; padding: 0 20px;">
        <div class="b-brand" style="font-weight: 800; font-size: 1.5rem; color: white; letter-spacing: -1px;">Bismillah<span style="color: #00f2fe;">CSS</span></div>
        <ul style="display: flex; gap: 30px; list-style: none; margin: 0; padding: 0;">
            <li><a href="#" style="color: rgba(255,255,255,0.8); text-decoration: none; font-size: 0.9rem; transition: color 0.2s;">Features</a></li>
            <li><a href="#" style="color: rgba(255,255,255,0.8); text-decoration: none; font-size: 0.9rem; transition: color 0.2s;">Components</a></li>
            <li><a href="#" style="color: rgba(255,255,255,0.8); text-decoration: none; font-size: 0.9rem; transition: color 0.2s;">Docs</a></li>
        </ul>
        <button class="b-btn" style="padding: 10px 24px; border-radius: 8px; background: linear-gradient(90deg, #00f2fe 0%, #4facfe 100%); color: white; border: none; cursor: pointer; font-weight: 600;">Download</button>
    </div>
</nav>`,

    'feature-cards-ultra': `<!-- BismillahCSS Feature Cards Ultra -->
<section class="b-feature-cards" style="padding: 100px 20px; background: #0f0f1a;">
    <div class="b-container" style="max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px;">
        <div class="b-card b-spotlight" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); padding: 40px; border-radius: 20px; transition: transform 0.3s ease;">
            <h3 style="color: white; font-size: 1.5rem; margin-top: 0;">Spatial Logic</h3>
            <p style="color: rgba(255,255,255,0.6); line-height: 1.6;">Build interfaces that understand the environment natively.</p>
        </div>
        <div class="b-card b-spotlight" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); padding: 40px; border-radius: 20px; transition: transform 0.3s ease;">
            <h3 style="color: white; font-size: 1.5rem; margin-top: 0;">Zero Runtime</h3>
            <p style="color: rgba(255,255,255,0.6); line-height: 1.6;">Performance built-in from the ground up, no bloat.</p>
        </div>
        <div class="b-card b-spotlight" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); padding: 40px; border-radius: 20px; transition: transform 0.3s ease;">
            <h3 style="color: white; font-size: 1.5rem; margin-top: 0;">Intent-Based</h3>
            <p style="color: rgba(255,255,255,0.6); line-height: 1.6;">Declarative state management tied directly to visuals.</p>
        </div>
    </div>
</section>`,

    'sidebar-ultra': `<!-- BismillahCSS Sidebar Ultra -->
<aside class="b-sidebar-ultra" style="width: 280px; height: 100vh; background: #151522; border-right: 1px solid rgba(255,255,255,0.05); padding: 30px;">
    <div class="b-brand" style="color: white; font-weight: bold; font-size: 1.2rem; margin-bottom: 40px;">Bismillah System</div>
    <ul style="list-style: none; padding: 0; display: flex; flex-direction: column; gap: 15px;">
        <li><a href="#" style="color: white; text-decoration: none; display: flex; align-items: center; padding: 10px 15px; border-radius: 8px; background: rgba(0,242,254,0.1);">Overview</a></li>
        <li><a href="#" style="color: rgba(255,255,255,0.5); text-decoration: none; display: flex; align-items: center; padding: 10px 15px; border-radius: 8px; transition: background 0.2s;">Analytics</a></li>
        <li><a href="#" style="color: rgba(255,255,255,0.5); text-decoration: none; display: flex; align-items: center; padding: 10px 15px; border-radius: 8px; transition: background 0.2s;">Settings</a></li>
    </ul>
</aside>`,

    'glow-buttons-ultra': `<!-- BismillahCSS Glow Buttons Ultra -->
<div class="b-glow-buttons" style="padding: 50px; display: flex; gap: 20px; justify-content: center; background: #0f0f1a;">
    <button class="b-btn b-glow" style="position: relative; padding: 15px 40px; font-size: 1rem; font-weight: bold; color: white; background: #111; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; cursor: pointer; overflow: hidden; box-shadow: 0 0 20px rgba(0,242,254,0.2);">
        Initialize Core
    </button>
    <button class="b-btn b-glow-secondary" style="position: relative; padding: 15px 40px; font-size: 1rem; font-weight: bold; color: white; background: transparent; border: 1px solid #00f2fe; border-radius: 8px; cursor: pointer; overflow: hidden; box-shadow: inset 0 0 20px rgba(0,242,254,0.1);">
        Secondary Protocol
    </button>
</div>`,

    'dashboard-ultra': `<!-- BismillahCSS Dashboard Ultra -->
<div class="b-dashboard-ultra" style="display: grid; grid-template-columns: 280px 1fr; min-height: 100vh; background: #0f0f1a; color: white;">
    <aside style="border-right: 1px solid rgba(255,255,255,0.05); padding: 20px;">
        <!-- Inject Sidebar Here -->
        <h3 style="margin-top: 0; font-size: 1rem; opacity: 0.5; text-transform: uppercase;">Menu</h3>
    </aside>
    <main style="padding: 40px;">
        <header style="margin-bottom: 40px; display: flex; justify-content: space-between; align-items: center;">
            <h1 style="margin: 0;">Command Center</h1>
            <div style="width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #00f2fe, #4facfe);"></div>
        </header>
        <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 40px;">
            <div style="background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); padding: 30px; border-radius: 15px;">
                <p style="margin: 0 0 10px; opacity: 0.6;">Total Volume</p>
                <h2 style="margin: 0; font-size: 2.5rem;">$1.2M</h2>
            </div>
        </div>
    </main>
</div>`,

    'pricing-ultra': `<!-- BismillahCSS Pricing Ultra -->
<section class="b-pricing-ultra" style="padding: 100px 20px; background: #050507; color: white;">
    <div class="b-container" style="max-width: 1200px; margin: 0 auto;">
        <div style="text-align: center; margin-bottom: 60px;">
            <h2 style="font-size: 3rem; margin: 0; background: linear-gradient(90deg, #00f2fe, #4facfe); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Premium Tiers</h2>
        </div>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px;">
            <div class="bismillah-pricing-ultra">
                <h3>Pro Tier</h3>
                <div class="price">$49<span style="font-size: 1rem; color: rgba(255,255,255,0.5);">/mo</span></div>
                <ul style="list-style: none; padding: 0; text-align: left; margin: 30px 0;">
                    <li style="margin-bottom: 10px; color: rgba(255,255,255,0.8);">✓ Advanced Analytics</li>
                    <li style="margin-bottom: 10px; color: rgba(255,255,255,0.8);">✓ Premium Support</li>
                </ul>
                <button class="bismillah-btn-neon" style="width: 100%;">Select Plan</button>
            </div>
            <!-- More tiers... -->
        </div>
    </div>
</section>`,

    'table-ultra': `<!-- BismillahCSS Table Ultra -->
<div class="b-table-container" style="padding: 40px; background: #0a0a0c;">
    <table class="bismillah-table-ultra">
        <thead>
            <tr>
                <th>System</th>
                <th>Status</th>
                <th>Latency</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Core Engine</td>
                <td><span style="color: #00f2ff;">Online</span></td>
                <td>12ms</td>
            </tr>
            <tr>
                <td>Data Layer</td>
                <td><span style="color: #00f2ff;">Online</span></td>
                <td>8ms</td>
            </tr>
        </tbody>
    </table>
</div>`,

    'btn-glass-ultra': `<!-- BismillahCSS Glass Button -->
<button class="bismillah-btn-glass">
    Elevate Experience
</button>`,

    'badge-neon-ultra': `<!-- BismillahCSS Neon Badges -->
<div style="display: flex; gap: 10px; padding: 20px;">
    <span class="bismillah-badge-neon">Active</span>
    <span class="bismillah-badge-neon success">Deployed</span>
    <span class="bismillah-badge-neon warning">Pending</span>
</div>`,

    'input-cyber-ultra': `<!-- BismillahCSS Cyber Input -->
<div style="padding: 20px; max-width: 400px;">
    <label style="color: rgba(255,255,255,0.5); display: block; margin-bottom: 8px; font-size: 0.8rem;">Access Token</label>
    <input type="text" class="bismillah-input-cyber" placeholder="Enter secure key...">
</div>`,

    'card-gradient-ultra': `<!-- BismillahCSS Gradient Card -->
<div class="b-container" style="padding: 40px; max-width: 500px;">
    <div class="bismillah-card-gradient">
        <div class="bismillah-card-gradient-inner">
            <h3 style="color: white; margin-top: 0;">Neural Interface</h3>
            <p style="color: rgba(255,255,255,0.6);">Connect your consciousness to the global grid with zero latency.</p>
            <button class="bismillah-btn-glass" style="width: 100%; margin-top: 20px;">Initiate Link</button>
        </div>
    </div>
</div>`,

    'aurora-bg-elite': `<!-- BismillahCSS Aurora Elite Background -->
<div class="bismillah-aurora-bg" style="min-height: 500px; display: flex; align-items: center; justify-content: center; color: white; text-align: center; padding: 40px;">
    <div style="z-index: 1;">
        <h1 style="font-size: 3.5rem; margin-bottom: 20px;">Aurora Architecture</h1>
        <p style="opacity: 0.7; max-width: 500px;">Adaptive ambient lighting that evolves with your interface state.</p>
    </div>
</div>`,

    'tooltip-cyber-elite': `<!-- BismillahCSS Cyber Tooltip -->
<div style="padding: 100px; display: flex; justify-content: center; background: #050507;">
    <span class="bismillah-tooltip-cyber" data-tooltip="Quantum Decryption Protocol Active" style="color: white; border-bottom: 1px dashed #00f2ff; padding: 4px;">
        Hover for System Status
    </span>
</div>`,

    'input-elite-ultra': `<!-- BismillahCSS Elite Input -->
<div style="padding: 40px; max-width: 400px; background: #050507; border-radius: 20px;">
    <div class="bismillah-input-container-elite">
        <input type="text" class="bismillah-input-elite" placeholder="Command identity...">
        <div class="bismillah-input-elite-border"></div>
    </div>
</div>`,

    'card-float-elite': `<!-- BismillahCSS Floating Glass Card -->
<div style="padding: 60px; background: #050507; display: flex; justify-content: center;">
    <div class="bismillah-card-float" style="max-width: 350px;">
        <div style="width: 80px; height: 80px; background: rgba(0,242,255,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; border: 1px solid rgba(0,242,255,0.3);">
             <span style="color: #00f2ff; font-size: 2rem;">⚡</span>
        </div>
        <h3 style="color: white; margin-top: 0;">Levitational Design</h3>
        <p style="color: rgba(255,255,255,0.5); line-height: 1.6;">Interfaces that defy standard gravity physics.</p>
    </div>
</div>`,

    'card-royal-elite': `<!-- BismillahCSS Royal Card -->
<div style="padding: 60px; background: #050507; display: flex; justify-content: center;">
    <div class="bismillah-card-royal" style="max-width: 400px;">
        <div class="bismillah-header-royal">
             <h2 class="bismillah-text-silk" style="font-size: 2rem;">Imperial</h2>
        </div>
        <p style="color: rgba(255,255,255,0.7); line-height: 1.8; font-size: 1.1rem;">A design language curated for the elite. Silk gradients meet golden ambient light.</p>
        <button class="bismillah-btn-royal" style="margin-top: 30px;">Enter Sanctuary</button>
    </div>
</div>`,

    'btn-royal-elite': `<!-- BismillahCSS Royal Silk Button -->
<div style="padding: 40px; background: #050507; display: flex; justify-content: center;">
    <button class="bismillah-btn-royal">Imperial Action</button>
</div>`,

    'card-prism-elite': `<!-- BismillahCSS Prism Geometric Card -->
<div style="padding: 60px; background: #0a0a0c; display: flex; justify-content: center;">
    <div class="bismillah-card-prism" style="max-width: 350px;">
        <span class="bismillah-label-prism">Core v3.0</span>
        <h3 style="color: white; margin-top: 20px;">Prism Architecture</h3>
        <p style="color: rgba(255,255,255,0.6); line-height: 1.6;">Crystalline geometric design patterns for high-fidelity data interfaces.</p>
        <button class="bismillah-btn-prism" style="margin-top: 20px;">Access Node</button>
    </div>
</div>`,

    'progress-vapor-elite': `<!-- BismillahCSS Vapor Progress -->
<div style="padding: 40px; background: #0a0a0c;">
    <div class="bismillah-progress-vapor">
        <div class="bismillah-progress-vapor-bar"></div>
    </div>
</div>`,

    'card-vapor-elite': `<!-- BismillahCSS Vapor Card -->
<div style="padding: 60px; background: #0a0a0c; display: flex; justify-content: center;">
    <div class="bismillah-card-vapor" style="max-width: 350px;">
        <h3 style="color: white; margin-top: 0;">Ethereal Logic</h3>
        <p style="color: rgba(255,255,255,0.4); line-height: 1.8;">Lightweight design language with blurred radial ambient lighting.</p>
        <button class="bismillah-btn-vapor">Initiate Phase</button>
    </div>
</div>`,

    'b-glass': `<!-- BismillahCSS Glassmorphism Primitive -->
<div class="b-glass p-12 text-center rounded-3xl border border-white/20">
    <h2 class="text-3xl font-bold text-white">Glass Surface</h2>
    <p class="text-white/70">Frosted glass effect with deep backdrop blur.</p>
</div>`,

    'b-neumorphic': `<!-- BismillahCSS Neumorphism Primitive -->
<div class="b-neumorphic p-12 text-center rounded-3xl">
    <h2 class="text-3xl font-bold text-slate-700">Soft UI</h2>
    <button class="b-neumorphic-inset px-6 py-2 mt-4 font-bold text-slate-600">PRESSED STATE</button>
</div>`,

    'b-skeuo': `<!-- BismillahCSS Skeuomorphism Primitive -->
<div class="b-skeuo p-12 text-center rounded-3xl">
    <h2 class="text-3xl font-bold italic text-slate-800">Physical Realism</h2>
    <div class="h-10 w-10 bg-slate-200 rounded-full border border-slate-400 shadow-xl mx-auto mt-4"></div>
</div>`,

    'b-brutalist': `<!-- BismillahCSS Brutalism Primitive -->
<div class="b-brutalist p-12 bg-yellow-400 border-4 border-black">
    <h2 class="text-3xl font-black uppercase text-black">Raw Core</h2>
    <p class="font-bold border-2 border-black inline-block px-2 mt-2">VERSION 3.0</p>
</div>`,

    'b-cyber-neon': `<!-- BismillahCSS Cyber Neon Primitive -->
<div class="b-cyber-neon p-12 bg-black border-2 border-cyan-400 rounded-lg">
    <h2 class="text-3xl font-mono text-cyan-400 uppercase tracking-tighter">Cyber Link Active</h2>
    <div class="grid grid-cols-3 gap-2 mt-4">
        <div class="h-1 bg-cyan-400/30 animate-pulse"></div>
        <div class="h-1 bg-cyan-400"></div>
        <div class="h-1 bg-cyan-400/30"></div>
    </div>
</div>`,

    'b-clay': `<!-- BismillahCSS Claymorphism Primitive -->
<div class="b-clay p-12 text-center bg-blue-400 rounded-[40px] text-white">
    <h2 class="text-3xl font-bold">Clay Softness</h2>
    <p class="mt-2 opacity-80">Smooth inner shadows for high-tactile depth.</p>
</div>`,

    'b-aurora': `<!-- BismillahCSS Aurora Wave Primitive -->
<div class="b-aurora p-12 rounded-3xl text-white text-center min-h-[200px] flex flex-col justify-center">
    <h2 class="text-3xl font-black italic">Northern Lights</h2>
    <p class="mt-2 opacity-90">Dynamic animated mesh gradients.</p>
</div>`
};

export const add = new Command()
    .name('add')
    .description('Add a futuristic component to your project')
    .argument('[component]', 'the component to add')
    .action(async (component: string | undefined) => {
        let componentToAdd = component

        if (!componentToAdd) {
            const response = await prompts({
                type: 'select',
                name: 'component',
                message: 'Which component do you want to add?',
                choices: COMPONENTS.map(c => ({ title: c, value: c }))
            })
            componentToAdd = response.component
        }

        if (!componentToAdd || !COMPONENTS.includes(componentToAdd)) {
            console.error(kleur.red(`Error: Component ${componentToAdd} not found.`))
            return
        }

        const spinner = ora(`Adding ${componentToAdd}...`).start()

        const destPath = path.join(process.cwd(), 'components', `${componentToAdd}.html`)

        await fs.ensureDir(path.dirname(destPath))

        try {
            const templateCode = TEMPLATES[componentToAdd] || `<!-- ${componentToAdd} Placeholder -->`
            await fs.writeFile(destPath, templateCode, 'utf-8')
            spinner.succeed(`${componentToAdd} added successfully to ./components/${componentToAdd}.html`)
        } catch (err) {
            spinner.fail(`Failed to add ${componentToAdd}. Make sure you are in the framework directory or have installed the package correctly.`)
            console.error(err)
        }
    })