"use client";

import React, { useEffect } from "react";
import { useRouter } from "next/navigation";
import Header1 from "@/components/layout/Header1";
import Footer1 from "@/components/layout/Footer1";
import InnerBanner from "@/components/common/InnerBanner";
import { BlogType } from "@/types";
import PageHeader from "@/components/common/PageHeader";

interface BlogDetailsClientProps {
    blog: BlogType | undefined;
}

export default function BlogDetailsClient({ blog }: BlogDetailsClientProps) {
    const router = useRouter();

    useEffect(() => {
        if (typeof window !== "undefined" && (window as any).initMetatron) {
            (window as any).initMetatron();
        }
    }, [blog]);

    if (!blog) {
        return (
            <>
                <Header1 />
                <div className="section-space text-center">
                    <div className="container">
                        <h2>Blog Not Found</h2>
                        <button onClick={() => router.back()} className="primary-btn-1 mt-20">
                            Go Back
                        </button>
                    </div>
                </div>
                <Footer1 />
            </>
        );
    }

    return (
        <>
            <Header1 />
            <main>
                <PageHeader title="Blog Details" />

                <section className="blog-details-area section-space">
                    <div className="container">
                        <div className="row justify-content-center">
                            <div className="col-lg-10">
                                <div className="blog-details-content">
                                    <div className="blog-details-img mb-40">
                                        <img src={blog.image} alt={blog.title} className="w-100" />
                                    </div>

                                    <div className="blog-meta mb-30">
                                        <span><i className="fa-solid fa-user"></i> By Admin</span>
                                        <span><i className="fa-solid fa-calendar-days"></i> {blog.date}</span>
                                        <span><i className="fa-solid fa-tag"></i> {blog.category}</span>
                                    </div>

                                    <h2 className="details-title mb-30">{blog.title}</h2>

                                    <div className="details-text mb-40">
                                        <p>{blog.details}</p>
                                    </div>

                                    {blog.blockquote && (
                                        <blockquote className="blog-blockquote mb-40">
                                            <div className="quote-icon">
                                                <i className="fa-solid fa-quote-right"></i>
                                            </div>
                                            <p>{blog.blockquote}</p>
                                        </blockquote>
                                    )}

                                    <div className="details-text mb-60">
                                        <p>{blog.description}</p>
                                    </div>

                                    <div className="back-btn-wrapper pt-40 border-top">
                                        <button onClick={() => router.back()} className="primary-btn-5 btn-hover">
                                            <i className="fa-solid fa-arrow-left"></i> &nbsp; Back to Previous Page
                                            <span className="btn-hover-span"></span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </main>
            <Footer1 />

            <style jsx>{`
                .blog-details-img img {
                    height: 500px;
                    object-fit: cover;
                    border-radius: 24px;
                    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
                }
                .blog-meta {
                    display: flex;
                    gap: 30px;
                    font-size: 16px;
                    color: #64748b;
                    font-weight: 600;
                }
                .blog-meta i {
                    color: #3779b9;
                    margin-right: 8px;
                }
                .details-title {
                    font-size: 42px;
                    font-weight: 800;
                    color: #0f172a;
                    line-height: 1.2;
                }
                .details-text p {
                    font-size: 18px;
                    line-height: 1.8;
                    color: #475569;
                }
                .blog-blockquote {
                    background: #f8fbff;
                    padding: 40px 60px;
                    border-left: 5px solid #3779b9;
                    border-radius: 0 24px 24px 0;
                    position: relative;
                }
                .quote-icon {
                    position: absolute;
                    top: 20px;
                    left: 20px;
                    font-size: 40px;
                    color: rgba(55, 121, 185, 0.1);
                }
                .blog-blockquote p {
                    font-size: 22px;
                    font-style: italic;
                    font-weight: 700;
                    color: #1e293b;
                    line-height: 1.5;
                    margin: 0;
                }
                .border-top {
                    border-top: 1px solid #e2e8f0;
                }
                @media (max-width: 991px) {
                    .details-title { font-size: 32px; }
                    .blog-details-img img { height: 400px; }
                    .blog-blockquote { padding: 30px 40px; }
                }
                @media (max-width: 767px) {
                    .blog-meta { flex-direction: column; gap: 10px; }
                    .blog-details-img img { height: 300px; }
                }
            `}</style>
        </>
    );
}