<?php

require_once __DIR__ . '/db/auth.php';
require_once __DIR__ . '/db/scstatsitem.php';
require_once __DIR__ . '/db/scitemcustom.php';

auth_start_session();
auth_bootstrap();
auth_handle_page_access_post('scitemcustom.php', 'Item Custom');
auth_require_page_access('scitemcustom.php', 'Item Custom');
scstatsitem_bootstrap();
scitemcustom_bootstrap();

function scitemcustom_normalize_sign(?string $sign): string
{
    if ($sign === '-') {
        return '-';
    }

    if ($sign === '+') {
        return '+';
    }

    return '';
}

function scitemcustom_normalize_value(?string $value): ?string
{
    $raw = str_replace(',', '.', trim((string) $value));
    if ($raw === '' || !is_numeric($raw)) {
        return null;
    }

    return number_format(abs((float) $raw), 2, '.', '');
}

function scitemcustom_display_value($value): string
{
    if (!is_numeric((string) $value)) {
        return '0';
    }

    $formatted = number_format((float) $value, 2, '.', '');
    $formatted = rtrim(rtrim($formatted, '0'), '.');

    return $formatted === '' ? '0' : $formatted;
}

function scitemcustom_escape_like(string $value): string
{
    return strtr($value, [
        '\\' => '\\\\',
        '%' => '\\%',
        '_' => '\\_',
    ]);
}

function scitemcustom_search_available_items(PDO $db, int $ownerAuthId, string $query, ?int $limit = null): array
{
    $query = trim($query);
    if ($query === '') {
        return [];
    }

    $escapedQuery = scitemcustom_escape_like($query);
    $exact = $escapedQuery;
    $prefix = $escapedQuery . '%';
    $contains = '%' . $escapedQuery . '%';
    $limitClause = '';
    if ($limit !== null && $limit > 0) {
        $limitClause = ' LIMIT ' . (int) $limit;
    }

    $sql = "SELECT cl_scobjs_id, cl_scobjs_name, cl_scobjs_uuid, cl_scobjs_type, cl_scobjs_subtype
            FROM tbl_scobjs
            WHERE cl_scobjs_id NOT IN (
                SELECT cl_scitemcustom_obj_id
                FROM tbl_scitemcustom
                WHERE cl_scitemcustom_owner_auth_id = :owner_auth_id
            )
              AND (
                cl_scobjs_name LIKE :contains_name
                OR cl_scobjs_type LIKE :contains_type
                OR cl_scobjs_subtype LIKE :contains_subtype
                OR cl_scobjs_uuid LIKE :contains_uuid
              )
            ORDER BY
                CASE
                    WHEN cl_scobjs_name = :exact_name THEN 0
                    WHEN cl_scobjs_name LIKE :prefix_name THEN 1
                    WHEN cl_scobjs_uuid = :exact_uuid THEN 2
                    WHEN cl_scobjs_uuid LIKE :prefix_uuid THEN 3
                    WHEN cl_scobjs_type LIKE :prefix_type THEN 4
                    WHEN cl_scobjs_subtype LIKE :prefix_subtype THEN 5
                    ELSE 6
                END ASC,
                CHAR_LENGTH(cl_scobjs_name) ASC,
                cl_scobjs_name ASC,
                cl_scobjs_id ASC
            {$limitClause}";

    $stmt = $db->prepare($sql);
    $stmt->execute([
        'owner_auth_id' => $ownerAuthId,
        'contains_name' => $contains,
        'contains_type' => $contains,
        'contains_subtype' => $contains,
        'contains_uuid' => $contains,
        'exact_name' => $exact,
        'prefix_name' => $prefix,
        'exact_uuid' => $exact,
        'prefix_uuid' => $prefix,
        'prefix_type' => $prefix,
        'prefix_subtype' => $prefix,
    ]);

    return $stmt->fetchAll() ?: [];
}

function scitemcustom_preview(string $sign, $value, string $unit): string
{
    $prefix = $sign === '-' ? '-' : ($sign === '+' ? '+' : '');

    return $prefix . scitemcustom_display_value($value) . ' ' . $unit;
}

function scitemcustom_current_owner_auth_id(PDO $db): int
{
    $session_user = isset($_SESSION['user']) ? trim((string) $_SESSION['user']) : '';
    if ($session_user === '') {
        return 0;
    }

    $stmt_owner = $db->prepare(
        'SELECT cl_auth_id
         FROM tbl_auth
         WHERE cl_auth_user = :user
         LIMIT 1'
    );
    $stmt_owner->execute(['user' => $session_user]);

    return (int) $stmt_owner->fetchColumn();
}

function scitemcustom_redirect(?int $itemcustom_id = null): void
{
    $location = 'scitemcustom.php';
    if ($itemcustom_id !== null && $itemcustom_id > 0) {
        $location .= '#itemcustom-' . $itemcustom_id;
    }

    header('Location: ' . $location);
    exit;
}

$flash = auth_flash_get();
$flash_type = $flash['type'] ?? '';
$flash_message = $flash['message'] ?? '';

$db = db();
$csrf_token = auth_csrf_token();
$allowed_signs = ['+', '', '-'];
$sign_labels = ['+' => '+', '' => 'Aucun', '-' => '-'];
$current_owner_auth_id = scitemcustom_current_owner_auth_id($db);

