import Link from 'next/link';
import { headers } from 'next/headers';
import { notFound } from 'next/navigation';
import { ArrowRight } from 'lucide-react';
import CVHeader from '@/components/layout/CVHeader';
import CVFooter from '@/components/layout/CVFooter';
import {
  fullName,
  getImpactStoryBySlug,
  getRelatedImpactStories,
  storyExcerpt,
  storyImage,
  storyInitial,
  text,
} from '@/lib/impactStories';
import { getContentMetadataForRequest, getRequestMetadataInput } from '@/lib/siteSeo';

export async function generateMetadata({ params }) {
  const { slug } = await params;
  const story = await getImpactStoryBySlug(slug);
  if (!story) return {};

  const name = fullName(story);
  const title = text(story.heading, `${name}'s Cambridge Veritas Impact Story`);
  const description = storyExcerpt(story.short_description);

  return getContentMetadataForRequest({
    ...getRequestMetadataInput(await headers(), {
      pathname: `/veritas-impact/${slug}`,
    }),
    title: `${title} | Cambridge Veritas`,
    description,
    image: storyImage(story),
    imageAlt: name,
    type: 'article',
    publishedTime: story.created_at
      ? new Date(story.created_at).toISOString()
      : undefined,
    section: 'Student Success Stories',
  });
}

