'use client'

import { useState, useEffect } from 'react'
import { toast } from 'react-hot-toast'
import {
  Plus,
  Edit,
  Trash2,
  Search,
  X,
  Calendar,
  User,
  Building2,
  Loader2,
  ExternalLink
} from 'lucide-react'
import { contactsAPI } from '@/lib/api/contacts'
import { format } from 'date-fns'
import Link from 'next/link'

interface Relationship {
  id: string
  fromContactId: string
  toContactId: string
  type: string
  startDate: string
  endDate?: string
  notes?: string
  isActive: boolean
  fromContact: {
    id: string
    uniqueContactId: string
    type: string
    name: string
    email?: string
    phone?: string
    status: string
  }
  toContact: {
    id: string
    uniqueContactId: string
    type: string
    name: string
    email?: string
    phone?: string
    status: string
  }
}

interface RelationshipManagerProps {
  contactId: string
}

const RELATIONSHIP_TYPES = [
  { value: 'REPRESENTATIVE', label: 'Representative - ممثل' },
  { value: 'PARTNER', label: 'Partner - شريك' },
  { value: 'SUPPLIER', label: 'Supplier - مورد' },
  { value: 'EMPLOYEE', label: 'Employee - موظف' },
  { value: 'SUBSIDIARY', label: 'Subsidiary - فرع' },
  { value: 'BRANCH', label: 'Branch - فرع' },
  { value: 'PARENT_COMPANY', label: 'Parent Company - شركة أم' },
  { value: 'CUSTOMER', label: 'Customer - عميل' },
  { value: 'VENDOR', label: 'Vendor - بائع' },
  { value: 'OTHER', label: 'Other - أخرى' },
]

