"use client";

import { useState } from 'react';

type Step = 'use-case' | 'region' | 'result';

type Result = {
    format: string;
    label: string;
    description: string;
    example: string;
    color: string;
};

const RESULTS: Record<string, Result> = {
    'ean13': {
        format: 'EAN-13',
        label: 'EAN-13',
        description: 'The global retail standard. Used on consumer products sold in supermarkets, pharmacies, and online shops worldwide.',
        example: '4006381333931 (a common product barcode)',
        color: 'blue',
    },
    'upca': {
        format: 'UPC-A',
        label: 'UPC-A',
        description: 'The North American retail standard. Functionally equivalent to EAN-13 but with 12 digits. Required by US and Canadian retailers.',
        example: '012345678905',
        color: 'indigo',
    },
    'code128': {
        format: 'Code 128',
        label: 'Code 128',
        description: 'The most versatile barcode. Supports letters, numbers, and special characters. Used in shipping labels, inventory systems, and internal tracking.',
        example: 'SHIP-2026-ABC-001',
        color: 'emerald',
    },
    'code39': {
        format: 'Code 39',
        label: 'Code 39',
        description: 'A legacy alphanumeric format still widely used in automotive, defense, and industrial environments. Simpler than Code 128 but less compact.',
        example: 'PART-7734-A',
        color: 'orange',
    },
    'msi': {
        format: 'MSI',
        label: 'MSI',
        description: 'Designed for inventory and shelf labeling in retail warehouses. Numeric-only. Used for bin locations, shelf tags, and stockroom management.',
        example: '123456',
        color: 'purple',
    },
    'pharmacode': {
        format: 'Pharmacode',
        label: 'Pharmacode',
        description: 'A pharmaceutical packaging standard used to verify correct product packaging. Encodes a single numeric value (3–131071).',
        example: '12345',
        color: 'red',
    },
};

const colorMap: Record<string, string> = {
    blue: 'bg-blue-50 border-blue-300 text-blue-900',
    indigo: 'bg-indigo-50 border-indigo-300 text-indigo-900',
    emerald: 'bg-emerald-50 border-emerald-300 text-emerald-900',
    orange: 'bg-orange-50 border-orange-300 text-orange-900',
    purple: 'bg-purple-50 border-purple-300 text-purple-900',
    red: 'bg-red-50 border-red-300 text-red-900',
};

const badgeMap: Record<string, string> = {
    blue: 'bg-blue-100 text-blue-800',
    indigo: 'bg-indigo-100 text-indigo-800',
    emerald: 'bg-emerald-100 text-emerald-800',
    orange: 'bg-orange-100 text-orange-800',
    purple: 'bg-purple-100 text-purple-800',
    red: 'bg-red-100 text-red-800',
};

export function BarcodeFormatPicker() {
    const [step, setStep] = useState<Step>('use-case');
    const [useCase, setUseCase] = useState<string>('');
    const [result, setResult] = useState<string>('');

    const selectUseCase = (value: string) => {
        setUseCase(value);
        if (value === 'retail') {
            setStep('region');
        } else {
            const map: Record<string, string> = {
                logistics: 'code128',
                inventory: 'code128',
                industrial: 'code39',
                warehouse: 'msi',
                pharma: 'pharmacode',
            };
            setResult(map[value] ?? 'code128');
            setStep('result');
        }
    };

    const selectRegion = (region: string) => {
        setResult(region === 'us' ? 'upca' : 'ean13');
        setStep('result');
    };

    const reset = () => {
        setStep('use-case');
        setUseCase('');
        setResult('');
    };

    const res = result ? RESULTS[result] : null;

    return (
        <div className="not-prose my-8 rounded-2xl border border-slate-200 bg-slate-50 p-6">
            <h3 className="text-lg font-bold text-slate-900 mb-1">Which barcode format do I need?</h3>
            <p className="text-sm text-slate-500 mb-5">Answer two quick questions to find the right format for your use case.</p>

            {step === 'use-case' && (
                <div>
                    <p className="text-sm font-semibold text-slate-700 mb-3">What will you use the barcode for?</p>
                    <div className="grid sm:grid-cols-2 gap-3">
                        {[
                            { value: 'retail', label: 'Retail products', sub: 'Selling in stores or online' },
                            { value: 'logistics', label: 'Shipping & logistics', sub: 'Parcel labels, supply chain' },
                            { value: 'inventory', label: 'Inventory tracking', sub: 'Internal stock management' },
                            { value: 'industrial', label: 'Industrial / automotive', sub: 'Manufacturing, defense' },
                            { value: 'warehouse', label: 'Shelf & bin labeling', sub: 'Warehouse locations' },
                            { value: 'pharma', label: 'Pharmaceutical packaging', sub: 'Medication packaging control' },
                        ].map((opt) => (
                            <button
                                key={opt.value}
                                onClick={() => selectUseCase(opt.value)}
                                className="text-left rounded-xl border border-slate-200 bg-white p-4 hover:border-blue-400 hover:bg-blue-50 transition-colors group"
                            >
                                <div className="font-semibold text-slate-900 group-hover:text-blue-800 text-sm">{opt.label}</div>
                                <div className="text-xs text-slate-500 mt-0.5">{opt.sub}</div>
                            </button>
                        ))}
                    </div>
                </div>
            )}

            {step === 'region' && (
                <div>
                    <p className="text-sm font-semibold text-slate-700 mb-3">Where will you primarily sell?</p>
                    <div className="grid sm:grid-cols-2 gap-3">
                        <button
                            onClick={() => selectRegion('eu')}
                            className="text-left rounded-xl border border-slate-200 bg-white p-4 hover:border-blue-400 hover:bg-blue-50 transition-colors group"
                        >
                            <div className="font-semibold text-slate-900 group-hover:text-blue-800 text-sm">Europe / International</div>
                            <div className="text-xs text-slate-500 mt-0.5">EU, UK, Asia, global retail</div>
                        </button>
                        <button
                            onClick={() => selectRegion('us')}
                            className="text-left rounded-xl border border-slate-200 bg-white p-4 hover:border-blue-400 hover:bg-blue-50 transition-colors group"
                        >
                            <div className="font-semibold text-slate-900 group-hover:text-blue-800 text-sm">USA / Canada</div>
                            <div className="text-xs text-slate-500 mt-0.5">North American retail market</div>
                        </button>
                    </div>
                    <button onClick={reset} className="mt-3 text-xs text-slate-400 hover:text-slate-600 underline">← Start over</button>
                </div>
            )}

            {step === 'result' && res && (
                <div className={`rounded-xl border-2 p-5 ${colorMap[res.color]}`}>
                    <div className="flex items-center gap-3 mb-3">
                        <span className={`text-xs font-bold px-2.5 py-1 rounded-full ${badgeMap[res.color]}`}>Recommended</span>
                        <span className="font-bold text-xl">{res.label}</span>
                    </div>
                    <p className="text-sm mb-2">{res.description}</p>
                    <p className="text-xs opacity-70 font-mono">Example: {res.example}</p>
                    <button onClick={reset} className="mt-4 text-xs underline opacity-60 hover:opacity-90">← Try again</button>
                </div>
            )}
        </div>
    );
}
