import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { Users, LogOut, Search, Eye, Mail, Phone, Building2, User, Calendar } from 'lucide-react';

interface Contact {
  id: string;
  first_name: string;
  last_name: string;
  email?: string;
  phone?: string;
  company?: string;
  position?: string;
  created_at: string;
}

export function GuestContactsPage() {
  const navigate = useNavigate();
  const [contacts, setContacts] = useState<Contact[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [search, setSearch] = useState('');
  const [guestInfo, setGuestInfo] = useState<{ name: string; email: string } | null>(null);

  useEffect(() => {
    // Fetch guest info
    fetch('/api/v1/guest/me', { credentials: 'include' })
      .then((res) => {
        if (!res.ok) throw new Error('Not authenticated');
        return res.json();
      })
      .then((data) => setGuestInfo({ name: data.name, email: data.email }))
      .catch(() => {
        navigate('/guest/login');
      });
  }, [navigate]);

  useEffect(() => {
    fetchContacts();
  }, []);

  const fetchContacts = async (query?: string) => {
    setLoading(true);
    setError(null);
    try {
      const url = query
        ? `/api/v1/contacts?search=${encodeURIComponent(query)}&limit=50`
        : '/api/v1/contacts?limit=50';
      const response = await fetch(url, {
        credentials: 'include',
        headers: {
          'X-CSRF-Token': '',
        },
      });
      if (!response.ok) {
        throw new Error('Failed to load contacts');
      }
      const data = await response.json();
      setContacts(data.items || data.data || data || []);
    } catch (err: any) {
      setError(err.message || 'Failed to load contacts');
    } finally {
      setLoading(false);
    }
  };

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault();
    fetchContacts(search);
  };

  const handleLogout = async () => {
    try {
      await fetch('/api/v1/guest/logout', {
        method: 'POST',
        credentials: 'include',
      });
    } catch {
      // ignore
    }
    navigate('/guest/login');
  };

  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      {/* Header */}
      <header className="bg-white dark:bg-gray-800 shadow">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center">
              <Users className="h-8 w-8 text-primary-600 mr-3" />
              <h1 className="text-xl font-semibold text-gray-900 dark:text-white">
                Shared Contacts
              </h1>
            </div>
            <div className="flex items-center space-x-4">
              {guestInfo && (
                <span className="text-sm text-gray-600 dark:text-gray-400">
                  {guestInfo.name} ({guestInfo.email})
                </span>
              )}
              <button
                onClick={handleLogout}
                className="inline-flex items-center px-3 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600"
              >
                <LogOut className="h-4 w-4 mr-2" />
                Logout
              </button>
            </div>
          </div>
        </div>
      </header>

      {/* Search */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <form onSubmit={handleSearch} className="mb-6">
          <div className="relative">
            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <Search className="h-5 w-5 text-gray-400" />
            </div>
            <input
              type="text"
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              placeholder="Search shared contacts..."
              className="block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-white dark:bg-gray-800 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
            />
          </div>
        </form>

        {/* Error */}
        {error && (
          <div className="rounded-md bg-red-50 dark:bg-red-900/20 p-4 mb-6">
            <p className="text-sm text-red-800 dark:text-red-200">{error}</p>
          </div>
        )}

        {/* Loading */}
        {loading && (
          <div className="flex justify-center py-12">
            <svg className="animate-spin h-8 w-8 text-primary-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
            </svg>
          </div>
        )}

        {/* Contacts Grid */}
        {!loading && !error && (
          <>
            <p className="text-sm text-gray-500 dark:text-gray-400 mb-4">
              {contacts.length} contact{contacts.length !== 1 ? 's' : ''} shared with you
            </p>
            {contacts.length === 0 ? (
              <div className="text-center py-12">
                <Users className="mx-auto h-12 w-12 text-gray-400" />
                <h3 className="mt-2 text-sm font-medium text-gray-900 dark:text-white">No contacts</h3>
                <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
                  No contacts have been shared with you yet.
                </p>
              </div>
            ) : (
              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
                {contacts.map((contact) => (
                  <div
                    key={contact.id}
                    className="bg-white dark:bg-gray-800 shadow rounded-lg p-6 hover:shadow-md transition-shadow"
                  >
                    <div className="flex items-start justify-between">
                      <div className="flex items-center">
                        <div className="h-10 w-10 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center">
                          <User className="h-5 w-5 text-primary-600 dark:text-primary-300" />
                        </div>
                        <div className="ml-3">
                          <h3 className="text-sm font-medium text-gray-900 dark:text-white">
                            {contact.first_name} {contact.last_name}
                          </h3>
                          {contact.company && (
                            <p className="text-xs text-gray-500 dark:text-gray-400 flex items-center mt-1">
                              <Building2 className="h-3 w-3 mr-1" />
                              {contact.company}
                            </p>
                          )}
                        </div>
                      </div>
                      <Eye className="h-4 w-4 text-gray-400" title="Read-only" />
                    </div>

                    <div className="mt-4 space-y-2">
                      {contact.email && (
                        <p className="text-sm text-gray-600 dark:text-gray-300 flex items-center">
                          <Mail className="h-4 w-4 mr-2 text-gray-400" />
                          {contact.email}
                        </p>
                      )}
                      {contact.phone && (
                        <p className="text-sm text-gray-600 dark:text-gray-300 flex items-center">
                          <Phone className="h-4 w-4 mr-2 text-gray-400" />
                          {contact.phone}
                        </p>
                      )}
                      {contact.position && (
                        <p className="text-sm text-gray-600 dark:text-gray-300 flex items-center">
                          <Building2 className="h-4 w-4 mr-2 text-gray-400" />
                          {contact.position}
                        </p>
                      )}
                    </div>

                    <div className="mt-4 pt-3 border-t border-gray-100 dark:border-gray-700">
                      <p className="text-xs text-gray-400 flex items-center">
                        <Calendar className="h-3 w-3 mr-1" />
                        Created: {new Date(contact.created_at).toLocaleDateString()}
                      </p>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </>
        )}
      </div>
    </div>
  );
}