'use client';

import Link from 'next/link';
import {
  ArrowRight,
  ShoppingBag,
  Megaphone,
  ArrowDownLeft,
  CheckCircle,
  AlertTriangle,
  Wallet,
} from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';

const recentActivity = [
  {
    id: 1,
    type: 'order',
    icon: ShoppingBag,
    iconBg: 'bg-blue-50 dark:bg-blue-950/30',
    iconColor: 'text-blue-600',
    title: 'New order placed',
    description: 'TechStore SA ordered Instagram Story Campaign from Sarah Ahmed',
    amount: 'SAR 2,500',
    time: '2 min ago',
    status: 'paid',
  },
  {
    id: 2,
    type: 'offer',
    icon: Megaphone,
    iconBg: 'bg-violet-50 dark:bg-violet-950/30',
    iconColor: 'text-violet-600',
    title: 'New offer submitted',
    description: 'Mohammed Ali listed YouTube Product Review',
    amount: 'SAR 8,000',
    time: '15 min ago',
    status: 'pending',
  },
  {
    id: 3,
    type: 'confirmation',
    icon: CheckCircle,
    iconBg: 'bg-emerald-50 dark:bg-emerald-950/30',
    iconColor: 'text-emerald-600',
    title: 'Service confirmed',
    description: 'Fashion Hub confirmed delivery by Mohammed Ali',
    amount: 'SAR 8,000',
    time: '1 hr ago',
    status: 'completed',
  },
  {
    id: 4,
    type: 'payout',
    icon: ArrowDownLeft,
    iconBg: 'bg-cyan-50 dark:bg-cyan-950/30',
    iconColor: 'text-cyan-600',
    title: 'Payout requested',
    description: 'Ahmed Khalid requested withdrawal to Riyad Bank',
    amount: 'SAR 30,000',
    time: '2 hrs ago',
    status: 'processing',
  },
  {
    id: 5,
    type: 'dispute',
    icon: AlertTriangle,
    iconBg: 'bg-red-50 dark:bg-red-950/30',
    iconColor: 'text-red-600',
    title: 'Dispute opened',
    description: 'GadgetWorld disputed order ORD-1006 with Sarah Ahmed',
    amount: 'SAR 2,500',
    time: '3 hrs ago',
    status: 'disputed',
  },
];

const statusBadge: Record<string, string> = {
  paid: 'bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-950/30 dark:text-blue-400 dark:border-blue-800',
  pending: 'bg-amber-50 text-amber-700 border-amber-200 dark:bg-amber-950/30 dark:text-amber-400 dark:border-amber-800',
  completed: 'bg-emerald-50 text-emerald-700 border-emerald-200 dark:bg-emerald-950/30 dark:text-emerald-400 dark:border-emerald-800',
  processing: 'bg-indigo-50 text-indigo-700 border-indigo-200 dark:bg-indigo-950/30 dark:text-indigo-400 dark:border-indigo-800',
  disputed: 'bg-red-50 text-red-700 border-red-200 dark:bg-red-950/30 dark:text-red-400 dark:border-red-800',
};

export function MarketplaceActivity() {
  return (
    <Card>
      <CardHeader className="pb-3">
        <div className="flex items-center justify-between">
          <CardTitle className="text-base font-semibold">Marketplace Activity</CardTitle>
          <Button variant="ghost" size="sm" className="text-xs h-7 text-muted-foreground hover:text-foreground" asChild>
            <Link href="/marketplace-admin/collab-requests">
              View All <ArrowRight className="h-3.5 w-3.5 ml-1" />
            </Link>
          </Button>
        </div>
      </CardHeader>
      <CardContent className="pt-0">
        <div className="space-y-0">
          {recentActivity.map((item, index) => (
            <div
              key={item.id}
              className={`flex items-start gap-3 py-3 ${index < recentActivity.length - 1 ? 'border-b border-border/50' : ''}`}
            >
              <div className={`${item.iconBg} rounded-lg p-2 mt-0.5 shrink-0`}>
                <item.icon className={`h-4 w-4 ${item.iconColor}`} />
              </div>
              <div className="flex-1 min-w-0">
                <div className="flex items-center justify-between gap-2">
                  <p className="text-sm font-medium truncate">{item.title}</p>
                  <span className={`shrink-0 inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium border ${statusBadge[item.status]}`}>
                    {item.status}
                  </span>
                </div>
                <p className="text-xs text-muted-foreground mt-0.5 truncate">{item.description}</p>
                <div className="flex items-center gap-2 mt-1">
                  <span className="text-xs font-semibold">{item.amount}</span>
                  <span className="text-[10px] text-muted-foreground">{item.time}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}

export function MarketplaceStats() {
  return (
    <Card>
      <CardHeader className="pb-3">
        <CardTitle className="text-base font-semibold">Marketplace Overview</CardTitle>
      </CardHeader>
      <CardContent className="pt-0">
        <div className="grid grid-cols-2 gap-3">
          {[
            { label: 'Active Offers', value: '32', icon: Megaphone, color: 'text-violet-600', bg: 'bg-violet-50 dark:bg-violet-950/30' },
            { label: 'Open Orders', value: '24', icon: ShoppingBag, color: 'text-blue-600', bg: 'bg-blue-50 dark:bg-blue-950/30' },
            { label: 'In Escrow', value: 'SAR 24K', icon: Wallet, color: 'text-amber-600', bg: 'bg-amber-50 dark:bg-amber-950/30' },
            { label: 'Pending Payouts', value: '5', icon: ArrowDownLeft, color: 'text-cyan-600', bg: 'bg-cyan-50 dark:bg-cyan-950/30' },
          ].map((stat) => (
            <div key={stat.label} className="flex items-center gap-3 p-3 rounded-lg border border-border/50 bg-muted/20">
              <div className={`${stat.bg} rounded-lg p-2 shrink-0`}>
                <stat.icon className={`h-4 w-4 ${stat.color}`} />
              </div>
              <div>
                <p className="text-xs text-muted-foreground">{stat.label}</p>
                <p className={`text-sm font-bold ${stat.color}`}>{stat.value}</p>
              </div>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}