import type { Metadata } from "next";
import type { Route } from "next";
import { ArrowUpRight, ExternalLink, Share2 } from "lucide-react";

import { AppShell } from "@/components/shared/app-shell";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { SITE_NAME, SITE_TITLE, getAbsoluteUrl } from "@/lib/site-config";

const SHARE_ROUTE = "/share/twitter" as Route;
const SHARE_URL = getAbsoluteUrl("/share/twitter");
const TWITTER_IMAGE_URL = getAbsoluteUrl("/share/twitter/twitter-image");
const OG_IMAGE_URL = getAbsoluteUrl("/share/twitter/opengraph-image");
const SHARE_DESCRIPTION =
  "Share video.haus on X/Twitter with a premium, cinematic link card preview.";

export const metadata: Metadata = {
  title: "Twitter Share Card",
  description: SHARE_DESCRIPTION,
  alternates: {
    canonical: SHARE_ROUTE
  },
  openGraph: {
    type: "website",
    siteName: SITE_NAME,
    title: SITE_TITLE,
    description: SHARE_DESCRIPTION,
    url: SHARE_URL,
    images: [
      {
        url: OG_IMAGE_URL,
        width: 1200,
        height: 630,
        alt: "video.haus social preview card"
      }
    ]
  },
  twitter: {
    card: "summary_large_image",
    title: SITE_TITLE,
    description: SHARE_DESCRIPTION,
    images: [TWITTER_IMAGE_URL]
  }
};

export default function TwitterSharePage() {
  const tweetIntentUrl = `https://twitter.com/intent/tweet?url=${encodeURIComponent(SHARE_URL)}&text=${encodeURIComponent("video.haus — Fast video tools for creators.")}`;

  return (
    <AppShell>
      <div className="animate-fade-up mx-auto w-full max-w-5xl space-y-5 pb-10">
        <section className="glass-panel panel-elevated rounded-2xl border border-white/15 p-5 sm:p-6">
          <div className="flex flex-wrap items-start justify-between gap-4">
            <div className="space-y-3">
              <Badge className="border-sky-300/30 bg-sky-400/15 text-sky-100">
                <Share2 className="size-3.5" />
                Twitter Link Card
              </Badge>
              <div className="space-y-2">
                <h1 className="font-[var(--font-space-grotesk)] text-2xl font-semibold text-white sm:text-3xl">
                  Share-Ready Preview
                </h1>
                <p className="max-w-3xl text-sm leading-relaxed text-slate-300 sm:text-base">
                  This page is optimized to render a premium large-image preview card when shared on
                  X/Twitter.
                </p>
              </div>
            </div>
            <div className="flex flex-wrap gap-2">
              <Button
                variant="outline"
                className="border-white/20 bg-slate-900/60 text-slate-100 hover:bg-slate-800"
                render={
                  <a href={SHARE_URL} target="_blank" rel="noopener noreferrer">
                    <ExternalLink data-icon="inline-start" />
                    Open Share URL
                  </a>
                }
              />
              <Button
                className="bg-sky-300/90 text-slate-950 hover:bg-sky-200"
                render={
                  <a href={tweetIntentUrl} target="_blank" rel="noopener noreferrer">
                    <ArrowUpRight data-icon="inline-start" />
                    Post to X
                  </a>
                }
              />
            </div>
          </div>
        </section>

        <section className="glass-panel rounded-2xl border border-white/15 p-4 sm:p-5">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src="/share/twitter/twitter-image"
            alt="video.haus social card preview"
            className="w-full rounded-xl border border-white/10 bg-slate-950"
          />
          <p className="mt-3 text-xs text-slate-400 sm:text-sm">
            Share URL:{" "}
            <a
              href={SHARE_URL}
              target="_blank"
              rel="noopener noreferrer"
              className="text-sky-200 underline decoration-sky-200/40 underline-offset-2 transition hover:text-white hover:decoration-white/70"
            >
              {SHARE_URL}
            </a>
          </p>
        </section>
      </div>
    </AppShell>
  );
}
