'use client';

import { useState, useEffect } from 'react';
import { useLanguage } from '@/context/LanguageContext';
import { contactsApi, Contact } from '@/lib/api';
import Card from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import { EnvelopeIcon, EnvelopeOpenIcon, CheckIcon } from '@heroicons/react/24/outline';
import toast from 'react-hot-toast';

export default function AdminContactsPage() {
  const { t, locale } = useLanguage();
  const [contacts, setContacts] = useState<Contact[]>([]);
  const [loading, setLoading] = useState(true);
  const [statusFilter, setStatusFilter] = useState<string>('');
  const [selectedContact, setSelectedContact] = useState<Contact | null>(null);

  useEffect(() => {
    loadContacts();
  }, [statusFilter]);

  const loadContacts = async () => {
    try {
      const { contacts } = await contactsApi.getAll(statusFilter || undefined);
      setContacts(contacts);
    } catch (error) {
      toast.error('Failed to load contacts');
    } finally {
      setLoading(false);
    }
  };

  const handleStatusChange = async (id: string, status: string) => {
    try {
      await contactsApi.updateStatus(id, status);
      toast.success('Status updated');
      loadContacts();
      if (selectedContact?.id === id) {
        setSelectedContact({ ...selectedContact, status: status as any });
      }
    } catch (error) {
      toast.error('Failed to update status');
    }
  };

  const formatDate = (dateStr: string) => {
    return new Date(dateStr).toLocaleDateString(locale === 'es' ? 'es-ES' : 'en-US', {
      month: 'short',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit',
      timeZone: 'America/Asuncion',
    });
  };

  const getStatusBadge = (status: string) => {
    const styles: Record<string, string> = {
      new: 'badge-info',
      read: 'badge-warning',
      replied: 'badge-success',
    };
    return <span className={`badge ${styles[status] || 'badge-gray'}`}>{status}</span>;
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center py-12">
        <div className="animate-spin w-8 h-8 border-4 border-primary-yellow border-t-transparent rounded-full" />
      </div>
    );
  }

  return (
    <div>
      <div className="flex items-center justify-between mb-6">
        <h1 className="text-2xl font-bold text-primary-dark">{t('admin.nav.contacts')}</h1>
      </div>

      {/* Filters */}
      <Card className="p-4 mb-6">
        <div className="flex flex-wrap gap-4">
          <div>
            <label className="block text-sm font-medium mb-1">Status</label>
            <select
              value={statusFilter}
              onChange={(e) => setStatusFilter(e.target.value)}
              className="px-4 py-2 rounded-btn border border-secondary-light-gray min-w-[150px]"
            >
              <option value="">All</option>
              <option value="new">New</option>
              <option value="read">Read</option>
              <option value="replied">Replied</option>
            </select>
          </div>
        </div>
      </Card>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Messages List */}
        <div className="lg:col-span-1">
          <Card className="divide-y divide-secondary-light-gray max-h-[600px] overflow-y-auto">
            {contacts.length === 0 ? (
              <div className="p-8 text-center text-gray-500">
                <EnvelopeIcon className="w-12 h-12 mx-auto mb-2 text-gray-300" />
                <p>No messages</p>
              </div>
            ) : (
              contacts.map((contact) => (
                <button
                  key={contact.id}
                  onClick={() => {
                    setSelectedContact(contact);
                    if (contact.status === 'new') {
                      handleStatusChange(contact.id, 'read');
                    }
                  }}
                  className={`w-full text-left p-4 hover:bg-gray-50 transition-colors ${
                    selectedContact?.id === contact.id ? 'bg-secondary-gray' : ''
                  }`}
                >
                  <div className="flex items-start justify-between gap-2">
                    <div className="flex items-center gap-2">
                      {contact.status === 'new' ? (
                        <EnvelopeIcon className="w-4 h-4 text-secondary-blue" />
                      ) : (
                        <EnvelopeOpenIcon className="w-4 h-4 text-gray-400" />
                      )}
                      <span className={`font-medium text-sm ${contact.status === 'new' ? 'text-primary-dark' : 'text-gray-600'}`}>
                        {contact.name}
                      </span>
                    </div>
                    {getStatusBadge(contact.status)}
                  </div>
                  <p className="mt-1 text-xs text-gray-500">{contact.email}</p>
                  <p className="mt-1 text-sm text-gray-600 truncate">{contact.message}</p>
                  <p className="mt-2 text-xs text-gray-400">{formatDate(contact.createdAt)}</p>
                </button>
              ))
            )}
          </Card>
        </div>

        {/* Message Detail */}
        <div className="lg:col-span-2">
          <Card className="p-6 min-h-[400px]">
            {selectedContact ? (
              <div>
                <div className="flex items-start justify-between mb-6">
                  <div>
                    <h2 className="text-xl font-bold">{selectedContact.name}</h2>
                    <a 
                      href={`mailto:${selectedContact.email}`}
                      className="text-secondary-blue hover:underline"
                    >
                      {selectedContact.email}
                    </a>
                  </div>
                  <div className="flex items-center gap-2">
                    {selectedContact.status !== 'replied' && (
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={() => handleStatusChange(selectedContact.id, 'replied')}
                      >
                        <CheckIcon className="w-4 h-4 mr-1" />
                        Mark as Replied
                      </Button>
                    )}
                    <a href={`mailto:${selectedContact.email}`}>
                      <Button size="sm">
                        Reply
                      </Button>
                    </a>
                  </div>
                </div>
                
                <div className="border-t border-secondary-light-gray pt-6">
                  <p className="text-sm text-gray-500 mb-2">
                    Received: {formatDate(selectedContact.createdAt)}
                  </p>
                  <div className="prose prose-sm max-w-none">
                    <p className="whitespace-pre-wrap text-gray-700">{selectedContact.message}</p>
                  </div>
                </div>
              </div>
            ) : (
              <div className="flex items-center justify-center h-full text-gray-500">
                <div className="text-center">
                  <EnvelopeIcon className="w-16 h-16 mx-auto mb-4 text-gray-300" />
                  <p>Select a message to view</p>
                </div>
              </div>
            )}
          </Card>
        </div>
      </div>
    </div>
  );
}