"use client";
import { useState } from "react";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Search, Truck, Package, MapPin, CheckCircle2 } from "lucide-react";

import { NavBar } from "@/components/navbar";
import { Footer } from "@/components/footer";

export default function TrackingPage() {
  const [orderId, setOrderId] = useState("");
  const [order, setOrder] = useState<any>(null);
  const [error, setError] = useState(false);

  const handleSearch = () => {
    const data = localStorage.getItem(`order_${orderId.toUpperCase()}`);
    if (data) {
      setOrder(JSON.parse(data));
      setError(false);
    } else {
      setOrder(null);
      setError(true);
    }
  };

  return (
    <main>
      <NavBar />
      <Container className="py-32 max-w-3xl">
      <div className="text-center mb-12">
        <Heading>Rastrea tu Pedido</Heading>
        <p className="text-neutral-600 mt-4">Ingresa tu número de orden o guía para conocer el estado de tu envío</p>
      </div>

      <div className="flex gap-2 mb-12">
        <Input 
          placeholder="Ej: PAL-X1Y2Z3 o ID de Orden" 
          value={orderId} 
          onChange={(e) => setOrderId(e.target.value)}
          className="h-12"
        />
        <Button onClick={handleSearch} className="h-12 px-8">
          <Search className="w-4 h-4 mr-2" /> Buscar
        </Button>
      </div>

      {error && (
        <div className="p-4 bg-red-50 text-red-600 rounded-lg text-center">
          No se encontró ningún pedido con ese número. Por favor verifica tus datos.
        </div>
      )}

      {order && (
        <Card>
          <CardHeader>
            <CardTitle className="flex justify-between items-center">
              <span>Detalles del Envío</span>
              <span className="text-sm font-normal text-neutral-500">Orden #{orderId}</span>
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-8">
            <div className="relative">
              <div className="absolute left-4 top-0 bottom-0 w-0.5 bg-neutral-200"></div>
              
              <TrackingStep 
                active={true} 
                done={true}
                icon={<CheckCircle2 className="w-5 h-5" />} 
                title="Pedido Recibido" 
                date={new Date(order.date).toLocaleDateString()} 
              />
              <TrackingStep 
                active={order.status !== "Pendiente"} 
                done={order.status !== "Pendiente"}
                icon={<Package className="w-5 h-5" />} 
                title="Pago Confirmado" 
                date="Verificado" 
              />
              <TrackingStep 
                active={order.status === "Enviado" || order.status === "Entregado"} 
                done={order.status === "Enviado" || order.status === "Entregado"}
                icon={<Truck className="w-5 h-5" />} 
                title="En Camino" 
                date={order.trackingNumber} 
              />
              <TrackingStep 
                active={order.status === "Entregado"} 
                done={order.status === "Entregado"}
                icon={<MapPin className="w-5 h-5" />} 
                title="Entregado" 
                date="Destino Final" 
              />
            </div>
          </CardContent>
        </Card>
      )}
      </Container>
      <Footer />
    </main>
  );
}

function TrackingStep({ active, done, icon, title, date }: any) {
  return (
    <div className={`relative pl-12 pb-8 last:pb-0 ${active ? 'text-neutral-900' : 'text-neutral-400'}`}>
      <div className={`absolute left-0 w-8 h-8 rounded-full flex items-center justify-center z-10 ${done ? 'bg-green-600 text-white' : active ? 'bg-blue-600 text-white' : 'bg-neutral-200 text-neutral-500'}`}>
        {icon}
      </div>
      <h4 className="font-bold">{title}</h4>
      <p className="text-sm">{date}</p>
    </div>
  );
}