{{--
    ShiftBridge Card Component
    
    Usage:
    <x-ui.card>
        <p>Card content</p>
    </x-ui.card>
    
    <x-ui.card title="Card Title">
        <p>Card with title</p>
    </x-ui.card>
    
    <x-ui.card title="Card Title" subtitle="Subtitle text">
        <p>Card with title and subtitle</p>
    </x-ui.card>
    
    <x-ui.card title="Card Title" :actions="true">
        <x-slot:actions>
            <x-ui.button size="sm" variant="primary">Action</x-ui.button>
        </x-slot:actions>
        <p>Card with actions</p>
    </x-ui.card>
    
    <x-ui.card title="Card Title" footer="Footer text">
        <p>Card with footer</p>
    </x-ui.card>
    
    <x-ui.card title="Card Title" header-image="/path/to/image.jpg">
        <p>Card with header image</p>
    </x-ui.card>
    
    <x-ui.card variant="bordered">
        <p>Bordered card</p>
    </x-ui.card>
    
    <x-ui.card variant="shadow">
        <p>Shadow card</p>
    </x-ui.card>
    
    <x-ui.card size="sm">
        <p>Small card</p>
    </x-ui.card>
    
    <x-ui.card size="lg">
        <p>Large card</p>
    </x-ui.card>
    
    <x-ui.card loading>
        <p>Loading card</p>
    </x-ui.card>
    
    <x-ui.card collapsible collapsed>
        <p>Collapsible card (starts collapsed)</p>
    </x-ui.card>
    
    Props:
    - title: string (card title)
    - subtitle: string (card subtitle)
    - actions: boolean (show actions slot)
    - footer: string (footer content)
    - header-image: string (URL for header image)
    - variant: string (default, bordered, shadow, ghost)
    - size: string (sm, md, lg)
    - loading: boolean (show loading overlay)
    - collapsible: boolean (make card collapsible)
    - collapsed: boolean (start collapsed)
    - no-padding: boolean (remove body padding)
    - class: string (additional CSS classes)
--}}

@props([
    'title' => null,
    'subtitle' => null,
    'actions' => false,
    'footer' => null,
    'headerImage' => null,
    'variant' => 'default',
    'size' => 'md',
    'loading' => false,
    'collapsible' => false,
    'collapsed' => false,
    'noPadding' => false,
    'id' => null,
])

@php
// Generate unique ID for collapsible cards
$cardId = $id ?? 'card-' . uniqid();
$bodyId = $cardId . '-body';

// Base classes
$baseClasses = 'bg-[var(--sb-card-bg)] rounded-lg overflow-hidden transition-all duration-200';

// Variant classes
$variantClasses = match($variant) {
    'bordered' => 'border border-[var(--sb-border)]',
    'shadow' => 'shadow-lg hover:shadow-xl',
    'ghost' => 'border border-transparent bg-transparent',
    default => 'border border-[var(--sb-border)] shadow-sm hover:shadow-md',
};

// Size classes for padding
$headerPadding = match($size) {
    'sm' => 'px-3 py-2',
    'md' => 'px-4 py-3',
    'lg' => 'px-6 py-4',
    default => 'px-4 py-3',
};

$bodyPadding = $noPadding ? '' : match($size) {
    'sm' => 'p-3',
    'md' => 'p-4',
    'lg' => 'p-6',
    default => 'p-4',
};

$footerPadding = match($size) {
    'sm' => 'px-3 py-2',
    'md' => 'px-4 py-3',
    'lg' => 'px-6 py-4',
    default => 'px-4 py-3',
};

// Title size
$titleSize = match($size) {
    'sm' => 'text-sm',
    'md' => 'text-base',
    'lg' => 'text-lg',
    default => 'text-base',
};

// Subtitle size
$subtitleSize = match($size) {
    'sm' => 'text-xs',
    'md' => 'text-sm',
    'lg' => 'text-base',
    default => 'text-sm',
};

// Collapse/expand icon
$collapseIcon = $collapsed 
    ? '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>'
    : '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"></polyline></svg>';

// Combine card classes
$cardClasses = implode(' ', array_filter([$baseClasses, $variantClasses]));
@endphp

<div {{ $attributes->merge(['class' => $cardClasses, 'id' => $cardId]) }}>
    {{-- Header Image --}}
    @if($headerImage)
        <div class="w-full h-48 bg-cover bg-center" style="background-image: url('{{ $headerImage }}');"></div>
    @endif
    
    {{-- Header --}}
    @if($title || $actions || $collapsible)
        <div class="{{ $headerPadding }} border-b border-[var(--sb-border)] bg-[var(--sb-card-header-bg)] flex items-center justify-between">
            <div class="flex-1 min-w-0">
                @if($title)
                    <h3 class="{{ $titleSize }} font-semibold text-[var(--sb-text-primary)] truncate">
                        {{ $title }}
                    </h3>
                @endif
                @if($subtitle)
                    <p class="{{ $subtitleSize }} text-[var(--sb-text-secondary)] mt-0.5">
                        {{ $subtitle }}
                    </p>
                @endif
            </div>
            
            <div class="flex items-center gap-2 ml-4">
                {{-- Actions Slot --}}
                @if($actions)
                    <div class="flex items-center gap-2">
                        {{ $actionsSlot ?? '' }}
                    </div>
                @endif
                
                {{-- Collapsible Toggle --}}
                @if($collapsible)
                    <button 
                        type="button"
                        class="p-1 rounded hover:bg-[var(--sb-border)] transition-colors text-[var(--sb-text-secondary)]"
                        onclick="document.getElementById('{{ $bodyId }}').classList.toggle('hidden'); this.querySelector('svg').classList.toggle('rotate-180');"
                        aria-expanded="{{ $collapsed ? 'false' : 'true' }}"
                        aria-controls="{{ $bodyId }}"
                    >
                        <span class="block transition-transform duration-200 {{ $collapsed ? '' : 'rotate-180' }}">
                            {!! $collapseIcon !!}
                        </span>
                    </button>
                @endif
            </div>
        </div>
    @endif
    
    {{-- Body --}}
    <div 
        id="{{ $bodyId }}"
        class="{{ $bodyPadding }} {{ $collapsed && $collapsible ? 'hidden' : '' }} relative"
    >
        {{-- Loading Overlay --}}
        @if($loading)
            <div class="absolute inset-0 bg-white/80 flex items-center justify-center z-10">
                <svg class="animate-spin h-6 w-6 text-[var(--sb-primary)]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
            </div>
        @endif
        
        {{ $slot }}
    </div>
    
    {{-- Footer --}}
    @if($footer || isset($footerSlot))
        <div class="{{ $footerPadding }} border-t border-[var(--sb-border)] bg-[var(--sb-card-header-bg)]">
            @if($footer)
                <p class="text-sm text-[var(--sb-text-secondary)]">{{ $footer }}</p>
            @else
                {{ $footerSlot ?? '' }}
            @endif
        </div>
    @endif
</div>