"use client";

import { useState } from "react";
import Link from "next/link";
import { PhoneIcon } from "@/components/icons";
import type { WpPost } from "@/lib/wordpress";
import type { HomeContent } from "@/lib/content";
import Image from "@/components/Image";

function formatDate(iso: string): string {
  return new Date(iso).toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" });
}

interface Props {
  posts: WpPost[];
  totalPages: number;
  perPage: number;
  content: HomeContent;
}

export default function BlogContent({ posts, totalPages, perPage, content }: Props) {
  const [page, setPage] = useState(1);

  if (posts.length === 0) {
    return (
      <div className="glass-card" style={{ marginTop: 52, textAlign: "center", padding: "64px 40px", color: "#4a4f54" }}>
        <p style={{ fontSize: 17, margin: 0 }}>
          Posts will appear here once the WordPress backend is connected.
        </p>
        <p style={{ fontSize: 14, margin: "10px 0 0", color: "#63686d" }}>
          Set <code>WORDPRESS_URL</code> in <code>.env.local</code> to publish from WordPress. In the meantime:
        </p>
        <a
          href={content.hero.phoneHref}
          style={{
            display: "inline-flex", alignItems: "center", gap: 8,
            marginTop: 18, fontWeight: 700, color: "#006568",
          }}
        >
          <PhoneIcon size={15} /> {content.hero.phoneDisplay}
        </a>
      </div>
    );
  }

  const start = (page - 1) * perPage;
  const visible = posts.slice(start, start + perPage);

  return (
    <>
      <div className="grid-3" style={{ marginTop: 52 }}>
        {visible.map((post) => (
          <article key={post.id} className="glass-card card-lift" style={{ padding: 0, overflow: "hidden" }}>
            <Link href={`/blog/${post.slug}`} style={{ display: "block", textDecoration: "none" }}>
              {post.image ? (
                /* eslint-disable-next-line @next/next/no-img-element */
                <Image
                  src={post.image}
                  alt=""
                  style={{ width: "100%", height: 190, objectFit: "cover", display: "block" }}
                />
              ) : (
                <div style={{ height: 190, background: "linear-gradient(150deg,#13a3a6,#006568)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <Image src="/img/logo.webp" alt="" style={{ height: 34, filter: "brightness(0) invert(1)", opacity: 0.85 }} />
                </div>
              )}
              <div style={{ padding: "24px 26px 28px" }}>
                <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: ".08em", color: "#7e6516", textTransform: "uppercase" }}>
                  {formatDate(post.date)}
                </div>
                <h2 style={{ fontWeight: 900, fontSize: 20, lineHeight: 1.25, letterSpacing: "-.01em", margin: "10px 0 0", color: "#182233" }}>
                  {post.title}
                </h2>
                <p style={{ fontSize: 14, lineHeight: 1.6, color: "#515a63", margin: "10px 0 0" }}>
                  {post.excerpt.length > 160 ? `${post.excerpt.slice(0, 160)}…` : post.excerpt}
                </p>
                <span style={{ display: "inline-block", marginTop: 14, fontWeight: 700, fontSize: 14, color: "#006568", borderBottom: "2px solid #c9a62f", paddingBottom: 2 }}>
                  Read more
                </span>
                    </div>
                  </Link>
          </article>
        ))}
      </div>

      {totalPages > 1 && (
        <div style={{ marginTop: 48, display: "flex", justifyContent: "center", gap: 8 }}>
          {page > 1 && (
            <button
              onClick={() => setPage(page - 1)}
              style={{
                display: "inline-flex", alignItems: "center", gap: 6,
                padding: "10px 18px", borderRadius: 8,
                background: "rgba(255,255,255,.7)", border: "1px solid rgba(0,101,104,.2)",
                fontWeight: 600, fontSize: 14, color: "#006568", cursor: "pointer",
              }}
            >
              ← Prev
            </button>
          )}
          {Array.from({ length: totalPages }, (_, i) => {
            const n = i + 1;
            const isCurrent = n === page;
            return (
              <button
                key={n}
                onClick={() => setPage(n)}
                style={{
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  width: 40, height: 40, borderRadius: 8,
                  background: isCurrent ? "#006568" : "rgba(255,255,255,.7)",
                  color: isCurrent ? "#fff" : "#006568",
                  border: isCurrent ? "none" : "1px solid rgba(0,101,104,.2)",
                  fontWeight: 700, fontSize: 14, cursor: "pointer",
                }}
              >
                {n}
              </button>
            );
          })}
          {page < totalPages && (
            <button
              onClick={() => setPage(page + 1)}
              style={{
                display: "inline-flex", alignItems: "center", gap: 6,
                padding: "10px 18px", borderRadius: 8,
                background: "rgba(255,255,255,.7)", border: "1px solid rgba(0,101,104,.2)",
                fontWeight: 600, fontSize: 14, color: "#006568", cursor: "pointer",
              }}
            >
              Next →
            </button>
          )}
        </div>
      )}

      <div style={{ marginTop: 48 }}>
        <Link href="/" style={{ fontWeight: 700, fontSize: 15, color: "#006568" }}>
          ← Back to home
        </Link>
      </div>
    </>
  );
}