import Table from '@/components/Table'
import { FC, useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { TickCircle, Copy, CloseCircle, Clock, TickSquare } from 'iconsax-react'
import CreateDomain from './components/CreateDomain'
import { useGetDnsRecords } from './hooks/useDomainData'
import { DnsRecordType } from './types/Types'

const Domain: FC = () => {
  const { t } = useTranslation()
  const [disabled, setDisabled] = useState(false)
  const { data, isLoading } = useGetDnsRecords(disabled)
  const [copiedField, setCopiedField] = useState<string | null>(null)

  useEffect(() => {
    if (data?.data?.overallStatus?.isVerified && !disabled) {
      setDisabled(true)
    }
  }, [data])

  const getStatusIcon = (status: DnsRecordType['status']) => {
    switch (status) {
      case 'VERIFIED':
        return (
          <div className="flex items-center gap-2">
            <TickCircle size={20} color="#22C55E" variant="Bold" />
            <span className="text-green-500 text-xs">{t('domain.status.verified')}</span>
          </div>
        )
      case 'PENDING':
        return (
          <div className="flex items-center gap-2">
            <Clock size={20} color="#F59E0B" variant="Bold" />
            <span className="text-yellow-500 text-xs">{t('domain.status.pending')}</span>
          </div>
        )
      case 'FAILED':
        return (
          <div className="flex items-center gap-2">
            <CloseCircle size={20} color="#EF4444" variant="Bold" />
            <span className="text-red-500 text-xs">{t('domain.status.failed')}</span>
          </div>
        )
      default:
        return null
    }
  }

  const copyToClipboard = (text: string, fieldKey: string) => {
    navigator.clipboard.writeText(text).then(() => {
      setCopiedField(fieldKey)
      setTimeout(() => {
        setCopiedField(null)
      }, 2000)
    })
  }

  const columns = [
    {
      title: t('domain.table.record_type'),
      key: 'type',
      width: '100px',
      align: 'center' as const,
    },
    {
      title: t('domain.table.record_name'),
      key: 'name',
      render: (record: DnsRecordType) => {
        const fieldKey = `name-${record.id}`
        const isCopied = copiedField === fieldKey

        return (
          <div className="flex items-center gap-2">
            <button
              onClick={() => copyToClipboard(record.name, fieldKey)}
              className={`transition-all duration-200 ${isCopied ? 'text-green-500' : 'text-blue-500 hover:text-blue-700'}`}
            >
              {isCopied ? (
                <TickSquare size={16} color='#22C55E' variant="Bold" />
              ) : (
                <Copy size={16} color='#0038FF' />
              )}
            </button>
            <span className="truncate max-w-[200px] dltr">{record.name}</span>
          </div>
        )
      }
    },
    {
      title: t('domain.table.record_value'),
      key: 'value',
      render: (record: DnsRecordType) => {
        const fieldKey = `value-${record.id}`
        const isCopied = copiedField === fieldKey

        return (
          <div className="flex items-center gap-2">
            <button
              onClick={() => copyToClipboard(record.value, fieldKey)}
              className={`transition-all duration-200 ${isCopied ? 'text-green-500' : 'text-blue-500 hover:text-blue-700'}`}
            >
              {isCopied ? (
                <TickSquare size={16} color='#22C55E' variant="Bold" />
              ) : (
                <Copy size={16} color='#0038FF' />
              )}
            </button>
            <span className="truncate max-w-[300px] dltr">{record.value}</span>
          </div>
        )
      }
    },
    {
      title: t('domain.table.priority'),
      key: 'priority',
      width: '80px',
      align: 'center' as const,
      render: (record: DnsRecordType) => (
        <span>{record.priority || '-'}</span>
      )
    },
    {
      title: t('domain.table.ttl'),
      key: 'ttl',
      width: '80px',
      align: 'center' as const,
      render: (record: DnsRecordType) => (
        <span>{record.ttl}</span>
      )
    },
    {
      title: t('domain.table.status'),
      key: 'status',
      render: (record: DnsRecordType) => getStatusIcon(record.status)
    },
  ]

  const dnsRecords = data?.data?.dnsRecords || []

  return (
    <div>
      <CreateDomain />

      <div className='mt-9'>
        <Table
          columns={columns}
          data={dnsRecords}
          className="!mt-0"
          isLoading={isLoading}
        />
      </div>
    </div>
  )
}

export default Domain