export default function RelationshipManager({ contactId }: RelationshipManagerProps) {
  const [relationships, setRelationships] = useState<Relationship[]>([])
  const [loading, setLoading] = useState(true)
  const [showAddModal, setShowAddModal] = useState(false)
  const [showEditModal, setShowEditModal] = useState(false)
  const [selectedRelationship, setSelectedRelationship] = useState<Relationship | null>(null)
  const [submitting, setSubmitting] = useState(false)

  // Form state
  const [searchTerm, setSearchTerm] = useState('')
  const [searchResults, setSearchResults] = useState<any[]>([])
  const [searching, setSearching] = useState(false)
  const [formData, setFormData] = useState({
    toContactId: '',
    type: 'REPRESENTATIVE',
    startDate: new Date().toISOString().split('T')[0],
    endDate: '',
    notes: ''
  })

  useEffect(() => {
    fetchRelationships()
  }, [contactId])

  const fetchRelationships = async () => {
    setLoading(true)
    try {
      const data = await contactsAPI.getRelationships(contactId)
      setRelationships(data)
    } catch (error: any) {
      toast.error('Failed to load relationships')
    } finally {
      setLoading(false)
    }
  }

  // Search contacts with debouncing
  useEffect(() => {
    if (!searchTerm || searchTerm.length < 2) {
      setSearchResults([])
      return
    }

    const debounce = setTimeout(async () => {
      setSearching(true)
      try {
        const data = await contactsAPI.getAll({ search: searchTerm, pageSize: 10 })
        setSearchResults(data.contacts.filter(c => c.id !== contactId))
      } catch (error) {
        console.error('Search error:', error)
      } finally {
        setSearching(false)
      }
    }, 500)

    return () => clearTimeout(debounce)
  }, [searchTerm, contactId])

  const resetForm = () => {
    setFormData({
      toContactId: '',
      type: 'REPRESENTATIVE',
      startDate: new Date().toISOString().split('T')[0],
      endDate: '',
      notes: ''
    })
    setSearchTerm('')
    setSearchResults([])
    setSelectedRelationship(null)
  }

  const handleAdd = async () => {
    if (!formData.toContactId) {
      toast.error('Please select a contact')
      return
    }

    setSubmitting(true)
    try {
      await contactsAPI.addRelationship(contactId, {
        toContactId: formData.toContactId,
        type: formData.type,
        startDate: formData.startDate,
        endDate: formData.endDate || undefined,
        notes: formData.notes || undefined
      })
      toast.success('Relationship added successfully')
      setShowAddModal(false)
      resetForm()
      fetchRelationships()
    } catch (error: any) {
      toast.error(error.response?.data?.message || 'Failed to add relationship')
    } finally {
      setSubmitting(false)
    }
  }

  const handleEdit = async () => {
    if (!selectedRelationship) return

    setSubmitting(true)
    try {
      await contactsAPI.updateRelationship(
        contactId,
        selectedRelationship.id,
        {
          type: formData.type,
          startDate: formData.startDate,
          endDate: formData.endDate || undefined,
          notes: formData.notes || undefined
        }
      )
      toast.success('Relationship updated successfully')
      setShowEditModal(false)
      resetForm()
      fetchRelationships()
    } catch (error: any) {
      toast.error(error.response?.data?.message || 'Failed to update relationship')
    } finally {
      setSubmitting(false)
    }
  }

  const handleDelete = async (relationship: Relationship) => {
    if (!confirm('Are you sure you want to delete this relationship?')) return

    try {
      await contactsAPI.deleteRelationship(contactId, relationship.id)
      toast.success('Relationship deleted successfully')
      fetchRelationships()
    } catch (error: any) {
      toast.error('Failed to delete relationship')
    }
  }

  const openEditModal = (relationship: Relationship) => {
    setSelectedRelationship(relationship)
    setFormData({
      toContactId: relationship.toContactId,
      type: relationship.type,
      startDate: relationship.startDate.split('T')[0],
      endDate: relationship.endDate ? relationship.endDate.split('T')[0] : '',
      notes: relationship.notes || ''
    })
    setShowEditModal(true)
  }

  const getRelatedContact = (relationship: Relationship) => {
    return relationship.fromContactId === contactId 
      ? relationship.toContact 
      : relationship.fromContact
  }

  const getRelationshipDirection = (relationship: Relationship) => {
    return relationship.fromContactId === contactId ? '→' : '←'
  }

  if (loading) {
    return (
      <div className="flex items-center justify-center py-12">
        <Loader2 className="animate-spin text-blue-600" size={32} />
      </div>
    )
  }

  return (
    <div className="space-y-4">
      {/* Header */}
      <div className="flex items-center justify-between">
        <h3 className="text-lg font-semibold text-gray-900">
          العلاقات - Relationships ({relationships.length})
        </h3>
        <button
          onClick={() => {
            resetForm()
            setShowAddModal(true)
          }}
          className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
        >
          <Plus size={18} />
          Add Relationship
        </button>
      </div>

      {/* Relationships List */}
      {relationships.length === 0 ? (
        <div className="text-center py-12 bg-gray-50 rounded-lg">
          <User className="mx-auto h-12 w-12 text-gray-400 mb-4" />
          <p className="text-gray-600">No relationships found</p>
          <button
            onClick={() => setShowAddModal(true)}
            className="mt-4 text-blue-600 hover:text-blue-700 font-medium"
          >
            Add your first relationship
          </button>
        </div>
      ) : (
        <div className="bg-white border rounded-lg overflow-hidden">
          <table className="min-w-full divide-y divide-gray-200">
            <thead className="bg-gray-50">
              <tr>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
                  Contact
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
                  Type
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
                  Start Date
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
                  End Date
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
                  Status
                </th>
                <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">
                  Actions
                </th>
              </tr>
            </thead>
            <tbody className="bg-white divide-y divide-gray-200">
              {relationships.map(relationship => {
                const relatedContact = getRelatedContact(relationship)
                return (
                  <tr key={relationship.id} className="hover:bg-gray-50">
                    <td className="px-6 py-4">
                      <div className="flex items-center gap-3">
                        <span className="text-gray-500">
                          {getRelationshipDirection(relationship)}
                        </span>
                        {relatedContact.type === 'INDIVIDUAL' ? (
                          <User size={18} className="text-gray-400" />
                        ) : (
                          <Building2 size={18} className="text-gray-400" />
                        )}
                        <div>
                          <Link
                            href={`/contacts/${relatedContact.id}`}
                            className="font-medium text-gray-900 hover:text-blue-600 flex items-center gap-1"
                          >
                            {relatedContact.name}
                            <ExternalLink size={14} />
                          </Link>
                          <p className="text-sm text-gray-600">{relatedContact.email || relatedContact.phone}</p>
                        </div>
                      </div>
                    </td>
                    <td className="px-6 py-4">
                      <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                        {relationship.type.replace(/_/g, ' ')}
                      </span>
                    </td>
                    <td className="px-6 py-4 text-sm text-gray-600">
                      {format(new Date(relationship.startDate), 'MMM d, yyyy')}
                    </td>
                    <td className="px-6 py-4 text-sm text-gray-600">
                      {relationship.endDate ? format(new Date(relationship.endDate), 'MMM d, yyyy') : '-'}
                    </td>
                    <td className="px-6 py-4">
                      <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
                        relationship.isActive 
                          ? 'bg-green-100 text-green-800' 
                          : 'bg-gray-100 text-gray-800'
                      }`}>
                        {relationship.isActive ? 'Active' : 'Inactive'}
                      </span>
                    </td>
                    <td className="px-6 py-4 text-right">
                      <div className="flex items-center justify-end gap-2">
                        <button
                          onClick={() => openEditModal(relationship)}
                          className="text-blue-600 hover:text-blue-900"
                        >
                          <Edit size={18} />
                        </button>
                        <button
                          onClick={() => handleDelete(relationship)}
                          className="text-red-600 hover:text-red-900"
                        >
                          <Trash2 size={18} />
                        </button>
                      </div>
                    </td>
                  </tr>
                )
              })}
            </tbody>
          </table>
        </div>
      )}

      {/* Add Modal */}
      {showAddModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] overflow-hidden flex flex-col">
            <div className="flex items-center justify-between p-6 border-b">
              <h2 className="text-xl font-bold text-gray-900">
                إضافة علاقة - Add Relationship
              </h2>
              <button onClick={() => { setShowAddModal(false); resetForm(); }} className="text-gray-400 hover:text-gray-600">
                <X size={24} />
              </button>
            </div>

            <div className="flex-1 overflow-y-auto p-6 space-y-4">
              {/* Contact Search */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Select Contact <span className="text-red-500">*</span>
                </label>
                <div className="relative">
                  <Search className="absolute left-3 top-3 text-gray-400" size={18} />
                  <input
                    type="text"
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                    placeholder="Search contacts..."
                    className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900"
                  />
                </div>
                {searching && (
                  <p className="text-sm text-gray-600 mt-2">Searching...</p>
                )}
                {searchResults.length > 0 && (
                  <div className="mt-2 border rounded-lg max-h-48 overflow-y-auto">
                    {searchResults.map(contact => (
                      <button
                        key={contact.id}
                        onClick={() => {
                          setFormData({ ...formData, toContactId: contact.id })
                          setSearchTerm(contact.name)
                          setSearchResults([])
                        }}
                        className="w-full text-left p-3 hover:bg-gray-50 border-b last:border-b-0"
                      >
                        <div className="flex items-center gap-2">
                          {contact.type === 'INDIVIDUAL' ? <User size={16} /> : <Building2 size={16} />}
                          <div>
                            <p className="font-medium text-gray-900">{contact.name}</p>
                            <p className="text-sm text-gray-600">{contact.email || contact.phone}</p>
                          </div>
                        </div>
                      </button>
                    ))}
                  </div>
                )}
              </div>

              {/* Relationship Type */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Relationship Type <span className="text-red-500">*</span>
                </label>
                <select
                  value={formData.type}
                  onChange={(e) => setFormData({ ...formData, type: e.target.value })}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-gray-900"
                >
                  {RELATIONSHIP_TYPES.map(type => (
                    <option key={type.value} value={type.value}>{type.label}</option>
                  ))}
                </select>
              </div>

              {/* Start Date */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Start Date <span className="text-red-500">*</span>
                </label>
                <input
                  type="date"
                  value={formData.startDate}
                  onChange={(e) => setFormData({ ...formData, startDate: e.target.value })}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900"
                />
              </div>

              {/* End Date */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  End Date (Optional)
                </label>
                <input
                  type="date"
                  value={formData.endDate}
                  onChange={(e) => setFormData({ ...formData, endDate: e.target.value })}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900"
                />
              </div>

              {/* Notes */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Notes (Optional)
                </label>
                <textarea
                  value={formData.notes}
                  onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
                  rows={3}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900"
                  placeholder="Add any notes about this relationship..."
                />
              </div>
            </div>

            <div className="border-t p-6 flex justify-end gap-3">
              <button
                onClick={() => { setShowAddModal(false); resetForm(); }}
                className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50"
                disabled={submitting}
              >
                Cancel
              </button>
              <button
                onClick={handleAdd}
                disabled={submitting || !formData.toContactId}
                className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed"
              >
                {submitting ? (
                  <>
                    <Loader2 className="animate-spin" size={18} />
                    Adding...
                  </>
                ) : (
                  'Add Relationship'
                )}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Edit Modal */}
      {showEditModal && selectedRelationship && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-lg shadow-xl w-full max-w-2xl">
            <div className="flex items-center justify-between p-6 border-b">
              <h2 className="text-xl font-bold text-gray-900">
                تعديل العلاقة - Edit Relationship
              </h2>
              <button onClick={() => { setShowEditModal(false); resetForm(); }} className="text-gray-400 hover:text-gray-600">
                <X size={24} />
              </button>
            </div>

            <div className="p-6 space-y-4">
              {/* Contact (Read-only) */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Contact
                </label>
                <div className="px-3 py-2 bg-gray-50 border border-gray-300 rounded-lg text-gray-600">
                  {getRelatedContact(selectedRelationship).name}
                </div>
              </div>

              {/* Relationship Type */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Relationship Type
                </label>
                <select
                  value={formData.type}
                  onChange={(e) => setFormData({ ...formData, type: e.target.value })}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-gray-900"
                >
                  {RELATIONSHIP_TYPES.map(type => (
                    <option key={type.value} value={type.value}>{type.label}</option>
                  ))}
                </select>
              </div>

              {/* Start Date */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Start Date
                </label>
                <input
                  type="date"
                  value={formData.startDate}
                  onChange={(e) => setFormData({ ...formData, startDate: e.target.value })}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900"
                />
              </div>

              {/* End Date */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  End Date
                </label>
                <input
                  type="date"
                  value={formData.endDate}
                  onChange={(e) => setFormData({ ...formData, endDate: e.target.value })}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900"
                />
              </div>

              {/* Notes */}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Notes
                </label>
                <textarea
                  value={formData.notes}
                  onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
                  rows={3}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900"
                />
              </div>
            </div>

            <div className="border-t p-6 flex justify-end gap-3">
              <button
                onClick={() => { setShowEditModal(false); resetForm(); }}
                className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50"
                disabled={submitting}
              >
                Cancel
              </button>
              <button
                onClick={handleEdit}
                disabled={submitting}
                className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed"
              >
                {submitting ? (
                  <>
                    <Loader2 className="animate-spin" size={18} />
                    Updating...
                  </>
                ) : (
                  'Update Relationship'
                )}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}