'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { Skeleton } from '@/components/ui/skeleton';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { apiFetch } from '@/lib/auth';
import { useAuth } from '@/lib/auth-context';
import PaymentModal from '@/components/ui/payment-modal';
import { useT } from '@/i18n';
import { API_BASE } from '@/lib/config';
import { ShoppingBag, CheckCircle, Lock, Sparkles } from 'lucide-react';

interface MarketplaceSkill {
  id: string; name: string; description: string; icon: string;
  category: string; difficulty: string; tags: string[];
  price: number | null; purchased: boolean; sortOrder: number;
}

type FilterMode = 'all' | 'free' | 'premium' | 'purchased';

export default function MarketplacePage() {
  const t = useT();
  const router = useRouter();
  const { isLoggedIn } = useAuth();
  const [skills, setSkills] = useState<MarketplaceSkill[]>([]);
  const [loading, setLoading] = useState(true);
  const [filter, setFilter] = useState<FilterMode>('all');
  const [payLoading, setPayLoading] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);
  const [paymentModal, setPaymentModal] = useState<{
    open: boolean; orderNo: string; payResult: any; payChannel: 'wxpay' | 'alipay';
  }>({ open: false, orderNo: '', payResult: {}, payChannel: 'alipay' });

  useEffect(() => {
    const url = `${API_BASE}/skills/marketplace`;
    fetch(url, { credentials: 'include' })
      .then(r => r.json())
      .then(data => {
        setSkills(Array.isArray(data) ? data : []);
      })
      .catch(() => {})
      .finally(() => setLoading(false));
  }, []);

  const filtered = skills.filter(s => {
    if (filter === 'free') return !s.price;
    if (filter === 'premium') return !!s.price;
    if (filter === 'purchased') return s.purchased;
    return true;
  });

  async function handleBuy(skill: MarketplaceSkill) {
    if (!isLoggedIn) { router.push('/auth'); return; }
    setPayLoading(skill.id);
    setSuccess(null);
    try {
      const res = await apiFetch('/orders/create', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          amount: skill.price,
          planType: 'SKILL',
          skillId: skill.id,
          payChannel: 'alipay',
        }),
      });
      const data = await res.json();
      if (data.order && data.payResult) {
        const payUrl = data.payResult.payUrl || data.payResult.redirectUrl;
        const qrCode = data.payResult.qrcode || data.payResult.codeUrl;
        if (payUrl || qrCode) {
          setPaymentModal({ open: true, orderNo: data.order.orderNo, payResult: data.payResult, payChannel: 'alipay' });
        }
      }
    } catch (e) {
      console.error(e);
    }
    setPayLoading(null);
  }

  function handlePaymentPaid() {
    setPaymentModal(prev => ({ ...prev, open: false }));
    setSuccess(t.marketplace.purchaseSuccess);
  }

  const filters: { key: FilterMode; label: string }[] = [
    { key: 'all', label: t.common.viewAll },
    { key: 'free', label: t.marketplace.free },
    { key: 'premium', label: t.marketplace.locked },
    { key: 'purchased', label: t.marketplace.purchased },
  ];

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-foreground">{t.marketplace.title}</h1>
        <p className="mt-2 text-muted-foreground">{t.marketplace.desc}</p>
      </div>

      <div className="flex flex-wrap gap-2 mb-8">
        {filters.map(f => (
          <button
            key={f.key}
            onClick={() => setFilter(f.key)}
            className={`px-4 py-1.5 rounded-full text-sm font-medium transition-colors ${
              filter === f.key
                ? 'bg-foreground text-background'
                : 'bg-muted text-muted-foreground hover:text-foreground'
            }`}
          >
            {f.label}
          </button>
        ))}
      </div>

      {success && (
        <div className="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-xl p-4 mb-6 flex items-center gap-3">
          <CheckCircle className="h-5 w-5 text-green-600 shrink-0" />
          <span className="text-sm text-green-800 dark:text-green-300">{success}</span>
        </div>
      )}

      {loading ? (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {[1,2,3,4,5,6].map(i => <Skeleton key={i} className="h-52 rounded-2xl" />)}
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {filtered.map(skill => {
            const isPremium = !!skill.price;
            const isOwned = skill.purchased;
            return (
              <div key={skill.id}
                className={`bg-card rounded-2xl border-2 p-6 transition-all hover:shadow-md flex flex-col ${
                  isPremium && !isOwned ? 'border-amber-500/40' : 'border-border'
                }`}
              >
                {isPremium && !isOwned && (
                  <div className="flex items-center gap-1.5 text-xs font-medium text-amber-600 dark:text-amber-400 mb-2">
                    <Sparkles className="h-3.5 w-3.5" />
                    <span>{t.marketplace.locked}</span>
                  </div>
                )}

                <div className="flex items-start gap-3 mb-3">
                  <span className="text-3xl">{skill.icon}</span>
                  <div className="flex-1 min-w-0">
                    <h3 className="font-semibold text-foreground">{skill.name}</h3>
                    <p className="text-sm text-muted-foreground mt-0.5 line-clamp-2">{skill.description}</p>
                  </div>
                </div>

                <div className="flex items-center gap-2 mb-3">
                  <span className={`text-xs px-2 py-0.5 rounded-full ${
                    skill.difficulty === 'beginner' ? 'bg-green-100 text-green-700' :
                    skill.difficulty === 'intermediate' ? 'bg-yellow-100 text-yellow-700' :
                    'bg-red-100 text-red-700'
                  }`}>
                    {(t.skills as any)[skill.difficulty]}
                  </span>
                  <span className="text-xs text-muted-foreground">{(t.skills.categories as any)[skill.category] || skill.category}</span>
                </div>

                <div className="flex flex-wrap gap-1 mb-4">
                  {skill.tags.slice(0, 3).map(tag => (
                    <span key={tag} className="text-xs px-1.5 py-0.5 bg-muted text-muted-foreground rounded">{tag}</span>
                  ))}
                </div>

                <div className="mt-auto flex items-center gap-2">
                  {isOwned ? (
                    <>
                      <Badge variant="secondary" className="gap-1">
                        <CheckCircle className="h-3.5 w-3.5" />
                        {t.marketplace.purchased}
                      </Badge>
                      <Button asChild size="sm" variant="default" className="ml-auto">
                        <Link href={`/sandbox?skill=${skill.id}`}>
                          {t.skills.apply}
                        </Link>
                      </Button>
                    </>
                  ) : isPremium ? (
                    <>
                      <span className="text-lg font-bold text-foreground">¥{skill.price}</span>
                      <Button
                        size="sm"
                        onClick={() => handleBuy(skill)}
                        disabled={payLoading === skill.id}
                        className="ml-auto"
                      >
                        {payLoading === skill.id ? (
                          <span className="flex items-center gap-1">
                            <span className="animate-spin h-3 w-3 border-2 border-current border-t-transparent rounded-full" />
                            {t.marketplace.buying}
                          </span>
                        ) : (
                          <span className="flex items-center gap-1">
                            <ShoppingBag className="h-3.5 w-3.5" />
                            {t.marketplace.buy.replace('{price}', String(skill.price))}
                          </span>
                        )}
                      </Button>
                    </>
                  ) : (
                    <Button asChild size="sm" variant="outline" className="ml-auto">
                      <Link href={`/sandbox?skill=${skill.id}`}>
                        {t.skills.apply}
                      </Link>
                    </Button>
                  )}
                </div>
              </div>
            );
          })}
        </div>
      )}

      {!loading && filtered.length === 0 && (
        <div className="text-center py-20">
          <ShoppingBag className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
          <p className="text-muted-foreground">{t.common.noData}</p>
        </div>
      )}

      <PaymentModal
        open={paymentModal.open}
        orderNo={paymentModal.orderNo}
        payResult={paymentModal.payResult}
        payChannel={paymentModal.payChannel}
        onClose={() => setPaymentModal(prev => ({ ...prev, open: false }))}
        onPaid={handlePaymentPaid}
      />
    </div>
  );
}
