import { Badge } from '@/shared/ui/badge';
import { Card, CardContent } from '@/shared/ui/card';
import { Tabs, TabsList, TabsTrigger } from '@/shared/ui/tabs';
import { CheckCircle, MapPin, Package, Truck } from 'lucide-react';
import { useTranslations } from 'next-intl';
import Image from 'next/image';
import { useState } from 'react';
import { orders } from '../lib/data';

const Orders = () => {
  const [ordersTab, setOrdersTab] = useState('active');
  const t = useTranslations();

  const getStatusInfo = (status: string) => {
    const statusMap: Record<
      string,
      { text: string; color: string; bgColor: string }
    > = {
      inTransit: {
        text: "Yo'lda",
        color: 'text-blue-600',
        bgColor: 'bg-blue-100',
      },
      atPickup: {
        text: 'Punktda',
        color: 'text-amber-600',
        bgColor: 'bg-amber-100',
      },
      delivered: {
        text: 'Yetkazildi',
        color: 'text-emerald-600',
        bgColor: 'bg-emerald-100',
      },
      cancelled: {
        text: 'Bekor qilindi',
        color: 'text-red-600',
        bgColor: 'bg-red-100',
      },
    };
    return (
      statusMap[status] || {
        text: status,
        color: 'text-muted-foreground',
        bgColor: 'bg-muted',
      }
    );
  };

  const getStatusIcon = (status: string) => {
    switch (status) {
      case 'inTransit':
        return <Truck className="w-4 h-4" />;
      case 'atPickup':
        return <MapPin className="w-4 h-4" />;
      case 'delivered':
        return <CheckCircle className="w-4 h-4" />;
      default:
        return <Package className="w-4 h-4" />;
    }
  };

  return (
    <div>
      <div className="flex items-center justify-between mb-4 md:mb-6">
        <h2 className="text-xl md:text-2xl font-bold text-foreground">
          {t('Buyurtmalar')}
        </h2>
      </div>

      <Tabs
        value={ordersTab}
        onValueChange={setOrdersTab}
        className="mb-4 md:mb-6"
      >
        <TabsList className="bg-slate-100 w-full grid grid-cols-3 h-auto p-1">
          <TabsTrigger
            value="active"
            className="data-[state=active]:bg-white text-xs md:text-sm py-2"
          >
            {t('Faol')} ({orders.filter((o) => o.status !== 'delivered').length}
            )
          </TabsTrigger>
          <TabsTrigger
            value="completed"
            className="data-[state=active]:bg-white text-xs md:text-sm py-2"
          >
            {t('Tugadi')} (
            {orders.filter((o) => o.status === 'delivered').length})
          </TabsTrigger>
          <TabsTrigger
            value="all"
            className="data-[state=active]:bg-white text-xs md:text-sm py-2"
          >
            {t('Barchasi')} ({orders.length})
          </TabsTrigger>
        </TabsList>
      </Tabs>

      <div className="space-y-3 md:space-y-4">
        {orders
          .filter((o) => {
            if (ordersTab === 'active') return o.status !== 'delivered';
            if (ordersTab === 'completed') return o.status === 'delivered';
            return true;
          })
          .map((order) => {
            const statusInfo = getStatusInfo(order.status);
            return (
              <Card
                key={order.id}
                className="border-0 shadow-sm hover:shadow-md transition-shadow"
              >
                <CardContent className="p-3 md:p-5">
                  <div className="flex items-start justify-between mb-3 md:mb-4">
                    <div className="flex items-center gap-2 md:gap-3">
                      <div
                        className={`w-10 h-10 md:w-12 md:h-12 rounded-xl ${statusInfo.bgColor} flex items-center justify-center shrink-0`}
                      >
                        <span className={statusInfo.color}>
                          {getStatusIcon(order.status)}
                        </span>
                      </div>
                      <div>
                        <p className="font-semibold text-sm md:text-base text-foreground">
                          {order.id}
                        </p>
                        <p className="text-xs md:text-sm text-muted-foreground">
                          {order.date} • {order.time}
                        </p>
                      </div>
                    </div>
                    <Badge
                      className={`${statusInfo.bgColor} ${statusInfo.color} border-0 text-xs`}
                    >
                      {t(statusInfo.text)}
                    </Badge>
                  </div>

                  <div className="flex gap-2 md:gap-3 mb-3 md:mb-4 overflow-x-auto pb-2 -mx-1 px-1 scrollbar-hide">
                    {order.items.map((item, idx) => (
                      <div
                        key={idx}
                        className="flex items-center gap-2 md:gap-3 bg-slate-50 rounded-xl p-2 md:p-3 min-w-fit shrink-0"
                      >
                        <Image
                          width={500}
                          unoptimized
                          height={500}
                          src={item.image || '/placeholder.svg'}
                          alt={item.name}
                          className="w-10 h-10 md:w-12 md:h-12 rounded-lg object-cover"
                        />
                        <div>
                          <p className="font-medium text-xs md:text-sm text-foreground">
                            {item.name}
                          </p>
                          <p className="text-[10px] md:text-xs text-muted-foreground">
                            {item.quantity} × {item.price.toLocaleString()}
                          </p>
                        </div>
                      </div>
                    ))}
                  </div>

                  <div className="flex flex-col md:flex-row md:items-center justify-between pt-3 md:pt-4 border-t border-slate-100 gap-2">
                    <div className="flex items-center gap-2 text-xs md:text-sm text-muted-foreground">
                      <MapPin className="w-3 h-3 md:w-4 md:h-4 shrink-0" />
                      <span className="truncate">{order.address}</span>
                    </div>
                    <div className="text-right">
                      <p className="font-bold text-sm md:text-base text-foreground">
                        {(order.total + order.deliveryFee).toLocaleString()}{' '}
                        {"so'm"}
                      </p>
                      <p className="text-[10px] md:text-xs text-muted-foreground">
                        {t('Yetkazish')}: {order.deliveryFee.toLocaleString()}{' '}
                        {"so'm"}
                      </p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            );
          })}
      </div>
    </div>
  );
};

export default Orders;
