import AltivateLayout from '@/Layouts/AltivateLayout';
import { Link } from '@inertiajs/react';
import { CheckCircle2, Download, Home, Mail, Package } from "lucide-react";

interface Product {
    id: number;
    name: string;
}

interface OrderItem {
    id: number;
    product: Product;
}

interface Order {
    id: number;
    customer_email: string;
    total_amount: number;
    currency: string;
    items: OrderItem[];
}

interface Props {
    order: Order;
}

export default function StoreSuccess({ order }: Props) {
    return (
        <AltivateLayout 
            title="Purchase Successful"
            description="Your order has been processed successfully."
        >
            <div className="min-h-screen">
                <section className="container-x pt-32 pb-20 md:pt-40 md:pb-32">
                    <div className="mx-auto max-w-2xl text-center">
                        <div className="inline-flex h-20 w-20 items-center justify-center rounded-full bg-green-500/10 text-green-500">
                            <CheckCircle2 className="h-10 w-10" />
                        </div>
                        <h1 className="font-display mt-8 text-4xl md:text-5xl">Purchase Successful!</h1>
                        <p className="mt-6 text-lg text-muted-foreground">
                            Thank you for your purchase. Your order #<span className="font-medium text-foreground">{order.id}</span> has been processed.
                        </p>

                        <div className="mt-12 rounded-3xl border border-border bg-card p-8 text-left">
                            <h3 className="font-display text-xl">Order Summary</h3>
                            <div className="mt-6 space-y-4">
                                {order.items.map((item) => (
                                    <div key={item.id} className="flex items-center justify-between py-2">
                                        <div className="flex items-center gap-3">
                                            <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-secondary text-accent">
                                                <Package className="h-5 w-5" />
                                            </div>
                                            <span className="font-medium">{item.product.name}</span>
                                        </div>
                                        <span className="text-muted-foreground">{order.currency} {parseFloat(order.total_amount.toString()).toLocaleString()}</span>
                                    </div>
                                ))}
                            </div>
                            <div className="mt-6 border-t border-border pt-6 flex justify-between items-center">
                                <span className="font-display text-lg">Total Paid</span>
                                <span className="font-display text-2xl text-accent">{order.currency} {parseFloat(order.total_amount.toString()).toLocaleString()}</span>
                            </div>
                        </div>

                        <div className="mt-12 grid gap-4 sm:grid-cols-2">
                            <div className="rounded-2xl border border-border bg-secondary/20 p-6">
                                <Mail className="h-6 w-6 text-accent mb-4 mx-auto" />
                                <h4 className="font-medium">Check your email</h4>
                                <p className="mt-2 text-sm text-muted-foreground">
                                    We've sent a secure download link to <span className="font-medium text-foreground">{order.customer_email}</span>.
                                </p>
                            </div>
                            <div className="rounded-2xl border border-border bg-secondary/20 p-6">
                                <Download className="h-6 w-6 text-accent mb-4 mx-auto" />
                                <h4 className="font-medium">Instant Access</h4>
                                <p className="mt-2 text-sm text-muted-foreground">
                                    The link is valid for 7 days and supports up to 5 download attempts.
                                </p>
                            </div>
                        </div>

                        <div className="mt-12 flex flex-col items-center justify-center gap-4 sm:flex-row">
                            {order.items.some(item => (item.product as any).type === 'Course') ? (
                                <Link 
                                    href={route('learning.index')}
                                    className="inline-flex h-12 items-center gap-2 rounded-full bg-accent px-8 text-sm font-bold text-white transition-transform hover:-translate-y-0.5"
                                >
                                    Go to My Courses
                                </Link>
                            ) : (
                                <Link 
                                    href={route('store.index')}
                                    className="inline-flex h-12 items-center gap-2 rounded-full bg-primary px-8 text-sm font-medium text-primary-foreground transition-transform hover:-translate-y-0.5"
                                >
                                    Continue Shopping
                                </Link>
                            )}
                            <Link 
                                href="/"
                                className="inline-flex h-12 items-center gap-2 rounded-full border border-border bg-background px-8 text-sm font-medium transition-colors hover:bg-secondary"
                            >
                                <Home className="h-4 w-4" /> Go to Home
                            </Link>
                        </div>
                    </div>
                </section>
            </div>
        </AltivateLayout>
    );
}