function RelatedStoryCard({ story }) {
  const name = fullName(story);
  const role = text(story.role, 'Learner');
  const image = storyImage(story);

  return (
    <article className="h-full overflow-hidden rounded-2xl border border-[#E6D3B1] bg-white shadow-sm transition hover:border-[#D4AF37] hover:shadow-lg">
      <Link href={`/veritas-impact/${story.slug}`} className="flex h-full flex-col focus:outline-none focus:ring-2 focus:ring-[#D4AF37] focus:ring-offset-2">
        <div className="relative aspect-[4/3] overflow-hidden bg-[#F6EFE9]">
          {image ? (
            // eslint-disable-next-line @next/next/no-img-element
            <img className="absolute inset-0 h-full w-full object-cover" src={image} alt={name} />
          ) : (
            <div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-[#4A141E] to-[#8B1C1C] text-5xl font-black text-white">
              {storyInitial(name)}
            </div>
          )}
          <div className="absolute left-4 top-4 rounded-full bg-white/95 px-3 py-1 text-xs font-black uppercase tracking-wide text-[#8B1C1C] shadow-sm">
            {role}
          </div>
        </div>
        <div className="flex flex-1 flex-col p-5">
          <h3 className="text-xl font-black leading-tight text-[#4A141E]">{name}</h3>
          <p className="mt-3 line-clamp-4 flex-1 text-sm leading-relaxed text-[#4A141E]/65">
            {storyExcerpt(story.short_description)}
          </p>
          <div className="mt-5 flex items-center justify-between border-t border-[#E6D3B1]/60 pt-4">
            <span className="text-sm font-black text-[#8B1C1C]">Read story</span>
            <ArrowRight className="h-4 w-4 text-[#8B1C1C]" />
          </div>
        </div>
      </Link>
    </article>
  );
}

export default async function VeritasImpactStoryPage({ params }) {
  const { slug } = await params;
  const story = await getImpactStoryBySlug(slug);

  if (!story) notFound();

  const name = fullName(story);
  const heading = text(story.heading, `${name}'s Cambridge Veritas Impact Story`);
  const role = text(story.role, 'Learner');
  const shortDescription = text(
    story.short_description,
    'Discover this Cambridge Veritas learner journey and the progress made beyond the classroom.',
  );
  const image = storyImage(story);
  const relatedStories = await getRelatedImpactStories(story.id);

  return (
    <div className="min-h-screen bg-[#FDFAF7] text-[#4A141E]">
      <CVHeader />

      <main className="max-w-[100vw] overflow-x-hidden">
        <header className="border-b-4 border-[#D4AF37] bg-gradient-to-r from-[#4A141E] via-[#3B0F18] to-[#4A141E]">
          <div className="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8 lg:py-12">
            <div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_360px] lg:items-end">
              <div className="max-w-4xl">
                <div className="inline-flex items-center gap-2 rounded-full border border-[#D4AF37]/35 bg-[#D4AF37]/8 px-4 py-2 text-xs font-black uppercase tracking-[0.18em] text-[#E6D3B1]">
                  <span className="h-2 w-2 rounded-full bg-[#D4AF37]" />
                  Veritas Impact Stories
                </div>
                <h1 className="mt-5 text-3xl font-black leading-tight text-white sm:text-4xl lg:text-5xl">{heading}</h1>
                <p className="mt-5 max-w-3xl text-base leading-relaxed text-[#E6D3B1]/80 sm:text-lg">{shortDescription}</p>
              </div>

              <aside className="rounded-2xl border border-[#D4AF37]/35 bg-white/10 p-5 shadow-xl backdrop-blur">
                <p className="text-xs font-black uppercase tracking-[0.18em] text-[#D4AF37]">Story profile</p>
                <div className="mt-4 flex items-center gap-3">
                  {image ? (
                    // eslint-disable-next-line @next/next/no-img-element
                    <img className="h-16 w-16 rounded-2xl object-cover ring-2 ring-[#D4AF37]/40" src={image} alt={name} />
                  ) : (
                    <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-[#D4AF37] text-xl font-black text-[#3B0F18]">
                      {storyInitial(name)}
                    </div>
                  )}
                  <div className="min-w-0">
                    <div className="flex flex-wrap items-center gap-2">
                      <p className="font-black leading-tight text-white">{name}</p>
                      {story.linkedin ? (
                        <a href={story.linkedin} target="_blank" rel="noopener noreferrer" className="text-sm font-black text-[#D4AF37] underline-offset-4 hover:underline">
                          LinkedIn
                        </a>
                      ) : null}
                    </div>
                    <p className="text-sm italic text-[#E6D3B1]/65">{role}</p>
                  </div>
                </div>
                <div className="mt-5 grid gap-3">
                  <Link href="/veritas-impact" className="inline-flex items-center justify-center rounded-2xl border border-[#D4AF37]/50 bg-white/10 px-6 py-4 text-sm font-black text-[#E6D3B1] transition hover:bg-white/15">
                    All impact stories
                  </Link>
                  <a href="https://forms.gle/31BP1m3TPMSQwRUe9" target="_blank" rel="noopener noreferrer" className="inline-flex items-center justify-center rounded-2xl bg-[#D4AF37] px-6 py-4 text-sm font-black text-[#3B0F18] shadow-lg transition hover:bg-[#E6D3B1]">
                    Share your story
                  </a>
                </div>
              </aside>
            </div>
          </div>
        </header>

        <section className="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
          <div className="grid gap-8 lg:grid-cols-[1fr_360px]">
            <article className="rounded-2xl border border-[#E6D3B1] bg-white p-6 shadow-sm sm:p-8">
              <p className="text-xs font-black uppercase tracking-[0.22em] text-[#8B1C1C]">Learner journey</p>
              <h2 className="mt-3 text-2xl font-black text-[#4A141E] sm:text-3xl">The story</h2>
              <div
                className="prose prose-sm mt-6 max-w-none text-[#4A141E]/70 prose-headings:text-[#4A141E] prose-headings:font-black prose-p:leading-8"
                dangerouslySetInnerHTML={{ __html: story.description1 || '' }}
              />

              {story.user_comment1 ? (
                <blockquote
                  className="my-8 rounded-2xl border-l-4 border-[#D4AF37] bg-[#FDFAF7] px-6 py-5 text-lg font-bold leading-8 text-[#4A141E]"
                  dangerouslySetInnerHTML={{ __html: story.user_comment1 }}
                />
              ) : null}

              {story.description2 ? (
                <div
                  className="prose prose-sm mt-6 max-w-none text-[#4A141E]/70 prose-headings:text-[#4A141E] prose-headings:font-black prose-p:leading-8"
                  dangerouslySetInnerHTML={{ __html: story.description2 }}
                />
              ) : null}
            </article>

            <aside className="h-fit rounded-2xl border border-[#E6D3B1] bg-white p-6 shadow-sm">
              <div className="aspect-[4/3] w-full rounded-2xl bg-gradient-to-br from-[#4A141E] to-[#8B1C1C]" />
              <h2 className="mt-5 text-xl font-black text-[#4A141E]">Share your Cambridge Veritas Impact story</h2>
              <p className="mt-3 text-sm leading-relaxed text-[#4A141E]/65">Complete a quick survey, and we will get in touch with you soon.</p>
              <a href="https://forms.gle/31BP1m3TPMSQwRUe9" target="_blank" rel="noopener noreferrer" className="mt-5 inline-flex w-full items-center justify-center rounded-2xl bg-[#4A141E] px-6 py-4 text-sm font-black text-white transition hover:bg-[#8B1C1C]">
                Share your story
              </a>
            </aside>
          </div>
        </section>

        {relatedStories.length > 0 ? (
          <section className="border-t border-[#E6D3B1]/60 bg-white">
            <div className="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
              <div className="mb-8 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
                <div>
                  <p className="text-xs font-black uppercase tracking-[0.22em] text-[#8B1C1C]">Recommended case studies</p>
                  <h2 className="mt-3 text-2xl font-black text-[#4A141E] sm:text-3xl">Related impact stories</h2>
                </div>
                <Link href="/veritas-impact" className="inline-flex items-center gap-2 text-sm font-black text-[#8B1C1C] transition hover:text-[#4A141E]">
                  Show all
                  <ArrowRight className="h-4 w-4" />
                </Link>
              </div>

              <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
                {relatedStories.map((related) => (
                  <RelatedStoryCard key={related.slug} story={related} />
                ))}
              </div>
            </div>
          </section>
        ) : null}
      </main>

      <CVFooter />
    </div>
  );
}