"use client";

import { useReservas } from "@/hooks/useReservas";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { History, Calendar, User, Search } from "lucide-react";
import { Input } from "@/components/ui/input";
import { useState } from "react";

export default function HistoricoPage() {
  const { reservas, loading } = useReservas();
  const [searchTerm, setSearchTerm] = useState("");

  const historico = reservas.filter(r => 
    ["Concluída", "Recusada", "Cancelada"].includes(r.estado) || 
    (r.estado.includes("Confirmada") && new Date(r.data) < new Date())
  );

  const filtered = historico.filter(r => 
    r.clienteEmail.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-3xl font-display font-bold text-foreground">Histórico de Reservas</h1>
      </div>

      <div className="relative">
        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
        <Input 
          placeholder="Pesquisar por email do cliente..." 
          className="pl-10"
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
        />
      </div>

      <div className="grid gap-4">
        {loading ? (
          <div className="flex items-center justify-center py-20">
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
          </div>
        ) : filtered.length > 0 ? (
          filtered.map((reserva) => (
            <Card key={reserva.id} className="border-border/40 bg-card/50">
              <CardContent className="p-4 flex items-center justify-between">
                <div className="flex items-center gap-4">
                  <div className={`h-10 w-10 rounded-full flex items-center justify-center ${
                    reserva.estado === "Concluída" ? "bg-green-500/10 text-green-500" : "bg-destructive/10 text-destructive"
                  }`}>
                    <History className="h-5 w-5" />
                  </div>
                  <div>
                    <p className="font-medium">{reserva.clienteEmail}</p>
                    <div className="flex items-center gap-3 text-xs text-muted-foreground mt-0.5">
                      <span className="flex items-center gap-1"><Calendar className="h-3 w-3" /> {reserva.data}</span>
                      <span className="flex items-center gap-1"><User className="h-3 w-3" /> {reserva.pessoas} p.</span>
                    </div>
                  </div>
                </div>
                <div className="text-right">
                  <span className={`text-[10px] font-bold uppercase px-2 py-0.5 rounded border ${
                    reserva.estado === "Concluída" ? "border-green-500/20 text-green-500" : "border-destructive/20 text-destructive"
                  }`}>
                    {reserva.estado}
                  </span>
                </div>
              </CardContent>
            </Card>
          ))
        ) : (
          <div className="flex flex-col items-center justify-center py-20 text-center text-muted-foreground border-2 border-dashed rounded-xl">
            <History className="h-12 w-12 opacity-20 mb-4" />
            <p>Nenhum registo encontrado no histórico.</p>
          </div>
        )}
      </div>
    </div>
  );
}