<?php

if ( ! defined( 'ABSPATH' ) ) exit;
/*--------------------------------------------------------------
# View Category (SaaS Modern UI) - Aligned with List View
--------------------------------------------------------------*/
function afdp_category_view($id) {
    $id = intval($id);
    // Use your namespaced taxonomy
    $taxonomy = 'afdp_food_category'; 
    $term = get_term($id, $taxonomy);

    if (!$term || is_wp_error($term)) {
        echo '<div class="notice notice-error"><p>Category not found.</p></div>';
        return;
    }

    $img_id = get_term_meta($id, 'afdp_category_image', true);
    
    // Fetch items with price meta
    $foods = get_posts([
        'post_type'   => 'afdp_food_item',
        'tax_query'   => [['taxonomy' => $taxonomy, 'field' => 'term_id', 'terms' => $id]],
        'numberposts' => -1,
        'post_status' => 'any'
    ]);

    $back_url = admin_url('admin.php?page=awesome_food_delivery&tab=categories&sub=all');
    ?>

    <style>
        :root { 
            --fd-primary: #e53935; 
            --fd-primary-hover: #c62828;
            --fd-border: #ccd0d4; 
            --fd-text: #1d2327;
            --fd-text-muted: #64748b;
        }
        
        /* Header Aligned with Add/Edit Card */
        .fd-view-header { background: #fff; border: 1px solid var(--fd-border); border-radius: 12px; padding: 25px; display: flex; align-items: center; gap: 20px; margin-bottom: 25px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
        .fd-view-header img { width: 80px; height: 80px; border-radius: 10px; object-fit: cover; border: 1px solid #eee; }
        .fd-view-header .no-img { width: 80px; height: 80px; background: #f8f9fa; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #ccd0d4; border: 1px solid #eee; }
        
        .fd-view-title h1 { margin: 0; font-size: 22px; font-weight: 700; color: var(--fd-text); }
        .fd-view-title p { margin: 5px 0 0; color: var(--fd-text-muted); font-size: 13px; }

        .fd-table-card { background: #fff; border: 1px solid var(--fd-border); border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
        .fd-table-header { padding: 18px 20px; border-bottom: 1px solid #f0f0f1; background: #fff; display: flex; justify-content: space-between; align-items: center; }
        
        .fd-grid-table { width: 100%; border-collapse: collapse; }
        .fd-grid-table th { background: #f8f9fa; padding: 14px 20px; text-align: left; font-size: 11px; text-transform: uppercase; color: var(--fd-text-muted); border-bottom: 2px solid #f0f0f1; }
        .fd-grid-table td { padding: 14px 20px; border-bottom: 1px solid #f0f0f1; vertical-align: middle; }
        
        .fd-item-cell { display: flex; align-items: center; gap: 12px; }
        .fd-item-cell img { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; border: 1px solid #eee; }
        .fd-item-name { font-weight: 600; color: var(--fd-text); font-size: 14px; }
        
        /* Badge Styles */
        .fd-badge { padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
        .badge-publish { background: #e7f5ec; color: #008a20; }
        .badge-draft { background: #f1f5f9; color: #475569; }
        .fd-price-tag { color: var(--fd-primary); font-weight: 700; font-size: 14px; }
        
        /* Button System Aligned with List */
        .btn-fd-sm { 
            display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; 
            border-radius: 6px; font-size: 12px; font-weight: 600; text-decoration: none; 
            transition: all 0.2s ease; cursor: pointer; border: 1px solid transparent;
        }
        .btn-outline-fd { color: var(--fd-primary); border-color: var(--fd-primary); background: transparent; }
        .btn-outline-fd:hover { background: var(--fd-primary); color: #fff; }

        .fd-btn-back { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--fd-text-muted); font-weight: 600; margin-bottom: 20px; font-size: 14px; }
        .fd-btn-back:hover { color: var(--fd-primary); }
        .fd-btn-back svg { width: 16px; height: 16px; stroke-width: 2.5; }
    </style>

    <div class="wrap" style="margin-top:20px; max-width: 1000px;">
        <a href="<?php echo esc_url($back_url); ?>" class="fd-btn-back">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
            Back to All Categories
        </a>

        <div class="fd-view-header">
            <?php if($img_id): ?>
                <?php echo wp_get_attachment_image($img_id, 'thumbnail'); ?>
            <?php else: ?>
                <div class="no-img"><span class="dashicons dashicons-category" style="font-size:30px; width:30px; height:30px;"></span></div>
            <?php endif; ?>
            
            <div class="fd-view-title">
                <h1><?php echo esc_html($term->name); ?></h1>
                <p>
                    <strong>ID: #<?php echo esc_attr($id); ?></strong> &nbsp;•&nbsp; 
                    <strong><?php echo count($foods); ?> Items Assigned</strong>
                </p>
            </div>
        </div>

        <div class="fd-table-card">
            <div class="fd-table-header">
                <h3 style="margin:0; font-weight:700; font-size:16px;">Items in this Category</h3>
                <a href="?page=awesome_food_delivery&tab=items&sub=add" class="btn-fd-sm btn-outline-fd">+ Add Item</a>
            </div>

            <table class="fd-grid-table">
                <thead>
                    <tr>
                        <th>Product Details</th>
                        <th>Price</th>
                        <th>Status</th>
                        <th style="text-align:right;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <?php if($foods): ?>
                        <?php foreach($foods as $f): 
                            $price = get_post_meta($f->ID, 'afdp_food_price', true); 
                            $status_class = ($f->post_status === 'publish') ? 'badge-publish' : 'badge-draft';
                        ?>
                            <tr>
                                <td>
                                    <div class="fd-item-cell">
                                        <?php if(has_post_thumbnail($f->ID)): ?>
                                            <?php echo get_the_post_thumbnail($f->ID, [40, 40]); ?>
                                        <?php else: ?>
                                            <div style="width:40px; height:40px; background:#f1f5f9; border-radius:6px; display:flex; align-items:center; justify-content:center; border:1px solid #eee;">
                                                <span class="dashicons dashicons-food" style="color:#cbd5e1; font-size:18px;"></span>
                                            </div>
                                        <?php endif; ?>
                                        <div class="fd-item-name"><?php echo esc_html($f->post_title); ?></div>
                                    </div>
                                </td>
                                <td>
                                    <span class="fd-price-tag"><?php echo $price ? '$' . esc_html($price) : '--'; ?></span>
                                </td>
                                <td>
                                    <span class="fd-badge <?php echo esc_attr($status_class); ?>">
                                        <?php echo esc_html($f->post_status); ?>
                                    </span>
                                </td>
                                <td style="text-align:right;">
                                    <a href="?page=awesome_food_delivery&tab=items&sub=add&edit=<?php echo esc_attr($f->ID); ?>" class="btn-fd-sm btn-outline-fd">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" style="width:14px;"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4L18.5 2.5z"></path></svg>
                                        Edit
                                    </a>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    <?php else: ?>
                        <tr>
                            <td colspan="4" style="text-align:center; padding: 60px; color: var(--fd-text-muted);">
                                <span class="dashicons dashicons-info" style="font-size:30px; margin-bottom:10px; display:block; margin: 0 auto 10px;"></span>
                                No food items have been assigned to this category yet.
                            </td>
                        </tr>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>
    <?php
}