import type { Component } from 'solid-js';
import { createSignal, For, Show } from 'solid-js';
import { ChevronDown, ChevronRight, AlertCircle } from 'lucide-solid';

interface IgnoredLinesListProps {
    lines: string[][];
}

const IgnoredLinesList: Component<IgnoredLinesListProps> = (props) => {
    const [isOpen, setIsOpen] = createSignal(false);

    return (
        <div class="bg-card rounded-3xl shadow-premium border border-border overflow-hidden transition-all hover:shadow-elevated">
            <button
                onClick={() => setIsOpen(!isOpen())}
                class="w-full flex items-center justify-between p-6 hover:bg-muted/30 transition-colors text-left"
            >
                <div class="flex items-center gap-4">
                    <div class="p-3 bg-muted rounded-2xl shadow-sm">
                        <AlertCircle class="w-6 h-6 text-primary" />
                    </div>
                    <div>
                        <h3 class="font-black text-lg text-foreground tracking-tight">Ignored CSV Rows ({props.lines.length})</h3>
                        <p class="text-[10px] font-bold text-muted-foreground uppercase tracking-wider mt-0.5">Lines that didn't match the extraction rules</p>
                    </div>
                </div>
                <div class="text-muted-foreground/40">
                    <Show when={isOpen()} fallback={<ChevronRight class="w-5 h-5" />}>
                        <ChevronDown class="w-5 h-5 transition-transform duration-300 rotate-180" />
                    </Show>
                </div>
            </button>

            <Show when={isOpen()}>
                <div class="border-t border-border bg-muted/20 p-6 max-h-[500px] overflow-y-auto custom-scrollbar">
                    <table class="w-full text-left border-collapse">
                        <thead>
                            <tr class="text-[10px] font-black uppercase tracking-[0.2em] text-muted-foreground/60 border-b border-border/60">
                                <th class="pb-3 px-3">Line</th>
                                <th class="pb-3 px-3">Raw Data</th>
                            </tr>
                        </thead>
                        <tbody class="text-xs text-foreground font-medium">
                            <For each={props.lines}>
                                {(row, index) => (
                                    <tr class="border-b border-border/40 last:border-0 hover:bg-card/50 transition-colors group">
                                        <td class="py-3 px-3 font-mono text-muted-foreground/40 w-16 text-[10px]">{index() + 1}</td>
                                        <td class="py-3 px-3 font-mono break-all leading-relaxed text-muted-foreground group-hover:text-foreground">
                                            {row.join(' | ')}
                                        </td>
                                    </tr>
                                )}
                            </For>
                        </tbody>
                    </table>
                    <div class="mt-6 flex items-center gap-3 justify-center px-4 py-3 bg-card/50 rounded-2xl border border-border/40 shadow-inner">
                        <AlertCircle class="w-4 h-4 text-muted-foreground/40" />
                        <p class="text-[10px] font-bold text-muted-foreground/60 uppercase tracking-wider italic">
                            These lines were skipped because they don't follow the "Item : Description (Qty)" or "Item : Description" pattern.
                        </p>
                    </div>
                </div>
            </Show>
        </div>
    );
};

export default IgnoredLinesList;