import React, { Dispatch, SetStateAction } from 'react'
import { Badge, Modal, ModalBody, ModalHeader } from 'flowbite-react'
import {
  FiFacebook,
  FiGlobe,
  FiInstagram,
  FiMail,
  FiMapPin,
  FiPhone,
  FiTruck,
  FiUser,
} from 'react-icons/fi'

import modalTheme from '@/lib/themes/modal'
import { capitalizeWords } from '@/lib/utils/string'
import { AgentData } from '../types'

interface ModalDetailProps {
  agent: AgentData | null
  modal: ModalState<AgentData>
  setModal: Dispatch<SetStateAction<ModalState<AgentData>>>
}

export default function ModalDetail({
  agent,
  modal,
  setModal,
}: ModalDetailProps) {
  const handleCloseModal = () => {
    setModal({ isOpened: false, type: 'view', data: null })
  }

  return (
    <Modal
      position="center"
      theme={modalTheme.modal}
      dismissible
      show={modal.isOpened && modal.type === 'view'}
      onClose={handleCloseModal}
      size="xl"
    >
      {agent ? (
        <React.Fragment>
          <ModalHeader>
            <div className="flex items-center gap-4 pr-12">
              <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
                <FiUser className="w-6 h-6 text-blue-600" />
              </div>
              <div>
                <h3 className="text-xl font-semibold text-gray-900">
                  {agent.agent_name}
                </h3>
                <Badge
                  color={agent.category === 'driver' ? 'blue' : 'green'}
                  className="text-xs font-medium mt-1 w-fit"
                >
                  {capitalizeWords(agent.category)}
                </Badge>
              </div>
            </div>
          </ModalHeader>

          <ModalBody className="p-6">
            <div className="space-y-4">
              {/* Contact Information */}
              <div className="bg-blue-50 border border-blue-100 rounded-lg p-4">
                <h4 className="text-sm font-semibold text-blue-800 uppercase tracking-wide mb-3 flex items-center gap-2">
                  <div className="w-2 h-2 bg-blue-600 rounded-full"></div>
                  Contact Information
                </h4>
                <div className="space-y-3">
                  <div className="flex items-center gap-3">
                    <FiPhone className="w-4 h-4 text-blue-600" />
                    <div>
                      <p className="text-sm text-blue-700">Phone</p>
                      <p className="text-gray-900 font-semibold">
                        {agent.phone_number}
                      </p>
                    </div>
                  </div>
                  <div className="flex items-center gap-3">
                    <FiMail className="w-4 h-4 text-blue-600" />
                    <div>
                      <p className="text-sm text-blue-700">Email</p>
                      <p className="text-gray-900 font-semibold">
                        {agent.email_address}
                      </p>
                    </div>
                  </div>
                  <div className="flex items-start gap-3">
                    <FiMapPin className="w-4 h-4 text-blue-600 mt-1" />
                    <div>
                      <p className="text-sm text-blue-700">Address</p>
                      <p className="text-gray-900 font-semibold">
                        {agent.address}
                      </p>
                    </div>
                  </div>
                </div>
              </div>

              {/* Guest Market */}
              <div className="bg-green-50 border border-green-100 rounded-lg p-4">
                <h4 className="text-sm font-semibold text-green-800 uppercase tracking-wide mb-3 flex items-center gap-2">
                  <div className="w-2 h-2 bg-green-600 rounded-full"></div>
                  Guest Market
                </h4>
                <p className="text-gray-900 font-semibold">
                  {agent.guest_market}
                </p>
              </div>

              {/* Social Media & Website */}
              {(agent.instagram || agent.website || agent.facebook) && (
                <div className="bg-purple-50 border border-purple-100 rounded-lg p-4">
                  <h4 className="text-sm font-semibold text-purple-800 uppercase tracking-wide mb-3 flex items-center gap-2">
                    <div className="w-2 h-2 bg-purple-600 rounded-full"></div>
                    Social Media
                  </h4>
                  <div className="space-y-2">
                    {agent.instagram && (
                      <div className="flex items-center gap-3">
                        <FiInstagram className="w-4 h-4 text-purple-600" />
                        <div>
                          <p className="text-sm text-purple-700">Instagram</p>
                          <a
                            href={agent.instagram}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="text-blue-600 hover:text-blue-700 font-semibold hover:underline"
                          >
                            {agent.instagram}
                          </a>
                        </div>
                      </div>
                    )}
                    {agent.website && (
                      <div className="flex items-center gap-3">
                        <FiGlobe className="w-4 h-4 text-purple-600" />
                        <div>
                          <p className="text-sm text-purple-700">Website</p>
                          <a
                            href={agent.website}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="text-blue-600 hover:text-blue-700 font-semibold hover:underline"
                          >
                            {agent.website}
                          </a>
                        </div>
                      </div>
                    )}
                    {agent.facebook && (
                      <div className="flex items-center gap-3">
                        <FiFacebook className="w-4 h-4 text-purple-600" />
                        <div>
                          <p className="text-sm text-purple-700">Facebook</p>
                          <a
                            href={agent.facebook}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="text-blue-600 hover:text-blue-700 font-semibold hover:underline"
                          >
                            {agent.facebook}
                          </a>
                        </div>
                      </div>
                    )}
                  </div>
                </div>
              )}

              {/* Driver Information */}
              {agent.category === 'driver' &&
                (agent.plate_number || agent.car_type) && (
                  <div className="bg-orange-50 border border-orange-100 rounded-lg p-4">
                    <h4 className="text-sm font-semibold text-orange-800 uppercase tracking-wide mb-3 flex items-center gap-2">
                      <div className="w-2 h-2 bg-orange-600 rounded-full"></div>
                      Vehicle Information
                    </h4>
                    <div className="space-y-3">
                      {agent.plate_number && (
                        <div className="flex items-center gap-3">
                          <FiTruck className="w-4 h-4 text-orange-600" />
                          <div>
                            <p className="text-sm text-orange-700">
                              Plate Number
                            </p>
                            <p className="text-gray-900 font-semibold font-mono text-lg">
                              {agent.plate_number}
                            </p>
                          </div>
                        </div>
                      )}
                      {agent.car_type && (
                        <div className="flex items-center gap-3">
                          <FiTruck className="w-4 h-4 text-orange-600" />
                          <div>
                            <p className="text-sm text-orange-700">Car Type</p>
                            <p className="text-gray-900 font-semibold">
                              {agent.car_type}
                            </p>
                          </div>
                        </div>
                      )}
                    </div>
                  </div>
                )}
            </div>
          </ModalBody>
        </React.Fragment>
      ) : null}
    </Modal>
  )
}