if ($current_owner_auth_id <= 0) {
    auth_flash_set('error', 'Utilisateur introuvable. Merci de vous reconnecter.');
    header('Location: logout.php');
    exit;
}

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $submitted_csrf = $_POST['csrf_token'] ?? '';
    if (!auth_validate_csrf($submitted_csrf)) {
        auth_flash_set('error', 'Jeton CSRF invalide.');
        scitemcustom_redirect();
    }

    $action = $_POST['action'] ?? '';

    if ($action === 'add_custom_item') {
        $obj_id = (int) ($_POST['obj_id'] ?? 0);
        $redirect_itemcustom_id = null;
        if ($obj_id <= 0) {
            auth_flash_set('error', 'Objet invalide.');
        } else {
            try {
                $stmt_check = $db->prepare('SELECT cl_scobjs_id FROM tbl_scobjs WHERE cl_scobjs_id = :id');
                $stmt_check->execute(['id' => $obj_id]);
                if (!$stmt_check->fetch()) {
                    auth_flash_set('error', 'Objet introuvable.');
                } else {
                    $stmt_insert = $db->prepare(
                        'INSERT INTO tbl_scitemcustom (cl_scitemcustom_owner_auth_id, cl_scitemcustom_obj_id)
                         VALUES (:owner_auth_id, :obj_id)'
                    );
                    $stmt_insert->execute([
                        'owner_auth_id' => $current_owner_auth_id,
                        'obj_id' => $obj_id,
                    ]);
                    $redirect_itemcustom_id = (int) $db->lastInsertId();
                    auth_flash_set('success', 'Objet ajouté dans Item Custom.');
                }
            } catch (PDOException $e) {
                if ((string) $e->getCode() === '23000') {
                    auth_flash_set('error', 'Cet objet est déjà présent dans Item Custom.');
                } else {
                    auth_flash_set('error', 'Erreur lors de l\'ajout : ' . $e->getMessage());
                }
            }
        }

        scitemcustom_redirect($redirect_itemcustom_id);
    }

    if ($action === 'delete_custom_item') {
        $itemcustom_id = (int) ($_POST['itemcustom_id'] ?? 0);
        if ($itemcustom_id > 0) {
            try {
                $stmt_delete = $db->prepare(
                    'DELETE FROM tbl_scitemcustom
                     WHERE cl_scitemcustom_id = :id
                       AND cl_scitemcustom_owner_auth_id = :owner_auth_id'
                );
                $stmt_delete->execute([
                    'id' => $itemcustom_id,
                    'owner_auth_id' => $current_owner_auth_id,
                ]);

                if ($stmt_delete->rowCount() > 0) {
                    auth_flash_set('success', 'Objet Item Custom supprimé.');
                } else {
                    auth_flash_set('error', 'Objet introuvable ou non autorisé.');
                }
            } catch (PDOException $e) {
                auth_flash_set('error', 'Erreur lors de la suppression : ' . $e->getMessage());
            }
        }

        scitemcustom_redirect();
    }

    if ($action === 'add_custom_stat') {
        $itemcustom_id = (int) ($_POST['itemcustom_id'] ?? 0);
        $stat_id = (int) ($_POST['stat_id'] ?? 0);
        $sign = scitemcustom_normalize_sign($_POST['sign'] ?? '+');
        $value = scitemcustom_normalize_value($_POST['value'] ?? '');

        if ($itemcustom_id <= 0 || $stat_id <= 0 || $value === null) {
            auth_flash_set('error', 'Données de statistique invalides.');
        } else {
            try {
                $stmt_check = $db->prepare(
                    'SELECT c.cl_scitemcustom_id, s.cl_scstatsitem_id
                     FROM tbl_scitemcustom c
                     JOIN tbl_scstatsitem s ON s.cl_scstatsitem_id = :stat_id
                     WHERE c.cl_scitemcustom_id = :itemcustom_id
                       AND c.cl_scitemcustom_owner_auth_id = :owner_auth_id'
                );
                $stmt_check->execute([
                    'itemcustom_id' => $itemcustom_id,
                    'stat_id' => $stat_id,
                    'owner_auth_id' => $current_owner_auth_id,
                ]);

                if (!$stmt_check->fetch()) {
                    auth_flash_set('error', 'Objet ou statistique introuvable.');
                } else {
                    $stmt_insert = $db->prepare(
                        'INSERT INTO tbl_scitemcustomstat (
                            cl_scitemcustomstat_itemcustom_id,
                            cl_scitemcustomstat_stat_id,
                            cl_scitemcustomstat_sign,
                            cl_scitemcustomstat_value
                        ) VALUES (:itemcustom_id, :stat_id, :sign, :value)'
                    );
                    $stmt_insert->execute([
                        'itemcustom_id' => $itemcustom_id,
                        'stat_id' => $stat_id,
                        'sign' => $sign,
                        'value' => $value,
                    ]);
                    auth_flash_set('success', 'Statistique ajoutée à l\'objet.');
                }
            } catch (PDOException $e) {
                if ((string) $e->getCode() === '23000') {
                    auth_flash_set('error', 'Cette statistique est déjà configurée pour cet objet.');
                } else {
                    auth_flash_set('error', 'Erreur lors de l\'ajout : ' . $e->getMessage());
                }
            }
        }

        scitemcustom_redirect($itemcustom_id);
    }

    if ($action === 'update_custom_stat') {
        $custom_stat_id = (int) ($_POST['custom_stat_id'] ?? 0);
        $itemcustom_id = (int) ($_POST['itemcustom_id'] ?? 0);
        $stat_id = (int) ($_POST['stat_id'] ?? 0);
        $sign = scitemcustom_normalize_sign($_POST['sign'] ?? '+');
        $value = scitemcustom_normalize_value($_POST['value'] ?? '');

        if ($custom_stat_id <= 0 || $stat_id <= 0 || $value === null) {
            auth_flash_set('error', 'Données de mise à jour invalides.');
        } else {
            try {
                $stmt_update = $db->prepare(
                    'UPDATE tbl_scitemcustomstat cs
                     JOIN tbl_scitemcustom c ON c.cl_scitemcustom_id = cs.cl_scitemcustomstat_itemcustom_id
                     JOIN tbl_scstatsitem s ON s.cl_scstatsitem_id = :stat_id
                     SET cs.cl_scitemcustomstat_stat_id = :stat_id,
                         cs.cl_scitemcustomstat_sign = :sign,
                         cs.cl_scitemcustomstat_value = :value
                     WHERE cs.cl_scitemcustomstat_id = :id
                       AND c.cl_scitemcustom_owner_auth_id = :owner_auth_id'
                );
                $stmt_update->execute([
                    'stat_id' => $stat_id,
                    'sign' => $sign,
                    'value' => $value,
                    'id' => $custom_stat_id,
                    'owner_auth_id' => $current_owner_auth_id,
                ]);

                if ($stmt_update->rowCount() > 0) {
                    auth_flash_set('success', 'Statistique mise à jour.');
                } else {
                    auth_flash_set('error', 'Statistique introuvable ou non autorisée.');
                }
            } catch (PDOException $e) {
                if ((string) $e->getCode() === '23000') {
                    auth_flash_set('error', 'Cette statistique est déjà configurée pour cet objet.');
                } else {
                    auth_flash_set('error', 'Erreur lors de la mise à jour : ' . $e->getMessage());
                }
            }
        }

        scitemcustom_redirect($itemcustom_id);
    }

    if ($action === 'delete_custom_stat') {
        $custom_stat_id = (int) ($_POST['custom_stat_id'] ?? 0);
        $itemcustom_id = (int) ($_POST['itemcustom_id'] ?? 0);
        if ($custom_stat_id > 0) {
            try {
                $stmt_delete = $db->prepare(
                    'DELETE cs
                     FROM tbl_scitemcustomstat cs
                     JOIN tbl_scitemcustom c ON c.cl_scitemcustom_id = cs.cl_scitemcustomstat_itemcustom_id
                     WHERE cs.cl_scitemcustomstat_id = :id
                       AND c.cl_scitemcustom_owner_auth_id = :owner_auth_id'
                );
                $stmt_delete->execute([
                    'id' => $custom_stat_id,
                    'owner_auth_id' => $current_owner_auth_id,
                ]);

                if ($stmt_delete->rowCount() > 0) {
                    auth_flash_set('success', 'Statistique supprimée de l\'objet.');
                } else {
                    auth_flash_set('error', 'Statistique introuvable ou non autorisée.');
                }
            } catch (PDOException $e) {
                auth_flash_set('error', 'Erreur lors de la suppression : ' . $e->getMessage());
            }
        }

        scitemcustom_redirect($itemcustom_id);
    }
}

