"use client";

import Link from "next/link";
import Image from "next/image";
import { ChevronRight, ArrowUpRight, ArrowLeft, Mail } from "lucide-react";
import { Container } from "@/components/container";
import { AuthorProfile } from "@/lib/authors-data";

export function AuthorDetailView({ author }: { author: AuthorProfile }) {
  const hasArticles = (author.blogs ?? []).length > 0;

  return (
    <div className="min-h-screen bg-background text-foreground selection:bg-primary selection:text-primary-foreground pb-32">
      <Container className="page-top-space">
        {/* Breadcrumb Navigation */}
        <nav aria-label="Breadcrumb" className="mb-10 flex items-center gap-2 text-xs font-medium text-muted-foreground">
          <Link href="/" className="hover:text-foreground transition-colors">Home</Link>
          <ChevronRight className="h-3 w-3 text-muted-foreground/60 shrink-0" />
          <Link href="/author" className="hover:text-foreground transition-colors">Authors</Link>
          <ChevronRight className="h-3 w-3 text-muted-foreground/60 shrink-0" />
          <span className="font-semibold text-foreground">{author.name}</span>
        </nav>

        {/* Profile Header (2-Column Layout) */}
        <div className="grid grid-cols-1 gap-10 md:grid-cols-12 items-start">
          {/* Left: Portrait Card */}
          <div className="md:col-span-4">
            <div className="relative aspect-[4/5] w-full max-w-sm overflow-hidden rounded-3xl bg-muted shadow-md">
              <Image
                src={author.image}
                alt={author.name}
                fill
                unoptimized={author.image.endsWith(".svg")}
                className="object-cover object-top"
                sizes="(max-width: 768px) 100vw, 33vw"
                priority
              />
            </div>
          </div>

          {/* Right: Bio, Contact, & Social */}
          <div className="md:col-span-8 flex flex-col justify-center">
            <h1 className="text-4xl font-extrabold tracking-tight text-foreground sm:text-5xl">
              {author.name}
            </h1>
            <p className="mt-2 text-lg sm:text-xl font-medium text-muted-foreground">
              {author.role}
            </p>

            {/* Short introduction */}
            {author.shortBio && (
              <p className="mt-4 max-w-2xl text-base leading-relaxed text-foreground/90">
                {author.shortBio}
              </p>
            )}

            {/* Email & Contact */}
            {author.email && (
              <div className="mt-3 flex items-center gap-2 text-sm text-muted-foreground">
                <Mail className="h-4 w-4 text-muted-foreground/70" />
                <a
                  href={`mailto:${author.email}`}
                  className="font-medium text-foreground hover:underline transition-colors"
                >
                  {author.email}
                </a>
              </div>
            )}

            {/* Social Link Button — LinkedIn */}
            {author.socialLink && (
              <div className="mt-5 flex items-center gap-3">
                <a
                  href={author.socialLink}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex items-center gap-2 rounded-xl border border-border bg-card px-4 py-2 text-xs font-semibold text-foreground shadow-2xs transition hover:bg-muted hover:border-foreground/30 hover:text-primary"
                  aria-label={`${author.name} LinkedIn Profile`}
                >
                  <svg className="h-4 w-4 fill-current text-[#0A66C2]" viewBox="0 0 24 24">
                    <path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.28 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.75M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z"/>
                  </svg>
                  <span>LinkedIn Profile</span>
                  <ArrowUpRight className="h-3 w-3 opacity-60" />
                </a>
              </div>
            )}

            {/* About Section — full biography (paragraphs split on blank lines) */}
            <div className="mt-8">
              <h2 className="text-lg font-bold tracking-tight text-foreground">About</h2>
              <div className="mt-2.5 max-w-2xl space-y-4">
                {author.about.split("\n\n").map((para, i) => (
                  <p key={i} className="text-base text-muted-foreground leading-relaxed font-normal">
                    {para}
                  </p>
                ))}
              </div>
            </div>

            {/* Education Section — only when a verified value exists */}
            {author.education && (
              <div className="mt-6">
                <h2 className="text-lg font-bold tracking-tight text-foreground">Education</h2>
                <ul className="mt-2 space-y-1 text-sm text-muted-foreground">
                  <li className="flex items-center gap-2">
                    <span className="h-1.5 w-1.5 rounded-full bg-foreground/40" />
                    <span>{author.education}</span>
                  </li>
                </ul>
              </div>
            )}
          </div>
        </div>

        {/* Blogs by Author Section */}
        <div className="mt-20 border-t border-border pt-14">
          <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between mb-8">
            <h2 className="text-2xl sm:text-3xl font-bold tracking-tight text-foreground">
              Articles by {author.name}
            </h2>
            <Link
              href="/author"
              className="inline-flex shrink-0 items-center gap-1.5 text-xs font-semibold text-muted-foreground hover:text-foreground transition"
            >
              <ArrowLeft className="h-3.5 w-3.5" />
              <span>All authors</span>
            </Link>
          </div>

          {hasArticles ? (
            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
              {(author.blogs ?? []).map((post) => (
                <Link
                  key={post.slug}
                  href={`/blog/${post.slug}`}
                  className="group flex flex-col justify-between rounded-2xl border border-border bg-card p-6 shadow-2xs transition hover:border-foreground/40 hover:shadow-md"
                >
                  <div>
                    <div className="flex items-center justify-between text-[11px] font-semibold text-muted-foreground">
                      <span className="text-foreground uppercase tracking-wide">{post.category}</span>
                      <span>{post.readTime}</span>
                    </div>
                    <h3 className="mt-3 text-lg font-bold text-foreground group-hover:text-primary transition-colors leading-snug">
                      {post.title}
                    </h3>
                  </div>
                  <div className="mt-6 flex items-center justify-between pt-4 border-t border-border text-xs text-muted-foreground">
                    <span>{post.date}</span>
                    <span className="flex items-center gap-1 font-semibold text-foreground group-hover:text-primary transition-colors">
                      Read article <ArrowUpRight className="h-3 w-3" />
                    </span>
                  </div>
                </Link>
              ))}
            </div>
          ) : (
            <div className="rounded-2xl border border-dashed border-border/80 bg-muted/20 p-8 text-center sm:p-12">
              <p className="text-base font-semibold text-foreground">No published articles yet.</p>
              <p className="mt-1.5 text-xs text-muted-foreground max-w-sm mx-auto">
                Articles authored by {author.name} will appear here once published.
              </p>
            </div>
          )}
        </div>
      </Container>
    </div>
  );
}