import { AlertTriangle } from 'lucide-react';

import { Head, Link } from '@inertiajs/react';

import { Logo, TextLogo } from '@/Components/branding/Logo';
import { ThemeToggle } from '@/Components/theme';
import { Alert, AlertDescription, AlertTitle } from '@/Components/ui/alert';
import { Button } from '@/Components/ui/button';

interface Props {
  message: string;
  owner_email?: string | null;
}

export default function Expired({ message, owner_email }: Props) {
  return (
    <>
      <Head title="Expired Shared Report" />

      <div className="min-h-screen bg-background">
        {/* Header */}
        <header className="border-b bg-card">
          <div className="container mx-auto px-4 py-4 flex items-center justify-between">
            <div className="flex items-center gap-3">
              <Logo className="h-8 w-8" />
              <TextLogo className="font-bold text-lg" />
            </div>
            <ThemeToggle />
          </div>
        </header>

        {/* Content */}
        <main className="container mx-auto px-4 py-16 max-w-2xl">
          <div className="flex flex-col items-center justify-center space-y-6">
            <Alert variant="destructive" className="w-full">
              <AlertTriangle className="h-4 w-4" />
              <AlertTitle>Report Link Expired</AlertTitle>
              <AlertDescription>{message}</AlertDescription>
            </Alert>

            <div className="text-center space-y-4">
              <p className="text-muted-foreground">
                Contact the person who shared this report to request an updated link.
              </p>
              <div className="flex flex-col sm:flex-row gap-3 justify-center">
                {owner_email && (
                  <Button asChild variant="default">
                    <a href={`mailto:${owner_email}?subject=Shared%20Report%20Link%20Expired&body=Hi%2C%20the%20shared%20report%20link%20you%20sent%20me%20has%20expired.%20Could%20you%20please%20share%20an%20updated%20link%3F`}>
                      Email Report Owner
                    </a>
                  </Button>
                )}
                <Button asChild variant={owner_email ? 'outline' : 'default'}>
                  <Link href="/">Go to RankWiz AI Homepage</Link>
                </Button>
              </div>
            </div>
          </div>
        </main>

        {/* Footer */}
        <footer className="border-t bg-card mt-12">
          <div className="container mx-auto px-4 py-8 text-center">
            <p className="text-xs text-muted-foreground">
              Powered by{' '}
              <Link href="/" className="font-semibold text-foreground hover:underline">
                RankWiz AI
              </Link>
            </p>
          </div>
        </footer>
      </div>
    </>
  );
}
