import Link from 'next/link';
import { CheckCircle, CreditCard, Banknote, Truck, MessageCircle } from 'lucide-react';
import { getOrderByNumber } from '@/lib/db';
import { getSettings } from '@/lib/settings';
import { formatPrice } from '@/lib/utils';

export default async function ThankYouPage({
  searchParams,
}: {
  searchParams: { order?: string };
}) {
  const orderNumber = searchParams.order;
  const order = orderNumber ? await getOrderByNumber(orderNumber) : null;

  if (!order) {
    return (
      <div className="container mx-auto px-4 py-16 text-center">
        <h1 className="text-2xl font-bold">Order not found</h1>
        <p className="mt-2 text-muted-foreground">
          We could not find that order number.
        </p>
        <Link href="/products" className="mt-4 inline-block text-primary hover:underline">
          Continue shopping
        </Link>
      </div>
    );
  }

  const settings = await getSettings([
    'storeName',
    'storePhone',
    'whatsappNumber',
    'bankName',
    'bankAccount',
    'bankInstructions',
  ]);

  const statusMessages: Record<string, React.ReactNode> = {
    pending: 'Your order has been received and is pending payment/confirmation.',
    paid: 'Payment received. We are preparing your order.',
    processing: 'Your order is being processed.',
    shipped: 'Your order has been shipped.',
    delivered: 'Your order has been delivered.',
    cancelled: 'Your order was cancelled.',
  };

  const paymentInfo = () => {
    if (order.paymentMethod === 'mpesa') {
      return (
        <div className="flex items-start gap-3 rounded-lg bg-muted p-4">
          <CreditCard className="mt-0.5 h-5 w-5 text-muted-foreground" />
          <div>
            <p className="font-medium">M-Pesa payment</p>
            <p className="text-sm text-muted-foreground">
              {order.paymentStatus === 'paid'
                ? `Paid. Receipt: ${order.mpesaCode}`
                : 'Pending payment. Check your phone for the STK push and confirm.'}
            </p>
          </div>
        </div>
      );
    }

    if (order.paymentMethod === 'bank') {
      return (
        <div className="flex items-start gap-3 rounded-lg bg-muted p-4">
          <Banknote className="mt-0.5 h-5 w-5 text-muted-foreground" />
          <div>
            <p className="font-medium">Bank transfer</p>
            <p className="text-sm text-muted-foreground">
              Bank: {settings.bankName || 'Not configured'}
            </p>
            <p className="text-sm text-muted-foreground">
              Account: {settings.bankAccount || 'Not configured'}
            </p>
            <p className="text-sm text-muted-foreground">
              {settings.bankInstructions}
            </p>
          </div>
        </div>
      );
    }

    if (order.paymentMethod === 'cod') {
      return (
        <div className="flex items-start gap-3 rounded-lg bg-muted p-4">
          <Truck className="mt-0.5 h-5 w-5 text-muted-foreground" />
          <div>
            <p className="font-medium">Cash on delivery</p>
            <p className="text-sm text-muted-foreground">
              Have the exact amount ready when your order is delivered.
            </p>
          </div>
        </div>
      );
    }

    if (order.paymentMethod === 'whatsapp') {
      const waNumber = settings.whatsappNumber?.replace(/\D/g, '');
      const text = `Hello ${settings.storeName}, I placed order ${order.orderNumber}.`;
      return (
        <div className="flex items-start gap-3 rounded-lg bg-muted p-4">
          <MessageCircle className="mt-0.5 h-5 w-5 text-muted-foreground" />
          <div>
            <p className="font-medium">WhatsApp order</p>
            {waNumber ? (
              <a
                href={`https://wa.me/${waNumber}?text=${encodeURIComponent(text)}`}
                target="_blank"
                rel="noreferrer"
                className="text-sm text-primary hover:underline"
              >
                Continue conversation on WhatsApp
              </a>
            ) : (
              <p className="text-sm text-muted-foreground">
                WhatsApp number not configured yet.
              </p>
            )}
          </div>
        </div>
      );
    }

    return null;
  };

  return (
    <div className="container mx-auto max-w-3xl px-4 py-12">
      <div className="text-center">
        <CheckCircle className="mx-auto h-16 w-16 text-green-500" />
        <h1 className="mt-4 text-3xl font-bold">Thank you!</h1>
        <p className="mt-2 text-muted-foreground">
          {statusMessages[order.status] || 'Order placed successfully.'}
        </p>
        <p className="mt-1 text-sm text-muted-foreground">
          Order number: <span className="font-mono font-semibold">{order.orderNumber}</span>
        </p>
      </div>

      <div className="mt-8 space-y-4">
        {paymentInfo()}

        <div className="rounded-xl border bg-card p-6">
          <h2 className="text-lg font-semibold">Order items</h2>
          <div className="mt-4 space-y-2">
            {order.items.map((item) => (
              <div
                key={item.id}
                className="flex items-center justify-between border-b pb-2 text-sm last:border-0 last:pb-0"
              >
                <span>
                  {item.name} x {item.quantity}
                </span>
                <span className="font-medium">
                  {formatPrice(item.price * item.quantity)}
                </span>
              </div>
            ))}
          </div>
          <div className="mt-4 flex items-center justify-between border-t pt-4 text-lg font-bold">
            <span>Total</span>
            <span>{formatPrice(order.total)}</span>
          </div>
        </div>

        <div className="rounded-xl border bg-card p-6">
          <h2 className="text-lg font-semibold">Delivery details</h2>
          <p className="mt-2 text-sm text-muted-foreground">
            {order.customerName}
          </p>
          <p className="text-sm text-muted-foreground">{order.customerPhone}</p>
          {order.customerEmail && (
            <p className="text-sm text-muted-foreground">{order.customerEmail}</p>
          )}
          <p className="text-sm text-muted-foreground">{order.customerAddress}</p>
        </div>

        <div className="text-center">
          <p className="text-sm text-muted-foreground">
            Need help? Call {settings.storePhone}
          </p>
          <Link
            href="/products"
            className="mt-4 inline-block rounded-lg bg-primary px-6 py-3 font-medium text-primary-foreground"
          >
            Continue shopping
          </Link>
        </div>
      </div>
    </div>
  );
}