'use client';

import { useEffect, useState } from 'react';
import { useParams, useRouter } from 'next/navigation';
import Link from 'next/link';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Skeleton } from '@/components/ui/skeleton';
import { formatCurrency, formatDateTime } from '@/lib/utils';
import { getErrorMessage } from '@/lib/errors';
import { ordersService, type Order, getOrderStatusText } from '@/services/orders.service';
import { ArrowLeft, AlertCircle, Clock, CheckCircle2, XCircle } from 'lucide-react';

const STATUS_VARIANT: Record<string, 'success' | 'warning' | 'danger' | 'default'> = {
  OPEN: 'warning',
  PARTIALLY_MATCHED: 'warning',
  MATCHED: 'success',
  PAYMENT_PENDING: 'warning',
  PAYMENT_SUBMITTED: 'warning',
  PAYMENT_CONFIRMED: 'success',
  MINIMUM_PENDING: 'warning',
  READY_FOR_SETTLEMENT: 'success',
  COMPLETED: 'success',
  CANCELLED: 'danger',
  EXPIRED: 'danger',
  DISPUTED: 'danger',
  REJECTED: 'danger',
};

const STATUS_ICON: Record<string, any> = {
  OPEN: Clock,
  COMPLETED: CheckCircle2,
  CANCELLED: XCircle,
  EXPIRED: XCircle,
  DISPUTED: AlertCircle,
};

export default function OrderDetailsPage() {
  const params = useParams<{ id: string }>();
  const router = useRouter();
  const orderId = params?.id;

  const [order, setOrder] = useState<Order | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (!orderId) return;
    let cancelled = false;
    const load = async () => {
      setLoading(true);
      setError(null);
      try {
        const data = await ordersService.getOrder(orderId);
        if (!cancelled) setOrder(data);
      } catch (err) {
        if (!cancelled) setError(getErrorMessage(err));
      } finally {
        if (!cancelled) setLoading(false);
      }
    };
    load();
    return () => {
      cancelled = true;
    };
  }, [orderId]);

  if (loading) {
    return (
      <div className="space-y-4">
        <Skeleton className="h-8 w-48" />
        <Skeleton className="h-64 w-full" />
      </div>
    );
  }

  if (error) {
    return (
      <div className="space-y-4">
        <Button variant="ghost" size="sm" onClick={() => router.back()} className="gap-2">
          <ArrowLeft className="h-4 w-4" /> Back
        </Button>
        <div className="rounded-xl border border-red-500/30 bg-red-500/10 p-4 text-sm text-red-600 dark:text-red-300">
          {error}
        </div>
      </div>
    );
  }

  if (!order) {
    return null;
  }

  const total = Number(order.price) * Number(order.quantity);
  const filled = Number(order.filledAmount || 0);
  const Icon = STATUS_ICON[order.status] || Clock;

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <Button variant="ghost" size="sm" asChild className="gap-2 mb-2">
            <Link href="/dashboard/sell">
              <ArrowLeft className="h-4 w-4" /> Back to Sell
            </Link>
          </Button>
          <h1 className="text-2xl font-bold tracking-tight text-ink">Order Details</h1>
          <p className="mt-1 text-xs text-ink-muted font-mono">#{order.id}</p>
        </div>
        <Badge variant={STATUS_VARIANT[order.status] || 'default'} className="gap-1">
          <Icon className="h-3 w-3" />
          {getOrderStatusText(order.status)}
        </Badge>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>Order Summary</CardTitle>
          <CardDescription>
            {order.side === 'SELL' ? 'Selling' : 'Buying'} {order.currency} on {formatDateTime(order.createdAt)}
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-3">
          <div className="flex justify-between text-sm">
            <span className="text-ink-muted">Side</span>
            <span className="font-medium text-ink">{order.side}</span>
          </div>
          <div className="flex justify-between text-sm">
            <span className="text-ink-muted">Currency</span>
            <span className="font-medium text-ink">{order.currency}</span>
          </div>
          <div className="flex justify-between text-sm">
            <span className="text-ink-muted">Price</span>
            <span className="font-medium text-ink">${order.price} / {order.currency}</span>
          </div>
          <div className="flex justify-between text-sm">
            <span className="text-ink-muted">Quantity</span>
            <span className="font-medium text-ink">{order.quantity} {order.currency}</span>
          </div>
          <div className="flex justify-between text-sm">
            <span className="text-ink-muted">Filled</span>
            <span className="font-medium text-ink">{filled} {order.currency}</span>
          </div>
          <div className="flex justify-between border-t border-line pt-2 text-sm">
            <span className="text-ink-muted">Total</span>
            <span className="font-semibold text-ink">{formatCurrency(total)}</span>
          </div>
        </CardContent>
      </Card>

      {order.matches && order.matches.length > 0 && (
        <Card>
          <CardHeader>
            <CardTitle>Matches ({order.matches.length})</CardTitle>
          </CardHeader>
          <CardContent className="space-y-2">
            {order.matches.map((m) => (
              <div key={m.id} className="flex items-center justify-between rounded-xl border border-line p-3 text-sm">
                <div>
                  <p className="font-medium text-ink">{m.amount} {order.currency}</p>
                  <p className="text-xs text-ink-muted">{formatDateTime(m.createdAt)}</p>
                </div>
                <Badge variant={STATUS_VARIANT[m.status] || 'default'}>{m.status}</Badge>
              </div>
            ))}
          </CardContent>
        </Card>
      )}
    </div>
  );
}