import { BarberShop } from '../types';
import { Copy, Facebook, Instagram, Phone, Smartphone } from 'lucide-react';

export const ShopDetailsTab = ({ shop }: { shop: BarberShop }) => {
  // Mock data if not provided (matches screenshot vibe)
  const schedule = shop.schedule || [
    { day: 'Segunda-feira', open: '09:00', close: '19:30' },
    { day: 'Terça-feira', open: '09:00', close: '19:30' },
    { day: 'Quarta-feira', open: '09:00', close: '19:30' },
    { day: 'Quinta-feira', open: '09:00', close: '19:30' },
    { day: 'Sexta-feira', open: '09:00', close: '19:30' },
    { day: 'Sábado', open: '09:00', close: '19:00' },
    { day: 'Domingo', open: '', close: '', closed: true },
  ];

  const paymentMethods = shop.paymentMethods || ['Dinheiro', 'Cartão de Crédito', 'Cartão de Débito'];
  
  const socials = shop.socialNetworks || {
    whatsapp: 'https://wa.me/351900000000',
    instagram: 'https://instagram.com',
    facebook: 'https://facebook.com'
  };

  const contacts = shop.contacts || {
    phone1: '252 048 754',
    phone2: '252 048 754'
  };

  const currentDayIndex = new Date().getDay() === 0 ? 6 : new Date().getDay() - 1; // 0 for Monday, 6 for Sunday

  const copyToClipboard = (text: string) => {
    navigator.clipboard.writeText(text);
  };

  return (
    <div className="flex flex-col gap-8 text-slate-900">
      {/* Horário de atendimento */}
      <section>
        <h3 className="text-xl font-bold mb-4">Horário de atendimento</h3>
        <div className="flex flex-col gap-3">
          {schedule.map((slot, i) => (
            <div key={i} className="flex items-center justify-between text-base">
              <div className="flex items-center gap-2">
                <span className={i === currentDayIndex ? 'text-indigo-600 font-bold' : 'text-slate-500'}>{slot.day}</span>
                {i === currentDayIndex && (
                  <span className="px-2 py-0.5 bg-indigo-100 text-indigo-700 rounded-md text-xs font-bold">Hoje</span>
                )}
              </div>
              <span className="text-slate-700 font-medium">
                {slot.closed ? 'Fechado' : `${slot.open} - ${slot.close}`}
              </span>
            </div>
          ))}
        </div>
      </section>

      <hr className="border-slate-200" />

      {/* Formas de pagamento */}
      <section>
        <h3 className="text-xl font-bold mb-4">Formas de pagamento</h3>
        <div className="flex flex-wrap gap-3">
          {paymentMethods.map((method, i) => (
            <span key={i} className="px-4 py-2 bg-white border border-slate-200 rounded-full text-sm text-slate-700 font-medium shadow-sm">
              {method}
            </span>
          ))}
        </div>
      </section>

      <hr className="border-slate-200" />

      {/* Redes Sociais */}
      <section>
        <h3 className="text-xl font-bold mb-4">Redes Sociais</h3>
        <div className="flex gap-4">
          {socials.whatsapp && (
            <a href={socials.whatsapp} target="_blank" rel="noreferrer" className="w-12 h-12 flex items-center justify-center rounded-full bg-white border border-slate-200 text-slate-600 hover:text-indigo-600 hover:border-indigo-200 shadow-sm transition-colors">
              <Smartphone size={22} />
            </a>
          )}
          {socials.instagram && (
            <a href={socials.instagram} target="_blank" rel="noreferrer" className="w-12 h-12 flex items-center justify-center rounded-full bg-white border border-slate-200 text-slate-600 hover:text-indigo-600 hover:border-indigo-200 shadow-sm transition-colors">
              <Instagram size={22} />
            </a>
          )}
          {socials.facebook && (
            <a href={socials.facebook} target="_blank" rel="noreferrer" className="w-12 h-12 flex items-center justify-center rounded-full bg-white border border-slate-200 text-slate-600 hover:text-indigo-600 hover:border-indigo-200 shadow-sm transition-colors">
              <Facebook size={22} />
            </a>
          )}
        </div>
      </section>

      <hr className="border-slate-200" />

      {/* Contacto */}
      <section>
        <h3 className="text-xl font-bold mb-4">Contacto</h3>
        <div className="flex flex-col gap-3">
          {contacts.phone1 && (
            <a href={`tel:${contacts.phone1.replace(/\D/g, '')}`} className="flex items-center justify-between p-4 bg-white border border-slate-200 shadow-sm rounded-2xl group hover:border-indigo-300 hover:shadow-md transition-all">
              <div className="flex items-center gap-4">
                <div className="w-10 h-10 flex items-center justify-center bg-indigo-50 border border-indigo-100 rounded-full text-indigo-600 transition-colors">
                  <Smartphone size={20} />
                </div>
                <span className="text-slate-700 font-bold text-lg group-hover:text-indigo-700 transition-colors">{contacts.phone1}</span>
              </div>
              <div className="text-indigo-400 bg-indigo-50 p-2 rounded-xl group-hover:bg-indigo-600 group-hover:text-white transition-colors">
                <Phone size={20} />
              </div>
            </a>
          )}
          {contacts.phone2 && (
            <a href={`tel:${contacts.phone2.replace(/\D/g, '')}`} className="flex items-center justify-between p-4 bg-white border border-slate-200 shadow-sm rounded-2xl group hover:border-indigo-300 hover:shadow-md transition-all">
              <div className="flex items-center gap-4">
                <div className="w-10 h-10 flex items-center justify-center bg-indigo-50 border border-indigo-100 rounded-full text-indigo-600 transition-colors">
                  <Phone size={20} />
                </div>
                <span className="text-slate-700 font-bold text-lg group-hover:text-indigo-700 transition-colors">{contacts.phone2}</span>
              </div>
              <div className="text-indigo-400 bg-indigo-50 p-2 rounded-xl group-hover:bg-indigo-600 group-hover:text-white transition-colors">
                <Phone size={20} />
              </div>
            </a>
          )}
        </div>
      </section>
    </div>
  );
};
