"use client";

import React, { useState } from "react";
import { useStaff } from "@/hooks/useStaff";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { 
  Users, 
  UserPlus, 
  Trash2, 
  Mail, 
  Phone, 
  Briefcase,
  Search,
  Plus
} from "lucide-react";

export default function EquipaPage() {
  const { staff, loading, addStaff, deleteStaff } = useStaff();
  const [searchTerm, setSearchTerm] = useState("");
  const [isAdding, setIsAdding] = useState(false);
  const [newMember, setNewMember] = useState({
    name: "",
    role: "",
    email: "",
    phoneNumber: ""
  });

  const filteredStaff = staff.filter(s => 
    s.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
    s.role.toLowerCase().includes(searchTerm.toLowerCase())
  );

  const handleAdd = async (e: React.FormEvent) => {
    e.preventDefault();
    const res = await addStaff(newMember);
    if (res.success) {
      setIsAdding(false);
      setNewMember({ name: "", role: "", email: "", phoneNumber: "" });
    }
  };

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-3xl font-display font-bold text-foreground">Gestão de Equipa</h1>
        <Button onClick={() => setIsAdding(!isAdding)} className="gap-2">
          {isAdding ? "Cancelar" : <><UserPlus className="h-4 w-4" /> Adicionar Funcionário</>}
        </Button>
      </div>

      {isAdding && (
        <Card className="border-primary/20 bg-primary/5">
          <CardHeader>
            <CardTitle>Novo Funcionário</CardTitle>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleAdd} className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
              <div className="space-y-2">
                <Label htmlFor="name">Nome</Label>
                <Input 
                  id="name" 
                  value={newMember.name} 
                  onChange={e => setNewMember({...newMember, name: e.target.value})} 
                  required 
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="role">Cargo</Label>
                <Input 
                  id="role" 
                  value={newMember.role} 
                  onChange={e => setNewMember({...newMember, role: e.target.value})} 
                  required 
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="email">Email</Label>
                <Input 
                  id="email" 
                  type="email"
                  value={newMember.email} 
                  onChange={e => setNewMember({...newMember, email: e.target.value})} 
                  required 
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="phone">Telefone</Label>
                <div className="flex gap-2">
                  <Input 
                    id="phone" 
                    value={newMember.phoneNumber} 
                    onChange={e => setNewMember({...newMember, phoneNumber: e.target.value})} 
                  />
                  <Button type="submit">Adicionar</Button>
                </div>
              </div>
            </form>
          </CardContent>
        </Card>
      )}

      <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 nome ou cargo..." 
          className="pl-10"
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
        />
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {loading ? (
          <div className="col-span-full flex items-center justify-center py-20">
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
          </div>
        ) : filteredStaff.length > 0 ? (
          filteredStaff.map((member) => (
            <Card key={member.id} className="overflow-hidden border-border/50 hover:shadow-md transition-all group">
              <CardHeader className="pb-2">
                <div className="flex items-start justify-between">
                  <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold text-xl">
                    {member.name.charAt(0)}
                  </div>
                  <Button 
                    variant="ghost" 
                    size="icon" 
                    className="text-muted-foreground hover:text-destructive opacity-0 group-hover:opacity-100 transition-opacity"
                    onClick={() => deleteStaff(member.id)}
                  >
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </div>
                <CardTitle className="mt-4">{member.name}</CardTitle>
                <CardDescription className="flex items-center gap-1">
                  <Briefcase className="h-3 w-3" /> {member.role}
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-3 pt-4 border-t border-border/50">
                <div className="flex items-center gap-3 text-sm text-muted-foreground">
                  <Mail className="h-4 w-4" /> {member.email}
                </div>
                {member.phoneNumber && (
                  <div className="flex items-center gap-3 text-sm text-muted-foreground">
                    <Phone className="h-4 w-4" /> {member.phoneNumber}
                  </div>
                )}
              </CardContent>
            </Card>
          ))
        ) : (
          <div className="col-span-full flex flex-col items-center justify-center py-20 text-center border-2 border-dashed rounded-xl">
            <Users className="h-12 w-12 text-muted-foreground/20 mb-4" />
            <h3 className="text-lg font-medium">Nenhum funcionário encontrado</h3>
            <p className="text-sm text-muted-foreground">Adicione membros à sua equipa para começar.</p>
          </div>
        )}
      </div>
    </div>
  );
}