if ($_SERVER['REQUEST_METHOD'] === 'GET' && (string) ($_GET['ajax'] ?? '') === 'item_suggestions') {
    header('Content-Type: application/json; charset=UTF-8');

    $query = trim((string) ($_GET['q'] ?? ''));
    $items = [];

    if (mb_strlen($query) >= 3) {
        $items = array_map(static function (array $row): array {
            return [
                'id' => (int) $row['cl_scobjs_id'],
                'name' => (string) $row['cl_scobjs_name'],
                'uuid' => (string) $row['cl_scobjs_uuid'],
                'type' => (string) $row['cl_scobjs_type'],
                'subtype' => (string) ($row['cl_scobjs_subtype'] ?? ''),
            ];
        }, scitemcustom_search_available_items($db, $current_owner_auth_id, $query));
    }

    echo json_encode(['items' => $items], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
    exit;
}

$search = trim($_GET['search'] ?? '');
$search_results = $search !== ''
    ? scitemcustom_search_available_items($db, $current_owner_auth_id, $search, 15)
    : [];

$stmt_stats_catalog = $db->query('SELECT * FROM tbl_scstatsitem ORDER BY cl_scstatsitem_name ASC, cl_scstatsitem_id ASC');
$stats_catalog = $stmt_stats_catalog->fetchAll();
$stats_by_id = [];
foreach ($stats_catalog as $stat_catalog_row) {
    $stats_by_id[(int) $stat_catalog_row['cl_scstatsitem_id']] = $stat_catalog_row;
}

$sql_custom_items = "SELECT c.*, o.cl_scobjs_name, o.cl_scobjs_uuid, o.cl_scobjs_type, o.cl_scobjs_subtype, o.cl_scobjs_rarity
                     FROM tbl_scitemcustom c
                     JOIN tbl_scobjs o ON o.cl_scobjs_id = c.cl_scitemcustom_obj_id
                     WHERE c.cl_scitemcustom_owner_auth_id = :owner_auth_id
                     ORDER BY o.cl_scobjs_name ASC, c.cl_scitemcustom_id ASC";
$stmt_custom_items = $db->prepare($sql_custom_items);
$stmt_custom_items->execute(['owner_auth_id' => $current_owner_auth_id]);
$custom_items = $stmt_custom_items->fetchAll();

$stmt_custom_stats = $db->prepare(
    "SELECT cs.*, st.cl_scstatsitem_name, st.cl_scstatsitem_unit
     FROM tbl_scitemcustomstat cs
     JOIN tbl_scitemcustom c ON c.cl_scitemcustom_id = cs.cl_scitemcustomstat_itemcustom_id
     JOIN tbl_scstatsitem st ON st.cl_scstatsitem_id = cs.cl_scitemcustomstat_stat_id
     WHERE c.cl_scitemcustom_owner_auth_id = :owner_auth_id
     ORDER BY cs.cl_scitemcustomstat_itemcustom_id ASC, st.cl_scstatsitem_name ASC, cs.cl_scitemcustomstat_id ASC"
);
$stmt_custom_stats->execute(['owner_auth_id' => $current_owner_auth_id]);
$custom_stats_rows = $stmt_custom_stats->fetchAll();
$custom_stats_by_item = [];
foreach ($custom_stats_rows as $custom_stat_row) {
    $item_key = (int) $custom_stat_row['cl_scitemcustomstat_itemcustom_id'];
    if (!isset($custom_stats_by_item[$item_key])) {
        $custom_stats_by_item[$item_key] = [];
    }
    $custom_stats_by_item[$item_key][] = $custom_stat_row;
}

$current_session_user = $_SESSION['user'] ?? '';
?>
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OBJETS PERSONNALISES | R.E.A.C.T. Admin</title>
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <link rel="stylesheet" type="text/css" href="css/default.css">
    <style>
        :root {
            --primary: #a29b78;
            --primary-glow: rgba(162, 155, 120, 0.4);
            --bg-dark: #080a0f;
            --card-bg: rgba(20, 24, 33, 0.85);
            --border-glow: rgba(162, 155, 120, 0.25);
            --danger: #ff4d4d;
            --success: #00ff88;
        }

        @font-face {
            font-family: 'Electrolize';
            src: url('fonts/Electrolize-Regular.ttf') format('truetype');
        }

        body {
            background: radial-gradient(circle at top right, #1a1f2e, var(--bg-dark));
            background-attachment: fixed;
            color: #e0e0e0;
            font-family: 'Electrolize', sans-serif;
            margin: 0;
            overflow-x: hidden;
            min-height: 100vh;
        }

        .admin-layout {
            display: flex;
            flex-direction: column;
            max-width: 1400px;
            margin: 0 auto;
            padding: 2rem;
            animation: fadeIn 0.6s ease-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .admin-topbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.5rem 2rem;
            background: var(--card-bg);
            backdrop-filter: blur(10px);
            border: 1px solid var(--border-glow);
            border-radius: 12px;
            margin-bottom: 2rem;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            gap: 1rem;
        }

        .topbar-info h1 {
            margin: 0;
            font-size: 1.5rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            background: linear-gradient(90deg, #fff, var(--primary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .topbar-info p {
            margin: 0.25rem 0 0;
            font-size: 0.85rem;
            color: var(--primary);
            opacity: 0.8;
        }

        .topbar-actions {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
            align-items: center;
        }

        .session-user {
            opacity: 0.85;
        }

        .btn-modern {
            padding: 0.6rem 1.2rem;
            border: 1px solid var(--primary);
            background: transparent;
            color: #fff;
            font-family: 'Electrolize', sans-serif;
            font-size: 0.9rem;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border-radius: 4px;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            box-sizing: border-box;
        }

        .btn-modern:hover {
            background: var(--primary);
            color: var(--bg-dark);
            box-shadow: 0 0 15px var(--primary-glow);
        }

        .btn-modern.danger { border-color: var(--danger); color: var(--danger); }
        .btn-modern.danger:hover { background: var(--danger); color: #fff; }
        .btn-mini { padding: 0.45rem 0.75rem; font-size: 0.75rem; }

        .nav-tabs { display: flex; gap: 1rem; margin-bottom: 2rem; border-bottom: 1px solid var(--border-glow); padding-bottom: 1rem; }
        .nav-tabs a { text-decoration: none; color: #888; text-transform: uppercase; font-size: 0.9rem; transition: color 0.3s; }
        .nav-tabs a:hover, .nav-tabs a.active { color: var(--primary); }

        .flash {
            padding: 1rem 1.25rem;
            border-radius: 10px;
            margin-bottom: 1.5rem;
            border: 1px solid transparent;
        }

        .flash.success {
            background: rgba(0, 255, 136, 0.08);
            color: var(--success);
            border-color: rgba(0, 255, 136, 0.2);
        }

        .flash.error {
            background: rgba(255, 77, 77, 0.08);
            color: #ffb3b3;
            border-color: rgba(255, 77, 77, 0.2);
        }

        .admin-grid {
            display: grid;
            grid-template-columns: 370px 1fr;
            gap: 2rem;
            align-items: start;
        }

        .glass-card {
            position: relative;
            background: var(--card-bg);
            backdrop-filter: blur(10px);
            border: 1px solid var(--border-glow);
            border-radius: 14px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.28);
            padding: 1.5rem;
        }

        .item-picker-card {
            z-index: 30;
        }

        .glass-card h2,
        .glass-card h3 {
            margin-top: 0;
            color: var(--primary);
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .stack {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .form-group {
            margin-bottom: 1rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.45rem;
            color: var(--primary);
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .form-control {
            width: 100%;
            box-sizing: border-box;
            padding: 0.85rem 1rem;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(162, 155, 120, 0.15);
            color: #fff;
            outline: none;
            font-family: 'Electrolize', sans-serif;
        }

        .form-control:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(162, 155, 120, 0.15);
        }

        select.form-control {
            background: #353b45;
            color: #fff;
            border-color: #565d68;
            color-scheme: dark;
        }

        select.form-control:focus {
            background: #3d444f;
            color: #fff;
        }

        select.form-control option {
            background: #353b45;
            color: #fff;
        }

        select.form-control option:checked {
            background: #4a5260;
            color: #fff;
        }

        .form-help {
            margin-top: 0.4rem;
            font-size: 0.8rem;
            color: #9fa7b8;
            line-height: 1.4;
        }

        .search-result-list,
        .item-card-list {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .item-picker-form {
            display: flex;
            flex-direction: column;
            gap: 0.9rem;
        }

        .item-picker-wrap {
            position: relative;
        }

        .item-picker-input {
            padding-right: 3rem;
        }

        .item-picker-dropdown {
            position: absolute;
            top: calc(100% + 0.45rem);
            left: 0;
            right: 0;
            z-index: 20;
            display: flex;
            flex-direction: column;
            gap: 0.65rem;
            max-height: 360px;
            overflow-y: auto;
            overflow-x: hidden;
            box-sizing: border-box;
            padding: 0.75rem;
            border-radius: 12px;
            border: 1px solid rgba(162, 155, 120, 0.22);
            background: rgba(17, 24, 39, 0.96);
            box-shadow: 0 18px 45px rgba(0, 0, 0, 0.42);
            backdrop-filter: blur(12px);
        }

        .item-picker-option {
            display: flex;
            gap: 0.85rem;
            align-items: flex-start;
            width: 100%;
            box-sizing: border-box;
            border: 1px solid rgba(255, 255, 255, 0.07);
            border-radius: 10px;
            padding: 0.8rem;
            background: rgba(255, 255, 255, 0.035);
            color: inherit;
            text-align: left;
            cursor: pointer;
            transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
        }

        .item-picker-option:hover,
        .item-picker-option:focus-visible,
        .item-picker-option.is-active {
            outline: none;
            border-color: rgba(162, 155, 120, 0.55);
            background: rgba(162, 155, 120, 0.09);
            transform: translateY(-1px);
        }

        .item-picker-option-empty {
            cursor: default;
        }

        .item-picker-option-empty:hover,
        .item-picker-option-empty:focus-visible {
            transform: none;
            border-color: rgba(255, 255, 255, 0.07);
            background: rgba(255, 255, 255, 0.035);
        }

        .item-picker-selection {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.9rem;
            border: 1px solid rgba(162, 155, 120, 0.22);
            border-radius: 12px;
            padding: 0.85rem 1rem;
            background: rgba(162, 155, 120, 0.06);
        }

        .item-picker-selection-main {
            display: flex;
            align-items: flex-start;
            gap: 0.9rem;
            min-width: 0;
            flex: 1;
        }

        .item-picker-actions {
            display: flex;
            gap: 0.75rem;
            flex-wrap: wrap;
        }

        .item-picker-actions .btn-modern[disabled] {
            opacity: 0.55;
            cursor: not-allowed;
            pointer-events: none;
        }

        .search-item,
        .custom-item-card {
            border: 1px solid var(--border-glow);
            border-radius: 12px;
            padding: 1rem;
            background: rgba(255, 255, 255, 0.03);
        }

        .search-item {
            display: flex;
            gap: 0.9rem;
            align-items: flex-start;
        }

        .search-item-main {
            display: flex;
            gap: 0.9rem;
            align-items: flex-start;
            min-width: 0;
            width: 100%;
        }

        .item-meta {
            display: flex;
            align-items: flex-start;
            gap: 0.9rem;
            min-width: 0;
            flex: 1;
        }

        .search-item-content {
            display: flex;
            flex-direction: column;
            gap: 0.45rem;
            min-width: 0;
            flex: 1;
        }

        .search-item-actions {
            display: flex;
            align-items: flex-start;
        }

        .search-item-actions .btn-modern {
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
        }

        .item-preview {
            width: 56px;
            height: 56px;
            object-fit: contain;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
            padding: 0.3rem;
            flex-shrink: 0;
        }

        .item-name {
            color: #fff;
            font-size: 1rem;
            display: block;
        }

        .item-picker-dropdown .item-name,
        .search-result-list .item-name {
            font-size: 0.92rem;
        }

        .item-submeta {
            color: #96a0b5;
            font-size: 0.78rem;
            line-height: 1.45;
            word-break: break-word;
        }

        .item-picker-dropdown .item-submeta,
        .search-result-list .item-submeta {
            font-size: 0.71rem;
            line-height: 1.35;
        }

        .custom-item-card {
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
        }

        .custom-item-header {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            align-items: center;
            flex-wrap: wrap;
            flex: 1;
            min-width: 0;
        }

        .custom-item-summary {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            align-items: center;
            flex-wrap: wrap;
        }

        .custom-item-summary-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0.75rem;
            flex-wrap: wrap;
            margin-left: auto;
        }

        .custom-item-stats-count {
            flex-shrink: 0;
        }

        .item-toggle-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
            padding: 0.6rem 0.9rem;
            border-radius: 999px;
            border: 1px solid rgba(162, 155, 120, 0.25);
            background: rgba(162, 155, 120, 0.08);
            color: #fff;
            font-family: 'Electrolize', sans-serif;
            cursor: pointer;
            transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
        }

        .item-toggle-btn:hover {
            background: rgba(162, 155, 120, 0.14);
            border-color: rgba(162, 155, 120, 0.45);
        }

        .item-toggle-btn:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px rgba(162, 155, 120, 0.18);
        }

        .item-toggle-label {
            color: var(--primary);
            font-size: 0.78rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            line-height: 1;
        }

        .item-toggle-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.95rem;
            line-height: 1;
            transition: transform 0.2s ease;
        }

        .item-toggle-btn[aria-expanded="true"] .item-toggle-icon {
            transform: rotate(180deg);
        }

        .custom-item-card {
            scroll-margin-top: 1.5rem;
        }

        .custom-item-card.is-open {
            border-color: rgba(162, 155, 120, 0.35);
            box-shadow: 0 0 0 1px rgba(162, 155, 120, 0.12);
        }

        .custom-item-body {
            display: grid;
            gap: 1.25rem;
        }

        .custom-item-body[hidden] {
            display: none !important;
        }

        .inline-form {
            display: grid;
            grid-template-columns: minmax(0, 1.4fr) 110px 120px auto;
            gap: 0.75rem;
            align-items: end;
        }

        .modern-table {
            width: 100%;
            border-collapse: collapse;
            min-width: 780px;
        }

        .modern-table th,
        .modern-table td {
            padding: 0.9rem 0.8rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            vertical-align: middle;
        }

        .modern-table th {
            color: var(--primary);
            text-transform: uppercase;
            font-size: 0.78rem;
            letter-spacing: 1px;
            text-align: left;
        }

        .modern-table tbody tr:hover {
            background: rgba(255, 255, 255, 0.025);
        }

        .empty-state {
            padding: 2rem;
            text-align: center;
            color: #7f8897;
        }

        .badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.35rem 0.65rem;
            border-radius: 999px;
            border: 1px solid rgba(162, 155, 120, 0.25);
            background: rgba(162, 155, 120, 0.08);
            color: var(--primary);
            font-size: 0.78rem;
            white-space: nowrap;
        }

        .preview-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.45rem 0.75rem;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.08);
            color: #fff;
            font-size: 0.85rem;
            min-width: 90px;
        }

        .actions-row {
            display: flex;
            gap: 0.4rem;
            justify-content: flex-end;
            flex-wrap: wrap;
        }

        .muted {
            color: #96a0b5;
        }

        .count-note {
            color: #96a0b5;
            font-size: 0.85rem;
            margin-top: -0.3rem;
            margin-bottom: 1rem;
        }

        .list-filter-bar {
            display: flex;
            gap: 0.75rem;
            align-items: center;
            flex-wrap: wrap;
            margin-bottom: 1rem;
        }

        .list-filter-input {
            flex: 1;
            min-width: 240px;
        }

        .list-filter-meta {
            color: #96a0b5;
            font-size: 0.8rem;
        }

        .hidden-by-filter {
            display: none !important;
        }

        @media (max-width: 1200px) {
            .admin-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 900px) {
            .admin-layout {
                padding: 1rem;
            }

            .admin-topbar {
                padding: 1rem 1.2rem;
                flex-direction: column;
                align-items: flex-start;
            }

            .inline-form {
                grid-template-columns: 1fr;
            }

            .search-item-main,
            .item-meta {
                align-items: stretch;
            }

            .search-item-actions {
                width: 100%;
            }

            .search-item-actions .btn-modern {
                width: 100%;
                justify-content: center;
            }

            .item-picker-selection {
                flex-direction: column;
                align-items: stretch;
            }

            .item-picker-actions {
                flex-direction: column;
            }

            .item-picker-actions .btn-modern {
                width: 100%;
                justify-content: center;
            }

            .actions-row {
                justify-content: stretch;
            }

            .custom-item-summary {
                align-items: stretch;
            }

            .custom-item-summary-actions {
                width: 100%;
                justify-content: space-between;
            }

            .item-toggle-btn {
                flex: 1;
                justify-content: center;
            }
        }
    </style>
