<script setup>
/*
 * MelissaHeroClock — bloco hero do MelissaLayout
 * ----------------------------------------------
 * Relogio gigante + botao cronometro + data por extenso + saudacao +
 * resumo do dia (com chips clicaveis que filtram a timeline).
 *
 * Componente de apresentacao puro:
 *   - Recebe valores derivados via props (hora, data, saudacao, resumo)
 *   - Emite eventos pra o pai agir (cronometro, toggle-filtro)
 *   - Sem state proprio, sem deps de session/store/API
 *
 * Props:
 *   - hora: String — formatada pelo pai (24h ou 12h)
 *   - dataExtenso: String — "segunda-feira, 7 de maio"
 *   - saudacao: String — "Bom dia" / "Boa tarde" / "Boa noite"
 *   - usuario: String — default "Dr. Leonardo"
 *   - resumoPartes: Array<{ tipo, text }> — [] = "agenda livre"
 *   - filtroTipo: String|null — destaca o chip ativo do resumo
 *
 * Emit:
 *   - cronometro — clique no botao do relogio
 *   - toggle-filtro(tipo) — clique num chip do resumo
 */
defineProps({
    hora: { type: String, required: true },
    dataExtenso: { type: String, required: true },
    saudacao: { type: String, required: true },
    usuario: { type: String, default: 'Dr. Leonardo' },
    resumoPartes: { type: Array, default: () => [] },
    filtroTipo: { type: String, default: null },
    // Quando true, cada bloco de texto (relogio, data, saudacao, resumo)
    // ganha um fundo solido translucido + borda + padding. Util pra quem
    // usa wallpapers com pouca transparencia onde o text-shadow nao basta.
    textBg: { type: Boolean, default: false }
});

const emit = defineEmits(['cronometro', 'toggle-filtro']);
</script>

<template>
    <header class="text-center text-white drop-shadow-lg select-none" :class="{ 'has-text-bg': textBg }">
        <div class="inline-flex items-center gap-6">
            <div class="clock-display"><span class="hero-text">{{ hora }}</span></div>
            <button
                class="crono-icon-btn w-12 h-12 rounded-xl grid place-items-center cursor-pointer shrink-0"
                title="Cronômetro de sessão"
                @click="emit('cronometro')"
            >
                <i class="pi pi-stopwatch text-xl text-white/85" />
            </button>
        </div>

        <div class="hero-line text-lg md:text-xl font-light tracking-wide text-white/90 mt-1 capitalize">
            <span class="hero-text">{{ dataExtenso }}</span>
        </div>

        <div class="hero-line text-2xl md:text-3xl font-light mt-6 text-white/95 tracking-tight">
            <span class="hero-text">{{ saudacao }}, <span class="font-normal">{{ usuario }}</span>.</span>
        </div>

        <div class="hero-line text-base md:text-lg font-light text-white/70 mt-2 tracking-wide">
            <span class="hero-text">
                <template v-if="resumoPartes.length === 0">
                    Sua agenda está livre hoje.
                </template>
                <template v-else>
                    Hoje há
                    <template v-for="(p, i) in resumoPartes" :key="p.tipo">
                        <button
                            type="button"
                            class="resumo-link"
                            :class="{ 'is-active': filtroTipo === p.tipo }"
                            @click="emit('toggle-filtro', p.tipo)"
                        >{{ p.text }}</button><span v-if="p.suffix" class="resumo-suffix">{{ p.suffix }}</span><span v-if="i < resumoPartes.length - 2">,&nbsp;</span><span v-else-if="i === resumoPartes.length - 2">&nbsp;e&nbsp;</span>
                    </template>.
                </template>
            </span>
        </div>
    </header>
</template>

<style scoped>
/* Relogio gigante — clamp() + tabular-nums pra evitar pulo de digitos.
   text-shadow forte pra legibilidade sobre wallpapers claros (light
   tem override em .win11-root global no pai que substitui cor + shadow). */
.clock-display {
    font-size: clamp(5rem, 12vw, 9rem);
    font-weight: 200;
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    color: white;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

/* Botao cronometro — size/layout sao Tailwind no template
   (w-12 h-12 rounded-xl grid place-items-center cursor-pointer shrink-0).
   Aqui ficam so as propriedades visuais com vars do tema + transicoes. */
.crono-icon-btn {
    background: var(--m-bg-soft-hover);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid var(--m-border-strong);
    transition: all 200ms ease;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}
.crono-icon-btn:hover {
    background: var(--m-border-strong);
    transform: scale(1.06);
}

/* Chip clicavel do resumo do dia ("3 sessoes", "1 reuniao", etc).
   border-bottom dashed indica click affordance; is-active vira solido +
   peso 500 quando o filtro daquele tipo esta on. */
.resumo-link {
    display: inline;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--m-text);
    cursor: pointer;
    border-bottom: 1px dashed var(--m-border-strong);
    transition: color 160ms ease, border-color 160ms ease;
}
.resumo-link:hover {
    color: white;
    border-bottom-color: var(--m-text-muted);
}
.resumo-link.is-active {
    color: white;
    font-weight: 500;
    border-bottom: 1px solid var(--m-text);
}

/* Sufixo "(1 foi cancelado, 2 foram remarcados)" — texto secundario,
   nao clicavel, com peso menor pra nao competir com o chip. */
.resumo-suffix {
    color: var(--m-text-muted, rgba(255, 255, 255, 0.6));
    font-size: 0.9em;
}

/* ─── Modo "fundo nos textos soltos" ──────────────────────────
   Toggle no painel Personalizar. Cada bloco de texto (.hero-text)
   ganha um fundo solido translucido + borda + padding pra ficar
   legivel sobre wallpapers com pouca transparencia. Cor flipa
   com light/dark via --m-hero-text-bg / --m-hero-text-border. */
.has-text-bg .hero-text {
    display: inline-block;
    background: var(--m-hero-text-bg, rgba(0, 0, 0, 0.6));
    border: 1px solid var(--m-hero-text-border, rgba(255, 255, 255, 0.12));
    border-radius: 12px;
    padding: 4px 14px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
/* Relogio: padding maior porque o texto e' gigante */
.has-text-bg .clock-display .hero-text {
    padding: 6px 22px;
    border-radius: 18px;
}
/* Linhas inferiores (data, saudacao, resumo) ganham margem extra
   pra o fundo nao colar visualmente no de cima. */
.has-text-bg .hero-line { margin-top: 12px; }
.has-text-bg .hero-line:first-of-type { margin-top: 8px; }
</style>
