import React from 'react';
import { Phone, Mail, MoreHorizontal, Plus, Grid, List } from 'lucide-react';
import { Client } from '../types';

const contactsData: Client[] = [
  { id: '1', name: 'Jordan Nico', role: 'Designer na', company: 'Uda Studios', phone: '(11) 93456-7890', email: 'jordan@email.com', avatar: 'https://i.pravatar.cc/150?u=1' },
  { id: '2', name: 'Tony Soap', role: 'Desenvolvedor na', company: 'Uda Studios', phone: '(11) 93456-7890', email: 'tony@email.com', avatar: 'https://i.pravatar.cc/150?u=2' },
  { id: '3', name: 'Karen Hope', role: 'Gerente na', company: 'Uda Studios', phone: '(11) 93456-7890', email: 'karen@email.com', avatar: 'https://i.pravatar.cc/150?u=3' },
  { id: '4', name: 'Gabriel', role: 'Designer na', company: 'Angels Studios', phone: '(11) 93456-7890', email: 'gabriel@email.com', avatar: 'https://i.pravatar.cc/150?u=4' },
  { id: '5', name: 'Tarmiel', role: 'Designer na', company: 'Heaven Studios', phone: '(11) 93456-7890', email: 'tarmiel@email.com', avatar: 'https://i.pravatar.cc/150?u=5' },
  { id: '6', name: 'Sariel', role: 'Designer na', company: 'Sanctuary Studios', phone: '(11) 93456-7890', email: 'sariel@email.com', avatar: 'https://i.pravatar.cc/150?u=6' },
  { id: '7', name: 'Cahaya Hikari', role: 'Designer na', company: 'Jekate Studios', phone: '(11) 93456-7890', email: 'cahaya@email.com', avatar: 'https://i.pravatar.cc/150?u=7' },
  { id: '8', name: 'Nadila Adja', role: 'Designer na', company: 'FX Studios', phone: '(11) 93456-7890', email: 'nadila@email.com', avatar: 'https://i.pravatar.cc/150?u=8' },
  { id: '9', name: 'Angelina Crispy', role: 'Designer na', company: 'Patlapan Studios', phone: '(11) 93456-7890', email: 'angelina@email.com', avatar: 'https://i.pravatar.cc/150?u=9' },
];

export const ContactsView: React.FC = () => {
  return (
    <div className="space-y-8 animate-fade-in">
      {/* Header Controls */}
      <div className="flex flex-col md:flex-row justify-between items-center gap-4">
        <div className="relative w-full md:w-96">
          <input 
            type="text" 
            placeholder="Pesquisar..." 
            className="w-full pl-12 pr-4 py-3 bg-white border-none rounded-2xl shadow-sm text-slate-600 focus:ring-2 focus:ring-primary-200 outline-none"
          />
          <svg className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
        </div>
        
        <div className="flex gap-3">
          <button className="w-10 h-10 bg-[#2D3648] text-white rounded-xl flex items-center justify-center hover:bg-slate-700 transition-colors shadow-lg shadow-slate-200">
            <Plus size={20} />
          </button>
          <button className="w-10 h-10 bg-white text-slate-400 rounded-xl flex items-center justify-center hover:text-primary-500 transition-colors shadow-sm">
            <List size={20} />
          </button>
          <button className="w-10 h-10 bg-white text-primary-500 rounded-xl flex items-center justify-center shadow-sm">
            <Grid size={20} />
          </button>
        </div>
      </div>

      {/* Cards Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
        {contactsData.map((contact) => (
          <div key={contact.id} className="bg-white p-6 rounded-[2rem] shadow-sm hover:shadow-md transition-shadow border border-slate-50">
            <div className="flex justify-between items-start mb-6">
              <div className="flex gap-4">
                <div className="w-16 h-16 rounded-2xl overflow-hidden bg-slate-100">
                  <img src={contact.avatar} alt={contact.name} className="w-full h-full object-cover" />
                </div>
                <div>
                  <h3 className="font-bold text-slate-800 text-lg">{contact.name}</h3>
                  <p className="text-slate-400 text-xs mt-1">{contact.role}</p>
                  <p className="font-semibold text-slate-700 text-sm">{contact.company}</p>
                </div>
              </div>
              <button className="text-slate-300 hover:text-slate-600">
                <MoreHorizontal size={24} />
              </button>
            </div>

            <div className="space-y-4">
              <div>
                <p className="text-xs text-slate-400 mb-1 ml-1">Telefone</p>
                <button className="w-full py-2 px-4 rounded-2xl border border-slate-200 flex items-center gap-3 text-slate-700 font-medium hover:bg-primary-50 hover:border-primary-200 hover:text-primary-600 transition-colors group">
                  <div className="w-8 h-8 rounded-full bg-primary-100/50 flex items-center justify-center text-primary-500 group-hover:bg-primary-500 group-hover:text-white transition-colors">
                    <Phone size={14} />
                  </div>
                  {contact.phone}
                </button>
              </div>

              <div>
                <p className="text-xs text-slate-400 mb-1 ml-1">E-mail</p>
                <button className="w-full py-2 px-4 rounded-2xl border border-slate-200 flex items-center gap-3 text-slate-700 font-medium hover:bg-primary-50 hover:border-primary-200 hover:text-primary-600 transition-colors group">
                  <div className="w-8 h-8 rounded-full bg-primary-100/50 flex items-center justify-center text-primary-500 group-hover:bg-primary-500 group-hover:text-white transition-colors">
                    <Mail size={14} />
                  </div>
                  {contact.email}
                </button>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};