"use client";
import Link from "next/link";
import type { BlogPost as BlogPostType } from "@/lib/blog";

export default function BlogPost({ post }: { post: BlogPostType }) {
  const formattedDate = new Date(post.publishedAt).toLocaleDateString("pl-PL", {
    year: "numeric",
    month: "long",
    day: "numeric",
  });

  const categoryLabel = post.category === "case-study" ? "Case Study" : "Blog";
  const categoryColor = post.category === "case-study" ? "bg-purple-500/10 text-purple-400" : "bg-cyan-500/10 text-cyan-400";

  return (
    <article className="relative min-h-screen py-20 px-4 pt-24 bg-gray-950">
      <div className="absolute inset-0 overflow-hidden">
        <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[600px] h-[600px] bg-cyan-500/5 rounded-full blur-3xl" />
      </div>

      <div className="relative z-10 max-w-4xl mx-auto">
        {/* Back Link */}
        <Link
          href="/blog/"
          className="inline-flex items-center gap-2 text-cyan-400 hover:text-cyan-300 mb-8 transition-colors"
        >
          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
          </svg>
          Wróć do bloga
        </Link>

        {/* Category & Date */}
        <div className="flex items-center gap-4 mb-6">
          <span className={`px-4 py-2 rounded-full text-sm font-medium ${categoryColor}`}>{categoryLabel}</span>
          <time className="text-gray-500" dateTime={post.publishedAt.toISOString()}>
            {formattedDate}
          </time>
        </div>

        {/* Title */}
        <h1 className="text-4xl md:text-6xl font-bold text-white mb-6 leading-tight">{post.title}</h1>

        {/* Author & Tags */}
        <div className="flex flex-wrap items-center gap-4 mb-8 pb-8 border-b border-gray-800">
          <p className="text-gray-400">
            Autor: <span className="text-white font-medium">{post.author}</span>
          </p>
          <div className="flex flex-wrap gap-2">
            {(Array.isArray(post.tags) ? post.tags : [post.tags]).map((tag) => (
              <span key={tag} className="text-sm text-gray-500">
                #{tag}
              </span>
            ))}
          </div>
        </div>

        {/* Cover Image */}
        {post.coverImage && (
          <div className="mb-10 rounded-2xl overflow-hidden">
            <img src={post.coverImage} alt={post.title} className="w-full h-auto object-cover" />
          </div>
        )}

        {/* Excerpt */}
        <div className="bg-cyan-500/5 border-l-4 border-cyan-500 p-6 mb-10 rounded-r-xl">
          <p className="text-gray-300 text-lg leading-relaxed">{post.excerpt}</p>
        </div>

        {/* Content */}
        <div
          className="blog-content"
          dangerouslySetInnerHTML={{ __html: post.content }}
        />

        <style jsx>{`
          .blog-content {
            color: #d1d5db;
            line-height: 1.8;
          }
          
          .blog-content :global(h2) {
            color: #22d3ee;
            font-size: 2rem;
            font-weight: 700;
            margin-top: 3rem;
            margin-bottom: 1.5rem;
          }
          
          .blog-content :global(h3) {
            color: white;
            font-size: 1.5rem;
            font-weight: 600;
            margin-top: 2rem;
            margin-bottom: 1rem;
          }
          
          .blog-content :global(p) {
            color: #d1d5db;
            margin-bottom: 1.5rem;
            line-height: 1.8;
          }
          
          .blog-content :global(strong) {
            color: white;
            font-weight: 600;
          }
          
          .blog-content :global(ul) {
            margin: 1.5rem 0;
            padding-left: 0;
            list-style: none;
          }
          
          .blog-content :global(ul li) {
            color: #d1d5db;
            margin-bottom: 0.75rem;
            padding-left: 2rem;
            position: relative;
          }
          
          .blog-content :global(ul li::before) {
            content: '';
            position: absolute;
            left: 0.5rem;
            top: 0.7rem;
            width: 0.5rem;
            height: 0.5rem;
            background: #22d3ee;
            border-radius: 50%;
          }
          
          .blog-content :global(ol) {
            margin: 1.5rem 0;
            padding-left: 0;
            list-style: none;
            counter-reset: item;
          }
          
          .blog-content :global(ol li) {
            color: #d1d5db;
            margin-bottom: 0.75rem;
            padding-left: 2rem;
            position: relative;
            counter-increment: item;
          }
          
          .blog-content :global(ol li::before) {
            content: counter(item) '.';
            position: absolute;
            left: 0;
            color: #22d3ee;
            font-weight: 700;
          }
          
          .blog-content :global(a) {
            color: #22d3ee;
            text-decoration: none;
          }
          
          .blog-content :global(a:hover) {
            text-decoration: underline;
          }
          
          .blog-content :global(code) {
            color: #22d3ee;
            background: #111827;
            padding: 0.25rem 0.5rem;
            border-radius: 0.25rem;
            font-size: 0.9em;
          }
          
          .blog-content :global(pre) {
            background: #111827;
            border: 1px solid #374151;
            border-radius: 0.75rem;
            padding: 1.5rem;
            overflow-x: auto;
            margin: 1.5rem 0;
          }
        `}</style>

        {/* CTA */}
        <div className="mt-16 p-8 bg-gray-800 border border-gray-700 rounded-2xl text-center">
          <h3 className="text-2xl font-bold text-white mb-4">Zainteresowany wdrożeniem AI w swojej firmie?</h3>
          <p className="text-gray-400 mb-6">
            Skontaktuj się z nami i poznaj możliwości automatyzacji biznesu z AI
          </p>
          <Link
            href="/#kontakt"
            className="inline-block bg-cyan-600 hover:bg-cyan-500 text-white font-semibold px-8 py-4 rounded-full transition-all"
          >
            Bezpłatna Konsultacja
          </Link>
        </div>
      </div>
    </article>
  );
}