</head>
<body>
    <?php echo auth_render_page_access_widget('scitemcustom.php', 'OBJETS PERSONNALISES'); ?>
    <div class="admin-layout">
        <header class="admin-topbar">
            <div class="topbar-info">
                <h1>OBJETS PERSONNALISES</h1>
                <p>Associer des objets à autant de bonus / malus de stats que nécessaire</p>
            </div>
            <div class="topbar-actions">
                <span class="session-user">Connecté : <strong><?php echo htmlspecialchars($current_session_user, ENT_QUOTES, 'UTF-8'); ?></strong></span>
                <a href="index.php" class="btn-modern">Retour au site</a>
                <a href="logout.php" class="btn-modern danger">Déconnexion</a>
            </div>
        </header>

        <?php echo auth_render_app_nav('scitemcustom.php'); ?>

        <?php if ($flash_message !== ''): ?>
            <div class="flash <?php echo htmlspecialchars($flash_type, ENT_QUOTES, 'UTF-8'); ?>">
                <?php echo htmlspecialchars($flash_message, ENT_QUOTES, 'UTF-8'); ?>
            </div>
        <?php endif; ?>

        <div class="admin-grid">
            <aside class="stack">
                <section class="glass-card item-picker-card">
                    <h2>Ajouter un objet</h2>
                    <p class="count-note">Choisis un objet depuis la base, puis attribue-lui autant de stats que nécessaire.</p>

                    <form method="post" action="scitemcustom.php" id="item-add-form" class="item-picker-form" autocomplete="off">
                        <input type="hidden" name="csrf_token" value="<?php echo htmlspecialchars($csrf_token, ENT_QUOTES, 'UTF-8'); ?>">
                        <input type="hidden" name="action" value="add_custom_item">
                        <input type="hidden" name="obj_id" id="item-add-selected-id" value="">

                        <div class="item-picker-wrap">
                            <input
                                type="search"
                                id="item-add-search"
                                class="form-control item-picker-input"
                                placeholder="Rechercher un objet à ajouter..."
                                aria-label="Rechercher un objet à ajouter"
                                aria-autocomplete="list"
                                aria-expanded="false"
                                aria-controls="item-add-suggestions"
                                spellcheck="false"
                            >
                            <div class="item-picker-dropdown hidden-by-filter" id="item-add-suggestions" role="listbox" aria-label="Suggestions d'objets"></div>
                        </div>

                        <div class="form-help" id="item-add-help">Commence à taper le nom d'un objet. La liste se déclenche à partir de 3 caractères saisis et affiche tous les objets correspondants.</div>

                        <div class="item-picker-selection hidden-by-filter" id="item-add-selection" aria-live="polite">
                            <div class="item-picker-selection-main">
                                <img src="" class="item-preview hidden-by-filter" id="item-add-selection-image" alt="">
                                <div class="search-item-content">
                                    <strong class="item-name" id="item-add-selection-name"></strong>
                                    <div class="item-submeta" id="item-add-selection-meta"></div>
                                </div>
                            </div>
                            <button type="button" class="btn-modern danger" id="item-add-clear">Effacer</button>
                        </div>

                        <div class="item-picker-actions">
                            <button type="submit" class="btn-modern" id="item-add-submit" disabled>Ajouter</button>
                            <button type="button" class="btn-modern danger" id="item-add-reset">Vider la recherche</button>
                        </div>
                    </form>

                    <noscript>
                        <div class="form-help" style="margin-top:1rem; margin-bottom:0.75rem;">JavaScript est désactivé : utilise la recherche classique ci-dessous.</div>
                        <form method="get" action="scitemcustom.php" style="display:flex; gap:0.75rem; flex-wrap:wrap;">
                            <input type="text" name="search" class="form-control" value="<?php echo htmlspecialchars($search, ENT_QUOTES, 'UTF-8'); ?>" placeholder="Rechercher un objet..." style="flex:1; min-width:220px;">
                            <button type="submit" class="btn-modern">Rechercher</button>
                            <a href="scitemcustom.php" class="btn-modern danger">Reset</a>
                        </form>
                    </noscript>

                    <?php if ($search !== ''): ?>
                        <div class="form-help" style="margin-top:1rem; margin-bottom:1rem;">Résultats de la recherche classique pour l'ajout dans la liste Item Custom.</div>
                        <div class="search-result-list">
                            <?php if (empty($search_results)): ?>
                                <div class="search-item">
                                    <div class="item-submeta">Aucun objet disponible pour cette recherche.</div>
                                </div>
                            <?php else: ?>
                                <?php foreach ($search_results as $result): ?>
                                    <div class="search-item">
                                        <div class="search-item-main">
                                            <div class="item-meta">
                                                <img src="https://cstone.space/uifimages/<?php echo htmlspecialchars($result['cl_scobjs_uuid'], ENT_QUOTES, 'UTF-8'); ?>.png" class="item-preview" alt="">
                                                <div class="search-item-content">
                                                    <strong class="item-name"><?php echo htmlspecialchars($result['cl_scobjs_name'], ENT_QUOTES, 'UTF-8'); ?></strong>
                                                    <div class="item-submeta">
                                                        <?php echo htmlspecialchars($result['cl_scobjs_type'], ENT_QUOTES, 'UTF-8'); ?>
                                                        <?php if (!empty($result['cl_scobjs_subtype'])): ?> / <?php echo htmlspecialchars($result['cl_scobjs_subtype'], ENT_QUOTES, 'UTF-8'); ?><?php endif; ?>
                                                    </div>
                                                    <form method="post" class="search-item-actions">
                                                        <input type="hidden" name="csrf_token" value="<?php echo htmlspecialchars($csrf_token, ENT_QUOTES, 'UTF-8'); ?>">
                                                        <input type="hidden" name="action" value="add_custom_item">
                                                        <input type="hidden" name="obj_id" value="<?php echo (int) $result['cl_scobjs_id']; ?>">
                                                        <button type="submit" class="btn-modern">Ajouter</button>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                <?php endforeach; ?>
                            <?php endif; ?>
                        </div>
                    <?php endif; ?>
                </section>

                <section class="glass-card">
                    <h2>Rappel</h2>
                    <div class="form-help">
                        <strong class="muted">Fonctionnement :</strong><br>
                        1. Ajoute un objet à la liste.<br>
                        2. Sélectionne une stat créée dans <em>Stats Item</em>.<br>
                        3. Choisis le signe <strong>+</strong> ou <strong>-</strong>.<br>
                        4. Saisis la valeur. L'unité s'applique automatiquement selon la stat choisie.
                    </div>
                    <div class="form-help" style="margin-top:1rem;">
                        Exemple : <strong>Puissance</strong> + <strong>10</strong> avec l'unité <strong>%</strong> donnera automatiquement <strong>+10%</strong>.
                    </div>
                </section>
            </aside>

            <main class="stack">
                <section class="glass-card">
                    <h2>Liste Item Custom</h2>
                    <p class="count-note"><?php echo count($custom_items); ?> objet(s) configuré(s) dans cette liste personnalisée.</p>

                    <?php if (empty($custom_items)): ?>
                        <div class="empty-state">Aucun objet Item Custom enregistré pour le moment.</div>
                    <?php else: ?>
                        <div class="list-filter-bar">
                            <input
                                type="text"
                                id="item-custom-filter"
                                class="form-control list-filter-input"
                                placeholder="Filtrer les objets déjà ajoutés par nom, type, sous-type ou UUID..."
                                autocomplete="off"
                            >
                            <button type="button" id="item-custom-filter-reset" class="btn-modern danger">Effacer</button>
                            <div class="list-filter-meta">
                                Affichage : <span id="item-custom-visible-count"><?php echo count($custom_items); ?></span> / <?php echo count($custom_items); ?>
                            </div>
                        </div>
                        <div class="form-help" style="margin-top:-0.25rem; margin-bottom:1rem;">Tape quelques lettres pour retrouver rapidement un objet déjà présent dans ta liste Item Custom.</div>
                        <div id="item-custom-no-results" class="empty-state hidden-by-filter">Aucun objet Item Custom ne correspond à cette recherche.</div>
                        <div class="item-card-list" id="item-custom-list">
                            <?php foreach ($custom_items as $item): ?>
                                <?php $item_id = (int) $item['cl_scitemcustom_id']; ?>
                                <?php $item_stats = $custom_stats_by_item[$item_id] ?? []; ?>
                                <?php $item_stats_count = count($item_stats); ?>
                                <?php $item_search_text = trim(implode(' ', array_filter([
                                    (string) ($item['cl_scobjs_name'] ?? ''),
                                    (string) ($item['cl_scobjs_type'] ?? ''),
                                    (string) ($item['cl_scobjs_subtype'] ?? ''),
                                    (string) ($item['cl_scobjs_uuid'] ?? ''),
                                ]))); ?>
                                <section class="custom-item-card" id="itemcustom-<?php echo $item_id; ?>" data-item-search="<?php echo htmlspecialchars($item_search_text, ENT_QUOTES, 'UTF-8'); ?>">
                                    <div class="custom-item-summary">
                                        <div class="custom-item-header">
                                            <div class="item-meta">
                                                <img src="https://cstone.space/uifimages/<?php echo htmlspecialchars($item['cl_scobjs_uuid'], ENT_QUOTES, 'UTF-8'); ?>.png" class="item-preview" alt="">
                                                <div>
                                                    <strong class="item-name"><?php echo htmlspecialchars($item['cl_scobjs_name'], ENT_QUOTES, 'UTF-8'); ?></strong>
                                                    <div class="item-submeta">
                                                        <?php echo htmlspecialchars($item['cl_scobjs_type'], ENT_QUOTES, 'UTF-8'); ?>
                                                        <?php if (!empty($item['cl_scobjs_subtype'])): ?> / <?php echo htmlspecialchars($item['cl_scobjs_subtype'], ENT_QUOTES, 'UTF-8'); ?><?php endif; ?><br>
                                                        UUID: <?php echo htmlspecialchars($item['cl_scobjs_uuid'], ENT_QUOTES, 'UTF-8'); ?>
                                                    </div>
                                                </div>
                                            </div>
                                            <span class="badge custom-item-stats-count"><?php echo $item_stats_count; ?> stat<?php echo $item_stats_count > 1 ? 's' : ''; ?></span>
                                        </div>
                                        <div class="custom-item-summary-actions">
                                            <button
                                                type="button"
                                                class="item-toggle-btn"
                                                aria-expanded="false"
                                                aria-controls="itemcustom-panel-<?php echo $item_id; ?>"
                                                data-toggle-label-open="Replier"
                                                data-toggle-label-closed="Déplier"
                                            >
                                                <span class="item-toggle-label">Déplier</span>
                                                <span class="item-toggle-icon" aria-hidden="true">▾</span>
                                            </button>
                                            <form method="post" onsubmit="return confirm('Supprimer cet objet Item Custom et toutes ses stats ?');">
                                                <input type="hidden" name="csrf_token" value="<?php echo htmlspecialchars($csrf_token, ENT_QUOTES, 'UTF-8'); ?>">
                                                <input type="hidden" name="action" value="delete_custom_item">
                                                <input type="hidden" name="itemcustom_id" value="<?php echo $item_id; ?>">
                                                <button type="submit" class="btn-modern danger">Supprimer l'objet</button>
                                            </form>
                                        </div>
                                    </div>

                                    <div class="custom-item-body" id="itemcustom-panel-<?php echo $item_id; ?>" hidden>
                                        <div>
                                            <h3>Ajouter un bonus / malus</h3>
                                            <?php if (empty($stats_catalog)): ?>
                                                <div class="form-help">Aucune statistique disponible. Crée d'abord des entrées dans l'onglet <strong>Stats Item</strong>.</div>
                                            <?php else: ?>
                                                <form method="post" class="inline-form">
                                                    <input type="hidden" name="csrf_token" value="<?php echo htmlspecialchars($csrf_token, ENT_QUOTES, 'UTF-8'); ?>">
                                                    <input type="hidden" name="action" value="add_custom_stat">
                                                    <input type="hidden" name="itemcustom_id" value="<?php echo $item_id; ?>">

                                                    <div class="form-group" style="margin-bottom:0;">
                                                        <label>Statistique</label>
                                                        <select name="stat_id" class="form-control" required>
                                                            <?php foreach ($stats_catalog as $stat_option): ?>
                                                                <option value="<?php echo (int) $stat_option['cl_scstatsitem_id']; ?>">
                                                                    <?php echo htmlspecialchars($stat_option['cl_scstatsitem_name'], ENT_QUOTES, 'UTF-8'); ?> (<?php echo htmlspecialchars($stat_option['cl_scstatsitem_unit'], ENT_QUOTES, 'UTF-8'); ?>)
                                                                </option>
                                                            <?php endforeach; ?>
                                                        </select>
                                                    </div>

                                                    <div class="form-group" style="margin-bottom:0;">
                                                        <label>Signe</label>
                                                        <select name="sign" class="form-control">
                                                            <?php foreach ($allowed_signs as $sign_option): ?>
                                                                <option value="<?php echo htmlspecialchars($sign_option, ENT_QUOTES, 'UTF-8'); ?>" <?php echo $sign_option === '+' ? 'selected' : ''; ?>>
                                                                    <?php echo htmlspecialchars($sign_labels[$sign_option], ENT_QUOTES, 'UTF-8'); ?>
                                                                </option>
                                                            <?php endforeach; ?>
                                                        </select>
                                                    </div>

                                                    <div class="form-group" style="margin-bottom:0;">
                                                        <label>Valeur</label>
                                                        <input type="number" name="value" class="form-control" min="0" step="0.01" value="0" required>
                                                    </div>

                                                    <button type="submit" class="btn-modern">Ajouter la stat</button>
                                                </form>
                                            <?php endif; ?>
                                        </div>

                                        <div style="overflow-x:auto;">
                                            <table class="modern-table">
                                                <thead>
                                                    <tr>
                                                        <th>Statistique</th>
                                                        <th style="width:110px;">Signe</th>
                                                        <th style="width:140px;">Valeur</th>
                                                        <th style="width:120px;">Unité</th>
                                                        <th style="width:130px;">Aperçu</th>
                                                        <th style="text-align:right; width:220px;">Actions</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <?php if (empty($item_stats)): ?>
                                                        <tr>
                                                            <td colspan="6" class="empty-state">Aucune statistique configurée pour cet objet.</td>
                                                        </tr>
                                                    <?php else: ?>
                                                        <?php foreach ($item_stats as $item_stat): ?>
                                                            <tr>
                                                                <td>
                                                                    <form method="post">
                                                                        <input type="hidden" name="csrf_token" value="<?php echo htmlspecialchars($csrf_token, ENT_QUOTES, 'UTF-8'); ?>">
                                                                        <input type="hidden" name="action" value="update_custom_stat">
                                                                        <input type="hidden" name="itemcustom_id" value="<?php echo $item_id; ?>">
                                                                        <input type="hidden" name="custom_stat_id" value="<?php echo (int) $item_stat['cl_scitemcustomstat_id']; ?>">
                                                                        <select name="stat_id" class="form-control" required>
                                                                            <?php foreach ($stats_catalog as $stat_option): ?>
                                                                                <option value="<?php echo (int) $stat_option['cl_scstatsitem_id']; ?>" <?php echo (int) $stat_option['cl_scstatsitem_id'] === (int) $item_stat['cl_scitemcustomstat_stat_id'] ? 'selected' : ''; ?>>
                                                                                    <?php echo htmlspecialchars($stat_option['cl_scstatsitem_name'], ENT_QUOTES, 'UTF-8'); ?> (<?php echo htmlspecialchars($stat_option['cl_scstatsitem_unit'], ENT_QUOTES, 'UTF-8'); ?>)
                                                                                </option>
                                                                            <?php endforeach; ?>
                                                                        </select>
                                                                </td>
                                                                <td>
                                                                        <select name="sign" class="form-control">
                                                                            <?php foreach ($allowed_signs as $sign_option): ?>
                                                                                <option value="<?php echo htmlspecialchars($sign_option, ENT_QUOTES, 'UTF-8'); ?>" <?php echo $sign_option === $item_stat['cl_scitemcustomstat_sign'] ? 'selected' : ''; ?>>
                                                                                    <?php echo htmlspecialchars($sign_labels[$sign_option], ENT_QUOTES, 'UTF-8'); ?>
                                                                                </option>
                                                                            <?php endforeach; ?>
                                                                        </select>
                                                                </td>
                                                                <td>
                                                                        <input type="number" name="value" class="form-control" min="0" step="0.01" value="<?php echo htmlspecialchars(scitemcustom_display_value($item_stat['cl_scitemcustomstat_value']), ENT_QUOTES, 'UTF-8'); ?>" required>
                                                                </td>
                                                                <td>
                                                                    <span class="badge"><?php echo htmlspecialchars($item_stat['cl_scstatsitem_unit'], ENT_QUOTES, 'UTF-8'); ?></span>
                                                                </td>
                                                                <td>
                                                                    <span class="preview-pill"><?php echo htmlspecialchars(scitemcustom_preview($item_stat['cl_scitemcustomstat_sign'], $item_stat['cl_scitemcustomstat_value'], $item_stat['cl_scstatsitem_unit']), ENT_QUOTES, 'UTF-8'); ?></span>
                                                                </td>
                                                                <td style="text-align:right;">
                                                                    <div class="actions-row">
                                                                        <button type="submit" class="btn-modern btn-mini">Save</button>
                                                                    </form>
                                                                    <form method="post" onsubmit="return confirm('Supprimer cette statistique ?');">
                                                                        <input type="hidden" name="csrf_token" value="<?php echo htmlspecialchars($csrf_token, ENT_QUOTES, 'UTF-8'); ?>">
                                                                        <input type="hidden" name="action" value="delete_custom_stat">
                                                                        <input type="hidden" name="itemcustom_id" value="<?php echo $item_id; ?>">
                                                                        <input type="hidden" name="custom_stat_id" value="<?php echo (int) $item_stat['cl_scitemcustomstat_id']; ?>">
                                                                        <button type="submit" class="btn-modern btn-mini danger">X</button>
                                                                    </form>
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                        <?php endforeach; ?>
                                                    <?php endif; ?>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </section>
                            <?php endforeach; ?>
                        </div>
                    <?php endif; ?>
                </section>
            </main>
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var filterInput = document.getElementById('item-custom-filter');
            var resetButton = document.getElementById('item-custom-filter-reset');
            var visibleCount = document.getElementById('item-custom-visible-count');
            var emptyState = document.getElementById('item-custom-no-results');
            var itemCards = Array.prototype.slice.call(document.querySelectorAll('#item-custom-list .custom-item-card'));

            var addForm = document.getElementById('item-add-form');
            var addSearchInput = document.getElementById('item-add-search');
            var addSelectedIdInput = document.getElementById('item-add-selected-id');
            var addDropdown = document.getElementById('item-add-suggestions');
            var addSelection = document.getElementById('item-add-selection');
            var addSelectionImage = document.getElementById('item-add-selection-image');
            var addSelectionName = document.getElementById('item-add-selection-name');
            var addSelectionMeta = document.getElementById('item-add-selection-meta');
            var addSubmit = document.getElementById('item-add-submit');
            var addReset = document.getElementById('item-add-reset');
            var addClear = document.getElementById('item-add-clear');
            var pickerRequestTimer = null;
            var pickerRequestToken = 0;
            var selectedItem = null;

            function normalizeValue(value) {
                return (value || '')
                    .toString()
                    .toLowerCase()
                    .normalize('NFD')
                    .replace(/[̀-ͯ]/g, '')
                    .trim();
            }

            function escapeHtml(value) {
                return (value || '')
                    .toString()
                    .replace(/&/g, '&amp;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                    .replace(/"/g, '&quot;')
                    .replace(/'/g, '&#039;');
            }

            function setPickerExpanded(isExpanded) {
                if (addSearchInput) {
                    addSearchInput.setAttribute('aria-expanded', isExpanded ? 'true' : 'false');
                }
            }

            function hidePickerDropdown() {
                if (!addDropdown) {
                    return;
                }

                addDropdown.innerHTML = '';
                addDropdown.classList.add('hidden-by-filter');
                setPickerExpanded(false);
            }

            function showPickerDropdown() {
                if (!addDropdown) {
                    return;
                }

                addDropdown.classList.remove('hidden-by-filter');
                setPickerExpanded(true);
            }

            function updateSelectedItem(item) {
                selectedItem = item || null;

                if (!addSelectedIdInput || !addSubmit || !addSelection || !addSelectionName || !addSelectionMeta || !addSelectionImage) {
                    return;
                }

                if (!selectedItem) {
                    addSelectedIdInput.value = '';
                    addSubmit.disabled = true;
                    addSelection.classList.add('hidden-by-filter');
                    addSelectionName.textContent = '';
                    addSelectionMeta.textContent = '';
                    addSelectionImage.classList.add('hidden-by-filter');
                    addSelectionImage.setAttribute('src', '');
                    addSelectionImage.setAttribute('alt', '');
                    return;
                }

                addSelectedIdInput.value = String(selectedItem.id || '');
                addSubmit.disabled = !addSelectedIdInput.value;
                addSelection.classList.remove('hidden-by-filter');
                addSelectionName.textContent = selectedItem.name || '';

                var meta = selectedItem.type || '';
                if (selectedItem.subtype) {
                    meta += (meta ? ' / ' : '') + selectedItem.subtype;
                }
                if (selectedItem.uuid) {
                    meta += (meta ? ' — ' : '') + selectedItem.uuid;
                }
                addSelectionMeta.textContent = meta;

                if (selectedItem.uuid) {
                    addSelectionImage.classList.remove('hidden-by-filter');
                    addSelectionImage.setAttribute('src', 'https://cstone.space/uifimages/' + encodeURIComponent(selectedItem.uuid) + '.png');
                    addSelectionImage.setAttribute('alt', selectedItem.name || 'Objet sélectionné');
                } else {
                    addSelectionImage.classList.add('hidden-by-filter');
                    addSelectionImage.setAttribute('src', '');
                    addSelectionImage.setAttribute('alt', '');
                }
            }

            function renderPickerItems(items, query) {
                if (!addDropdown) {
                    return;
                }

                if (!Array.isArray(items) || items.length === 0) {
                    addDropdown.innerHTML = '\n                        <div class="item-picker-option item-picker-option-empty" role="option" aria-disabled="true">\n                            <div class="search-item-content">\n                                <strong class="item-name">Aucun objet trouvé</strong>\n                                <div class="item-submeta">Aucun objet disponible pour “' + escapeHtml(query) + '”.</div>\n                            </div>\n                        </div>';
                    showPickerDropdown();
                    return;
                }

                addDropdown.innerHTML = items.map(function (item, index) {
                    var meta = escapeHtml(item.type || '');
                    if (item.subtype) {
                        meta += (meta ? ' / ' : '') + escapeHtml(item.subtype);
                    }

                    return '' +
                        '<button type="button" class="item-picker-option' + (index === 0 ? ' is-active' : '') + '" role="option" data-item-id="' + escapeHtml(item.id) + '" data-item-name="' + escapeHtml(item.name) + '" data-item-type="' + escapeHtml(item.type || '') + '" data-item-subtype="' + escapeHtml(item.subtype || '') + '" data-item-uuid="' + escapeHtml(item.uuid || '') + '">' +
                            '<div class="search-item-content">' +
                                '<strong class="item-name">' + escapeHtml(item.name || '') + '</strong>' +
                                '<div class="item-submeta">' + meta + '</div>' +
                            '</div>' +
                        '</button>';
                }).join('');

                showPickerDropdown();
            }

            function fetchPickerSuggestions(query) {
                if (!addDropdown) {
                    return;
                }

                var trimmedQuery = (query || '').trim();
                if (trimmedQuery.length < 3) {
                    hidePickerDropdown();
                    return;
                }

                var requestToken = ++pickerRequestToken;
                addDropdown.innerHTML = '\n                    <div class="item-picker-option item-picker-option-empty" role="option" aria-disabled="true">\n                        <div class="search-item-content">\n                            <strong class="item-name">Recherche en cours...</strong>\n                            <div class="item-submeta">Chargement des objets disponibles.</div>\n                        </div>\n                    </div>';
                showPickerDropdown();

                fetch('scitemcustom.php?ajax=item_suggestions&q=' + encodeURIComponent(trimmedQuery), {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    credentials: 'same-origin'
                })
                    .then(function (response) {
                        if (!response.ok) {
                            throw new Error('HTTP ' + response.status);
                        }
                        return response.json();
                    })
                    .then(function (payload) {
                        if (requestToken !== pickerRequestToken) {
                            return;
                        }

                        renderPickerItems(payload && Array.isArray(payload.items) ? payload.items : [], trimmedQuery);
                    })
                    .catch(function () {
                        if (requestToken !== pickerRequestToken) {
                            return;
                        }

                        addDropdown.innerHTML = '\n                            <div class="item-picker-option item-picker-option-empty" role="option" aria-disabled="true">\n                                <div class="search-item-content">\n                                    <strong class="item-name">Recherche indisponible</strong>\n                                    <div class="item-submeta">Impossible de charger les suggestions pour le moment.</div>\n                                </div>\n                            </div>';
                        showPickerDropdown();
                    });
            }

            function clearSelection(options) {
                var settings = options || {};
                updateSelectedItem(null);
                if (!settings.keepInput && addSearchInput) {
                    addSearchInput.value = '';
                }
            }

            if (addForm && addSearchInput && addSelectedIdInput && addDropdown && addSelection && addSubmit && addReset && addClear) {
                addSearchInput.addEventListener('input', function () {
                    clearSelection({ keepInput: true });

                    var query = addSearchInput.value || '';
                    window.clearTimeout(pickerRequestTimer);
                    pickerRequestTimer = window.setTimeout(function () {
                        fetchPickerSuggestions(query);
                    }, 120);
                });

                addSearchInput.addEventListener('focus', function () {
                    if ((addSearchInput.value || '').trim() !== '' && addDropdown.innerHTML.trim() !== '') {
                        showPickerDropdown();
                    }
                });

                addSearchInput.addEventListener('keydown', function (event) {
                    if (event.key === 'Escape') {
                        hidePickerDropdown();
                    }
                });

                addDropdown.addEventListener('click', function (event) {
                    var option = event.target.closest('.item-picker-option[data-item-id]');
                    if (!option) {
                        return;
                    }

                    var item = {
                        id: option.getAttribute('data-item-id') || '',
                        name: option.getAttribute('data-item-name') || '',
                        type: option.getAttribute('data-item-type') || '',
                        subtype: option.getAttribute('data-item-subtype') || '',
                        uuid: option.getAttribute('data-item-uuid') || ''
                    };

                    addSearchInput.value = item.name || '';
                    updateSelectedItem(item);
                    hidePickerDropdown();
                });

                document.addEventListener('click', function (event) {
                    if (!event.target.closest('#item-add-form')) {
                        hidePickerDropdown();
                    }
                });

                addReset.addEventListener('click', function () {
                    window.clearTimeout(pickerRequestTimer);
                    pickerRequestToken += 1;
                    clearSelection();
                    hidePickerDropdown();
                    addSearchInput.focus();
                });

                addClear.addEventListener('click', function () {
                    clearSelection();
                    hidePickerDropdown();
                    addSearchInput.focus();
                });

                addForm.addEventListener('submit', function (event) {
                    if (!addSelectedIdInput.value) {
                        event.preventDefault();
                        addSearchInput.focus();
                    }
                });
            }

            function setCardState(card, isOpen) {
                var body = card.querySelector('.custom-item-body');
                var toggleButton = card.querySelector('.item-toggle-btn');
                var toggleLabel = toggleButton ? toggleButton.querySelector('.item-toggle-label') : null;
                if (!body || !toggleButton) {
                    return;
                }

                card.classList.toggle('is-open', isOpen);
                body.hidden = !isOpen;
                toggleButton.setAttribute('aria-expanded', isOpen ? 'true' : 'false');

                if (toggleLabel) {
                    toggleLabel.textContent = isOpen
                        ? (toggleButton.getAttribute('data-toggle-label-open') || 'Replier')
                        : (toggleButton.getAttribute('data-toggle-label-closed') || 'Déplier');
                }
            }

            function closeAllCards() {
                itemCards.forEach(function (card) {
                    setCardState(card, false);
                });
            }

            function getCurrentUrlWithoutHash() {
                return window.location.pathname + window.location.search;
            }

            function openCard(card, options) {
                var settings = options || {};
                itemCards.forEach(function (otherCard) {
                    setCardState(otherCard, otherCard === card);
                });

                if (settings.syncHash !== false) {
                    window.history.replaceState(null, '', '#' + card.id);
                }

                if (settings.scrollIntoView) {
                    card.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }
            }

            function closeCard(card, options) {
                var settings = options || {};
                setCardState(card, false);

                if (settings.syncHash !== false && window.location.hash === '#' + card.id) {
                    window.history.replaceState(null, '', getCurrentUrlWithoutHash());
                }
            }

            function syncFromHash() {
                var hash = window.location.hash || '';
                if (hash.indexOf('#itemcustom-') !== 0) {
                    closeAllCards();
                    return;
                }

                var targetCard = document.querySelector(hash + '.custom-item-card');
                if (!targetCard) {
                    closeAllCards();
                    return;
                }

                openCard(targetCard, { syncHash: false });
            }

            itemCards.forEach(function (card) {
                var toggleButton = card.querySelector('.item-toggle-btn');
                if (!toggleButton) {
                    return;
                }

                setCardState(card, false);
                toggleButton.addEventListener('click', function () {
                    var isOpen = toggleButton.getAttribute('aria-expanded') === 'true';
                    if (isOpen) {
                        closeCard(card);
                    } else {
                        openCard(card, { scrollIntoView: true });
                    }
                });
            });

            if (itemCards.length > 0) {
                syncFromHash();
                window.addEventListener('hashchange', syncFromHash);
            }

            if (!filterInput || !resetButton || !visibleCount || !emptyState || itemCards.length === 0) {
                return;
            }

            function applyFilter() {
                var query = normalizeValue(filterInput.value);
                var matches = 0;

                itemCards.forEach(function (card) {
                    var searchable = normalizeValue(card.getAttribute('data-item-search'));
                    var isMatch = query === '' || searchable.indexOf(query) !== -1;
                    card.classList.toggle('hidden-by-filter', !isMatch);
                    if (isMatch) {
                        matches += 1;
                    }
                });

                visibleCount.textContent = String(matches);
                emptyState.classList.toggle('hidden-by-filter', matches !== 0);
            }

            filterInput.addEventListener('input', applyFilter);
            resetButton.addEventListener('click', function () {
                filterInput.value = '';
                filterInput.focus();
                applyFilter();
            });
        });
    </script>
</body>
</html>