import { useState, useEffect } from 'react'
import { dnsAPI } from '../services/api'

function DomainList() {
  const [domains, setDomains] = useState([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)

  useEffect(() => {
    fetchDomains()
  }, [])

  const fetchDomains = async () => {
    setLoading(true)
    setError(null)

    try {
      const response = await dnsAPI.getDomains()
      setDomains(response.data)
    } catch (err) {
      setError(err.response?.data?.error || 'Failed to fetch domains')
    } finally {
      setLoading(false)
    }
  }

  const getStatusBadge = (status) => {
    const colors = {
      active: 'bg-green-100 text-green-800',
      pending: 'bg-yellow-100 text-yellow-800',
      error: 'bg-red-100 text-red-800',
    }
    return colors[status] || 'bg-gray-100 text-gray-800'
  }

  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto"></div>
          <p className="mt-4 text-gray-600">Loading domains...</p>
        </div>
      </div>
    )
  }

  if (error) {
    return (
      <div className="card">
        <div className="alert alert-error">
          <strong>Error:</strong> {error}
        </div>
        <button onClick={fetchDomains} className="btn btn-primary mt-4">
          Retry
        </button>
      </div>
    )
  }

  if (domains.length === 0) {
    return (
      <div className="card text-center">
        <div className="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
          <svg className="w-10 h-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
          </svg>
        </div>
        <h2 className="text-2xl font-bold text-gray-800 mb-2">No Domains Yet</h2>
        <p className="text-gray-600 mb-6">
          You haven't added any domains yet. Click "Add Domain" to get started.
        </p>
      </div>
    )
  }

  return (
    <div>
      <div className="flex items-center justify-between mb-6">
        <h2 className="text-2xl font-bold text-gray-800">My Domains</h2>
        <button onClick={fetchDomains} className="btn btn-secondary">
          Refresh
        </button>
      </div>

      <div className="grid gap-4">
        {domains.map((domain) => (
          <div key={domain.id} className="card">
            <div className="flex items-center justify-between">
              <div className="flex-1">
                <div className="flex items-center space-x-3 mb-2">
                  <h3 className="text-xl font-bold text-gray-800">
                    {domain.domain_name}
                  </h3>
                  <span className={`px-3 py-1 rounded-full text-xs font-medium ${getStatusBadge(domain.status)}`}>
                    {domain.status}
                  </span>
                </div>

                <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
                  <div>
                    <span className="text-gray-500">Load Balancer IP:</span>
                    <p className="font-medium text-gray-800">{domain.lb_ip || 'N/A'}</p>
                  </div>
                  
                  <div>
                    <span className="text-gray-500">DNS Configured:</span>
                    <p className="font-medium text-gray-800">
                      {domain.dns_configured ? '✓ Yes' : '✗ No'}
                    </p>
                  </div>
                  
                  <div>
                    <span className="text-gray-500">SSL Configured:</span>
                    <p className="font-medium text-gray-800">
                      {domain.ssl_configured ? '✓ Yes' : '✗ No'}
                    </p>
                  </div>
                  
                  <div>
                    <span className="text-gray-500">Cloudflare Proxy:</span>
                    <p className="font-medium text-gray-800">
                      {domain.cf_proxy_enabled ? '✓ Enabled' : '✗ Disabled'}
                    </p>
                  </div>
                </div>

                <div className="mt-3 text-xs text-gray-500">
                  Added: {new Date(domain.created_at).toLocaleDateString()}
                </div>
              </div>

              <div className="ml-4">
                <a
                  href={`https://${domain.domain_name}`}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="btn btn-primary"
                >
                  Visit Site →
                </a>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}

export default DomainList