import { useState } from 'react';
import Layout from "../../../components/layout";
import ProtectedRoute from '../../../components/protectedRoute';
import { UserRole } from '@prisma/client';
import axiosServer from '../../../src/axiosServer';
import common from '../../../src/helpers/common';

function ContactsPage({ publishers }) {
    const [searchQuery, setSearchQuery] = useState('');

    const filteredPublishers = publishers.filter((publisher) =>
        publisher.firstName.toLowerCase().includes(searchQuery.toLowerCase()) ||
        publisher.lastName.toLowerCase().includes(searchQuery.toLowerCase()) ||
        publisher.email.toLowerCase().includes(searchQuery.toLowerCase()) ||
        publisher.phone?.toLowerCase().includes(searchQuery.toLowerCase())
    );

    return (
        <Layout>
            <ProtectedRoute allowedRoles={[UserRole.ADMIN, UserRole.POWERUSER, UserRole.USER]}>
                <div className="container mx-auto p-4">
                    <h1 className="text-xl font-semibold mb-4">Участници</h1>
                    <input
                        type="text"
                        placeholder="Търси по име, имейл или телефон..."
                        value={searchQuery}
                        onChange={(e) => setSearchQuery(e.target.value)}
                        className="border border-gray-300 rounded-md px-2 py-2 mb-4 w-full text-base md:text-sm"
                    />
                    <div className="overflow-x-auto">
                        <table className="w-full text-left border-collapse">
                            <thead>
                                <tr>
                                    <th className="border-b font-medium p-4 pl-8 pt-0 pb-3">Име</th>
                                    <th className="border-b font-medium p-4 pt-0 pb-3">Имейл</th>
                                    <th className="border-b font-medium p-4 pt-0 pb-3">Телефон</th>
                                </tr>
                            </thead>
                            <tbody>
                                {filteredPublishers.map((publisher) => (
                                    <tr key={publisher.id}>
                                        <td className="border-b p-4 pl-8">{publisher.firstName} {publisher.lastName}</td>
                                        <td className="border-b p-4">
                                            <a href={`mailto:${publisher.email}`} className="text-blue-500">{publisher.email}</a>
                                        </td>
                                        <td className="border-b p-4">
                                            <div className="flex items-center justify-between">
                                                <span className={common.isValidPhoneNumber(publisher.phone) ? '' : 'text-red-500'}>{publisher.phone}</span>
                                                <div className="flex items-center">
                                                    <a href={`tel:${publisher.phone}`} className="inline-block p-2 mr-2">
                                                        <i className="fas fa-phone-alt text-blue-500 text-xl" title="Обаждане"></i>
                                                    </a>
                                                    <a href={`https://wa.me/${publisher.phone}`} className="inline-block p-2 mr-2">
                                                        <i className="fab fa-whatsapp text-green-500 text-xl" title="WhatsApp"></i>
                                                    </a>
                                                    {publisher.phone ? (
                                                        <a href={`viber://chat/?number=%2B${publisher.phone.startsWith('+') ? publisher.phone.substring(1) : publisher.phone}`} className="inline-block p-2">
                                                            <i className="fab fa-viber text-purple-500 text-xl" title="Viber"></i>
                                                        </a>
                                                    ) : null}
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    </div>
                </div>
            </ProtectedRoute>
        </Layout>
    );
}


export default ContactsPage;

export const getServerSideProps = async (context) => {
    const axios = await axiosServer(context);
    const { data: publishers } = await axios.get('/api/data/publishers?select=id,firstName,lastName,email,phone');

    return {
        props: {
            publishers,
        },
    };
};