import type { Component } from 'solid-js';
import { Show } from 'solid-js';
import { AlertTriangle, CheckCircle2 } from 'lucide-solid';

interface ValidationStatusBarProps {
    validationStats: {
        hasIncomplete: boolean;
        incompleteCount: number;
    };
}

export const ValidationStatusBar: Component<ValidationStatusBarProps> = (props) => {
    return (
        <div class={`mt-12 p-5 rounded-3xl border shadow-premium transition-all duration-500 flex items-center justify-between ${props.validationStats.hasIncomplete ? 'bg-destructive/5 border-destructive/20 text-destructive' : 'bg-primary/5 border-primary/20 text-primary'}`}>
            <div class="flex items-center gap-4">
                <div class={`p-3 rounded-2xl shadow-sm ${props.validationStats.hasIncomplete ? 'bg-destructive/20' : 'bg-primary/20'}`}>
                    {props.validationStats.hasIncomplete ? <AlertTriangle class="w-5 h-5" /> : <CheckCircle2 class="w-5 h-5" />}
                </div>
                <div>
                    <p class="font-black text-sm uppercase tracking-tight">
                        {props.validationStats.hasIncomplete
                            ? `Attention Required: ${props.validationStats.incompleteCount} fields contain unfinalized information (#)`
                            : "All notes have been updated."}
                    </p>
                    <p class={`text-[10px] font-bold uppercase tracking-widest opacity-80 mt-0.5`}>
                        {props.validationStats.hasIncomplete
                            ? "Please replace all '#' markers with final project data before finalizing."
                            : "Everything looks good to go!"}
                    </p>
                </div>
            </div>
            <Show when={!props.validationStats.hasIncomplete}>
                <div class="px-4 py-2 bg-primary text-primary-foreground rounded-xl text-[10px] font-black uppercase tracking-wider shadow-lg shadow-primary/20 transition-all">
                    Ready to Print
                </div>
            </Show>
        </div>
    );
};