<template>
    <section class="container py-4">
        <div class="card border-0 shadow-none p-0">
            <div class="card-body p-0">
                <h1 class="h1 text-primary mb-3">🗞️ Hey Collin!</h1>
                <p class="h5 mb-4">Catch up on the latest:</p>
                <!-- Equal height layout -->
                <div class="row gx-3 gy-4">
                    <div v-for="(article, index) in headlines" :key="index" class="col-md-6 d-flex">
                        <div class="card flex-fill d-flex flex-column shadow-sm p-3">
                            <!-- Image or fallback -->
                            <div class="mb-3" style="height: 160px;">
                                <img v-if="article.urlToImage" :src="article.urlToImage" alt="thumbnail" class="w-100 h-100 object-fit-cover rounded" />
                                <div v-else class="d-flex align-items-center justify-content-center bg-primary text-white rounded text-uppercase" style="width: 100%; height: 100%; font-size: 2rem;">
                                    {{ article.title.charAt(0) }}
                                </div>
                            </div>
                            <!-- Content -->
                            <div class="flex-grow-1 d-flex flex-column">
                                <h5 class="fw-semibold mb-1 text-dark">
                                    {{ article.title }}
                                </h5>
                                <p class="text-muted small mb-2">
                                    {{ article.source?.name }} • {{ formatDate(article.publishedAt) }}
                                </p>
                                <p class="small text-secondary flex-grow-1">
                                    {{ article.description || "No summary available." }}
                                </p>
                                <div class="mt-auto">
                                    <a :href="article.url" target="_blank" rel="noopener noreferrer" class="btn btn-sm btn-outline-primary w-100">
                                        Read more →
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Additional Cards -->
                <div class="card mt-5 bg-white shadow-sm">
                    <div class="card-body">
                        <h2 class="h6 fw-semibold mb-3">📈 Market Snapshot</h2>
                        <p>{{ marketSnapshot }}</p>
                    </div>
                </div>
                <div class="card mt-4 bg-white shadow-sm">
                    <div class="card-body">
                        <h2 class="h6 fw-semibold mb-3">💬 Quick Insight</h2>
                        <p>{{ insight }}</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>
<script>
export default {
    name: "MiddayNewsView",
    data() {
        return {
            headlines: [],
            marketSnapshot: "NASDAQ up 1.3%, S&P steady, Bitcoin rises to $68,000.",
            insight: "",
        };
    },
    methods: {
        formatDate(dateStr) {
            return new Date(dateStr).toLocaleDateString(undefined, {
                weekday: "short",
                year: "numeric",
                month: "short",
                day: "numeric",
            });
        },
    },
    mounted() {
        fetch("https://192.168.70.11:8000/news/relevant")
            .then((res) => res.json())
            .then((data) => {
                this.headlines = data.data;
            })
            .catch(console.error);

        fetch("https://192.168.70.11:8000/insight/daily")
            .then((res) => res.json())
            .then((data) => {
                this.insight = data.data;
            })
            .catch(console.error);
    },
};
</script>
<style scoped>
.text-primary {
    color: #6b46c1 !important;
}

.object-fit-cover {
    object-fit: cover;
}
</style>