'use client';

import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { ShoppingCart, CheckCircle, AlertTriangle, ShieldOff, Wallet as WalletIcon, Lock, Info } from 'lucide-react';
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 } from '@/lib/utils';
import { getErrorMessage } from '@/lib/errors';
import { ordersService, type Order, type BuyInfo, type P2PTrade } from '@/services/orders.service';
import { subscriptionService, type Subscription } from '@/services/subscription.service';
import { authService } from '@/services/auth.service';
import { businessRulesService } from '@/services/business-rules.service';
import { useSystemConfig } from '@/hooks/useSystemConfig';

const STEPS = ['Enter Amount', 'Review & Buy'] as const;

const PRICE = 1;

export default function BuyPage() {
  const router = useRouter();
  const sysConfig = useSystemConfig();
  const [step, setStep] = useState(0);
  const [amount, setAmount] = useState('');
  const [message, setMessage] = useState('');

  const [buyInfo, setBuyInfo] = useState<BuyInfo | null>(null);
  const [dailyLimits, setDailyLimits] = useState<{ dailyLimit: number; dailyUsed: number; dailyRemaining: number } | null>(null);
  const [subscription, setSubscription] = useState<Subscription | null>(null);
  const [userFrozen, setUserFrozen] = useState(false);
  const [bootstrap, setBootstrap] = useState(true);

  const [buying, setBuying] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState(false);
  const [matching, setMatching] = useState(false);
  const [trade, setTrade] = useState<P2PTrade | null>(null);

  useEffect(() => {
    let cancelled = false;
    const load = async () => {
      setBootstrap(true);
      try {
        const [info, sub, me, profile, limits] = await Promise.allSettled([
          ordersService.getBuyInfo(),
          subscriptionService.getMySubscription(),
          authService.getProfile(),
          (async () => {
            const res = await authService.getProfile();
            const p = (res as any)?.data?.data?.user ?? (res as any)?.data?.data ?? (res as any)?.data?.user ?? (res as any)?.data;
            return p?.id as string | undefined;
          })(),
          (async () => {
            const res = await authService.getProfile();
            const p = (res as any)?.data?.data?.user ?? (res as any)?.data?.data ?? (res as any)?.data?.user ?? (res as any)?.data;
            if (!p?.id) return null;
            return businessRulesService.getOrderLimits(p.id);
          })(),
        ]);
        if (cancelled) return;
        if (info.status === 'fulfilled') setBuyInfo(info.value);
        if (sub.status === 'fulfilled') setSubscription(sub.value ?? null);
        if (me.status === 'fulfilled') {
          const profile = (me.value as any)?.data?.data?.user ?? (me.value as any)?.data?.data ?? (me.value as any)?.data?.user ?? (me.value as any)?.data;
          setUserFrozen(Boolean(profile?.isFrozen));
        }
        if (limits.status === 'fulfilled' && limits.value) {
          setDailyLimits({
            dailyLimit: Number(limits.value.dailyLimit) || 0,
            dailyUsed: Number(limits.value.dailyUsed) || 0,
            dailyRemaining: Number(limits.value.dailyRemaining) || 0,
          });
        }
      } finally {
        if (!cancelled) setBootstrap(false);
      }
    };
    load();
    return () => { cancelled = true; };
  }, []);

  const numericAmount = Number(amount) || 0;
  const totalUsdt = numericAmount * PRICE;

  const subExpired = subscription?.status === 'EXPIRED' || subscription?.status === 'TERMINATED' || subscription?.status === 'CANCELLED';
  const isBlocked = userFrozen || subExpired;

  const minRequired = buyInfo?.effectiveRequired ?? 0;
  const belowMin = buyInfo ? numericAmount > 0 && numericAmount < minRequired : false;
  const exceedsDaily = dailyLimits ? numericAmount > dailyLimits.dailyRemaining : false;

  const handleConfirm = async () => {
    if (numericAmount <= 0) {
      setError('Amount must be greater than zero.');
      return;
    }
    if (isBlocked) {
      setError(userFrozen ? 'Your account is frozen. Buying is disabled.' : 'Your subscription is not active. Please renew to buy.');
      return;
    }
    if (belowMin) {
      setError(`Minimum buy is ${formatCurrency(minRequired)} USDT.`);
      return;
    }

    setBuying(true);
    setError(null);
    try {
      const result = await ordersService.buy({
        currency: 'USDT',
        price: PRICE,
        quantity: numericAmount,
        message: message || undefined,
      });
      const order: Order = (result as any)?.order ?? result;
      setSuccess(true);
      setBuying(false);

      setMatching(true);
      try {
        const match = await ordersService.p2pFindMatch({
          amount: numericAmount,
          platform: 'internal',
          side: 'BUY',
        });
        setTrade(match);
      } catch (err) {
        setError(getErrorMessage(err));
      } finally {
        setMatching(false);
      }

      setTimeout(() => {
        if (order?.id) router.push(`/dashboard/orders/${order.id}`);
        else router.push('/dashboard');
      }, 1200);
    } catch (err) {
      setError(getErrorMessage(err));
      setBuying(false);
    }
  };

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

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold tracking-tight text-ink">Buy USDT</h1>
        <p className="mt-1 text-sm text-ink-muted">
          Purchase crypto using your wallet balance. Funds are matched to sellers in real time.
        </p>
      </div>

      {buyInfo && (
        <Card>
          <CardContent className="flex items-center justify-between p-4">
            <div className="flex items-center gap-3">
              <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary-500/10 text-primary-600">
                <WalletIcon className="h-5 w-5" />
              </div>
              <div>
                <p className="text-xs text-ink-muted">Wallet balance</p>
                <p className="text-lg font-semibold text-ink">{formatCurrency(buyInfo.wallet.available)} USDT</p>
              </div>
            </div>
            <div className="text-right text-xs text-ink-muted">
              <p>Locked: {formatCurrency(buyInfo.wallet.locked)}</p>
              <p>Total: {formatCurrency(buyInfo.wallet.balance)}</p>
            </div>
          </CardContent>
        </Card>
      )}

      {isBlocked && (
        <div className="flex items-start gap-2 rounded-xl border border-amber-500/30 bg-amber-500/10 p-3 text-sm text-amber-700 dark:text-amber-300">
          {userFrozen ? <ShieldOff className="mt-0.5 h-4 w-4 shrink-0" /> : <Lock className="mt-0.5 h-4 w-4 shrink-0" />}
          <div>
            <p className="font-medium">
              {userFrozen ? 'Your account is frozen.' : 'Your subscription is not active.'}
            </p>
            <p className="text-xs opacity-90">
              {userFrozen
                ? 'Buying is disabled while your account is frozen. Please contact support.'
                : 'Renew your subscription to resume buying.'}
            </p>
          </div>
        </div>
      )}

      {minRequired > 0 && !isBlocked && (
        <div className="flex items-start gap-2 rounded-xl border border-primary-500/30 bg-primary-500/10 p-3 text-sm text-primary-700 dark:text-primary-300">
          <Info className="mt-0.5 h-4 w-4 shrink-0" />
          <div>
            <p className="font-medium">Minimum buy: {formatCurrency(minRequired)} USDT</p>
            {buyInfo && buyInfo.pendingMatchedAmount > 0 && (
              <p className="text-xs opacity-90">
                You have {formatCurrency(buyInfo.pendingMatchedAmount)} USDT pending from matches.
              </p>
            )}
          </div>
        </div>
      )}

      <div className="flex items-center gap-2">
        {STEPS.map((s, i) => (
          <div key={s} className="flex items-center gap-2">
            <div className={`flex h-7 w-7 items-center justify-center rounded-full text-xs font-medium ${
              i === step ? 'bg-primary-600 text-white' : i < step ? 'bg-emerald-500 text-white' : 'bg-surface-raised text-ink-muted'
            }`}>
              {i < step ? <CheckCircle className="h-4 w-4" /> : i + 1}
            </div>
            <span className={`text-sm ${i === step ? 'font-medium text-ink' : 'text-ink-muted'}`}>{s}</span>
            {i < STEPS.length - 1 && <div className="w-4 border-t border-line"></div>}
          </div>
        ))}
      </div>

      {matching && (
        <div className="flex items-center gap-2 rounded-xl border border-primary-500/30 bg-primary-500/10 p-3 text-sm text-primary-700 dark:text-primary-300">
          <Info className="h-4 w-4 shrink-0" />
          Searching for a seller match…
        </div>
      )}

      {trade && (
        <Card className="border-emerald-500/30 bg-emerald-500/5">
          <CardContent className="p-4 space-y-2">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-xs text-emerald-700 dark:text-emerald-300">Seller matched</p>
                <p className="font-medium text-ink">{trade.seller?.email ?? 'Match found'}</p>
              </div>
              <Badge variant="success">Matched</Badge>
            </div>
            <p className="text-xs text-ink-muted">Trade ID: {trade.id}</p>
          </CardContent>
        </Card>
      )}

      {success && !trade && !matching && (
        <div className="flex items-center gap-2 rounded-xl border border-emerald-500/30 bg-emerald-500/10 p-3 text-sm text-emerald-700 dark:text-emerald-300">
          <CheckCircle className="h-4 w-4" />
          Buy order created. Redirecting to order details...
        </div>
      )}

      {error && (
        <div className="rounded-xl border border-red-500/30 bg-red-500/10 p-3 text-sm text-red-600 dark:text-red-300">
          {error}
        </div>
      )}

      {step === 0 && (
        <Card>
          <CardHeader>
            <CardTitle>Enter Amount</CardTitle>
            <CardDescription className="mt-1">How much USDT do you want to buy?</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-ink mb-2">Amount (USDT)</label>
              <div className="relative">
                <input
                  type="number"
                  inputMode="decimal"
                  min={minRequired || 0}
                  step="0.0001"
                  placeholder={minRequired > 0 ? `Min ${minRequired}` : '0.00'}
                  value={amount}
                  onChange={(e) => setAmount(e.target.value)}
                  className="w-full pl-4 pr-16 py-3 rounded-xl border border-line bg-surface text-ink text-2xl font-medium focus:outline-none focus:ring-2 focus:ring-primary-500"
                />
                <span className="absolute right-4 top-1/2 -translate-y-1/2 text-sm font-medium text-ink-muted">
                  USDT
                </span>
              </div>
              {minRequired > 0 && (
                <p className="mt-1 text-xs text-ink-faint">
                  Minimum: {formatCurrency(minRequired)} USDT
                </p>
              )}
            </div>
            <div>
              <label className="block text-sm font-medium text-ink mb-2">Message to seller (optional)</label>
              <textarea
                value={message}
                onChange={(e) => setMessage(e.target.value)}
                rows={3}
                placeholder="Add any notes for the seller (e.g. payment method, terms)…"
                className="w-full rounded-xl border border-line bg-surface px-4 py-2 text-ink focus:outline-none focus:ring-2 focus:ring-primary-500 resize-none"
              />
            </div>
            {dailyLimits && dailyLimits.dailyLimit > 0 && (
              <div className="rounded-xl bg-surface-raised p-3 text-xs text-ink-muted space-y-1">
                <p>Daily limit: {formatCurrency(dailyLimits.dailyLimit)} USDT</p>
                <p>Used: {formatCurrency(dailyLimits.dailyUsed)} USDT</p>
                <p>Remaining today: {formatCurrency(dailyLimits.dailyRemaining)} USDT</p>
              </div>
            )}
            {belowMin && (
              <div className="flex items-start gap-2 rounded-xl border border-amber-500/30 bg-amber-500/10 p-3 text-sm text-amber-700 dark:text-amber-300">
                <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
                <span>Amount is below the minimum buy of {formatCurrency(minRequired)} USDT.</span>
              </div>
            )}
            {exceedsDaily && (
              <div className="flex items-start gap-2 rounded-xl border border-amber-500/30 bg-amber-500/10 p-3 text-sm text-amber-700 dark:text-amber-300">
                <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
                <span>Amount exceeds your daily remaining limit of {formatCurrency(dailyLimits?.dailyRemaining ?? 0)} USDT.</span>
              </div>
            )}
            <div className="flex justify-end">
              <Button
                onClick={() => setStep(1)}
                disabled={!amount || numericAmount <= 0 || belowMin || exceedsDaily}
              >
                Continue
              </Button>
            </div>
          </CardContent>
        </Card>
      )}

      {step === 1 && (
        <Card>
          <CardHeader>
            <CardTitle>Review Purchase</CardTitle>
            <CardDescription className="mt-1">Confirm your purchase details</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-3">
              <div className="flex justify-between">
                 <span className="text-ink-muted">Currency</span>
                 <span className="font-medium text-ink">USDT</span>
               </div>
               <div className="flex justify-between">
                 <span className="text-ink-muted">Amount</span>
                <span className="font-medium text-ink">{numericAmount} USDT</span>
              </div>
              <div className="flex justify-between border-t border-line pt-2">
                <span className="text-ink-muted">Total (USDT)</span>
                <span className="font-semibold text-ink">{formatCurrency(totalUsdt)}</span>
              </div>
              {message && (
                <div className="rounded-lg bg-surface-raised p-2 text-xs text-ink-muted">
                  <span className="font-medium text-ink">Note to seller:</span> {message}
                </div>
              )}
            </div>
            <div className="flex justify-between gap-2">
              <Button variant="outline" onClick={() => setStep(0)} disabled={buying}>Back</Button>
              <Button
                onClick={handleConfirm}
                disabled={buying || matching || isBlocked || belowMin || exceedsDaily}
                className="flex items-center gap-2"
              >
                {buying ? 'Processing...' : matching ? 'Matching...' : 'Confirm Purchase'}
                {!buying && !matching && <ShoppingCart className="h-4 w-4" />}
              </Button>
            </div>
          </CardContent>
        </Card>
      )}

      {success && (
        <div className="text-center">
          <Button variant="ghost" size="sm" onClick={() => { setStep(0); setAmount(''); setMessage(''); }}>
            Place another buy order
          </Button>
        </div>
      )}
    </div>
  );
}