"use client";

import { motion } from "framer-motion";
import { Navbar } from "@/components/home/Navbar";
import { Footer } from "@/components/home/Footer";
import { Clock, User, Calendar, ArrowLeft, Tag } from "lucide-react";
import Link from "next/link";
import type { Post } from "@/lib/types";

interface Props {
  post: Post;
}

export function BlogPostContent({ post }: Props) {
  function formatDate(dateStr: string | null) {
    if (!dateStr) return "";
    return new Date(dateStr).toLocaleDateString("en-US", {
      month: "long",
      day: "numeric",
      year: "numeric",
    });
  }

  return (
    <div className="flex flex-1 flex-col">
      <Navbar />

      {/* Hero Header */}
      <section className="relative pt-32 pb-16 lg:pt-40 lg:pb-24 bg-obsidian-900">
        <div className="absolute inset-0 overflow-hidden">
          {post.featured_image && (
            <img
              src={post.featured_image}
              alt={post.featured_image_alt || post.title}
              className="h-full w-full object-cover opacity-20"
            />
          )}
          <div className="absolute inset-0 bg-gradient-to-t from-obsidian-900 via-obsidian-900/80 to-obsidian-900/60" />
        </div>

        <div className="relative mx-auto max-w-4xl px-6 lg:px-8">
          <Link
            href="/blog"
            className="inline-flex items-center gap-2 text-xs text-white/50 uppercase tracking-wider hover:text-primary transition-colors mb-8"
          >
            <ArrowLeft size={14} />
            Back to Blog
          </Link>

          {/* Category & Meta */}
          <div className="flex flex-wrap items-center gap-4 text-xs text-white/50 mb-6">
            {post.category && (
              <span className="bg-primary/20 text-primary px-3 py-1 font-semibold uppercase tracking-wider">
                {post.category.name}
              </span>
            )}
            <div className="flex items-center gap-1.5">
              <Calendar size={12} />
              <span>{formatDate(post.published_at)}</span>
            </div>
            <div className="flex items-center gap-1.5">
              <Clock size={12} />
              <span>{post.reading_time_minutes} min read</span>
            </div>
          </div>

          <motion.h1
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            className="font-display text-3xl sm:text-4xl lg:text-5xl font-bold text-white leading-tight"
          >
            {post.title}
          </motion.h1>

          {post.excerpt && (
            <p className="mt-6 text-lg text-white/60 leading-relaxed max-w-3xl">
              {post.excerpt}
            </p>
          )}

          {/* Author */}
          <div className="flex items-center gap-4 mt-8 pt-8 border-t border-white/10">
            {post.author?.avatar ? (
              <img
                src={post.author.avatar}
                alt={post.author.name}
                className="w-12 h-12 rounded-full object-cover"
              />
            ) : (
              <div className="w-12 h-12 bg-white/10 rounded-full flex items-center justify-center">
                <User size={20} className="text-white/50" />
              </div>
            )}
            <div>
              <p className="text-white font-semibold">{post.author?.name}</p>
              <p className="text-white/40 text-sm">Author</p>
            </div>
          </div>
        </div>
      </section>

      {/* Article Content */}
      <section className="py-16 lg:py-24 bg-white">
        <div className="mx-auto max-w-4xl px-6 lg:px-8">
          {/* Featured Image */}
          {post.featured_image && (
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.2 }}
              className="mb-12 -mt-20 relative z-10"
            >
              <img
                src={post.featured_image}
                alt={post.featured_image_alt || post.title}
                className="w-full aspect-[16/9] object-cover shadow-2xl"
              />
            </motion.div>
          )}

          {/* Body */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.3 }}
            className="prose prose-lg max-w-none prose-headings:font-display prose-headings:text-obsidian-700 prose-p:text-obsidian-500 prose-a:text-primary prose-strong:text-obsidian-700 prose-img:rounded-none"
            dangerouslySetInnerHTML={{ __html: post.body || post.content || "" }}
          />

          {/* Tags */}
          {post.tags && post.tags.length > 0 && (
            <div className="mt-12 pt-8 border-t border-obsidian-100">
              <div className="flex items-center gap-2 flex-wrap">
                <Tag size={14} className="text-obsidian-400" />
                {post.tags.map((tag) => (
                  <Link
                    key={tag.id}
                    href={`/blog?tag=${tag.slug}`}
                    className="px-3 py-1 text-xs font-medium bg-obsidian-50 text-obsidian-500 hover:bg-primary hover:text-white transition-colors"
                  >
                    {tag.name}
                  </Link>
                ))}
              </div>
            </div>
          )}
        </div>
      </section>

      <Footer />
    </div>
  );
}