'use client'

import { useState, useEffect } from 'react'
import { useRouter } from 'next/navigation'

interface Buyer {
  id: number
  username: string
  email: string
  created_at?: string
}

export default function BuyersManagementPage() {
  const router = useRouter()
  const [buyers, setBuyers] = useState<Buyer[]>([])
  const [loading, setLoading] = useState(true)
  const [authenticated, setAuthenticated] = useState(false)
  const [editingBuyer, setEditingBuyer] = useState<Buyer | null>(null)
  const [formData, setFormData] = useState({
    username: '',
    email: '',
    password: '',
  })

  useEffect(() => {
    // Check authentication
    fetch('/api/admin/check')
      .then((res) => res.json())
      .then((data) => {
        if (data.authenticated) {
          setAuthenticated(true)
          fetchBuyers()
        } else {
          router.push('/admin/login')
        }
      })
      .catch(() => {
        router.push('/admin/login')
      })
  }, [router])

  const fetchBuyers = async () => {
    try {
      const response = await fetch('/api/buyers')
      if (response.ok) {
        const data = await response.json()
        setBuyers(Array.isArray(data) ? data : [])
      }
    } catch (error) {
      console.error('Error fetching buyers:', error)
    } finally {
      setLoading(false)
    }
  }

  const handleEdit = (buyer: Buyer) => {
    setEditingBuyer(buyer)
    setFormData({
      username: buyer.username,
      email: buyer.email,
      password: '',
    })
  }

  const handleSave = async () => {
    if (!editingBuyer) return

    try {
      const updateData: any = {}
      if (formData.username !== editingBuyer.username) {
        updateData.username = formData.username
      }
      if (formData.email !== editingBuyer.email) {
        updateData.email = formData.email
      }
      if (formData.password) {
        updateData.password = formData.password
      }

      if (Object.keys(updateData).length === 0) {
        setEditingBuyer(null)
        return
      }

      const response = await fetch(`/api/buyers/${editingBuyer.id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(updateData),
      })

      if (response.ok) {
        alert('Buyer updated successfully')
        setEditingBuyer(null)
        fetchBuyers()
      } else {
        const error = await response.json()
        alert(`Error: ${error.error}`)
      }
    } catch (error) {
      console.error('Error updating buyer:', error)
      alert('Failed to update buyer')
    }
  }

  const handleDelete = async (id: number) => {
    if (!confirm('Are you sure you want to delete this buyer? This will also delete all their sales.')) {
      return
    }

    try {
      const response = await fetch(`/api/buyers/${id}`, {
        method: 'DELETE',
      })

      if (response.ok) {
        alert('Buyer deleted successfully')
        fetchBuyers()
      } else {
        const error = await response.json()
        alert(`Error: ${error.error}`)
      }
    } catch (error) {
      console.error('Error deleting buyer:', error)
      alert('Failed to delete buyer')
    }
  }

  if (loading) {
    return (
      <div style={{
        minHeight: '100vh',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        background: 'var(--bg)'
      }}>
        <p style={{ color: 'var(--muted)' }}>Loading...</p>
      </div>
    )
  }

  if (!authenticated) {
    return null
  }

  return (
    <div style={{
      minHeight: '100vh',
      background: 'var(--bg)',
      padding: '40px 20px'
    }}>
      <div className="container" style={{ maxWidth: '1200px', margin: '0 auto' }}>
        <div style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          marginBottom: '30px'
        }}>
          <h1>Buyer Management</h1>
          <button
            onClick={() => router.push('/admin')}
            style={{
              padding: '10px 20px',
              background: 'transparent',
              border: '1px solid var(--border)',
              borderRadius: '8px',
              color: 'var(--text)',
              cursor: 'pointer',
              fontSize: '14px'
            }}
          >
            Back to Dashboard
          </button>
        </div>

        {buyers.length === 0 ? (
          <p style={{ color: 'var(--muted)' }}>No buyers found</p>
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
            {buyers.map((buyer) => (
              <div
                key={buyer.id}
                className="drop-card"
                style={{
                  background: editingBuyer?.id === buyer.id ? 'var(--bg-soft)' : 'var(--card)',
                  padding: '20px'
                }}
              >
                {editingBuyer?.id === buyer.id ? (
                  <div>
                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px', marginBottom: '16px' }}>
                      <div>
                        <label style={{ display: 'block', marginBottom: '8px' }}>Username</label>
                        <input
                          type="text"
                          value={formData.username}
                          onChange={(e) => setFormData({ ...formData, username: e.target.value })}
                          style={{
                            width: '100%',
                            padding: '8px',
                            borderRadius: '8px',
                            border: '1px solid var(--border)',
                            background: 'var(--bg-soft)',
                            color: 'var(--text)'
                          }}
                        />
                      </div>
                      <div>
                        <label style={{ display: 'block', marginBottom: '8px' }}>Email</label>
                        <input
                          type="email"
                          value={formData.email}
                          onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                          style={{
                            width: '100%',
                            padding: '8px',
                            borderRadius: '8px',
                            border: '1px solid var(--border)',
                            background: 'var(--bg-soft)',
                            color: 'var(--text)'
                          }}
                        />
                      </div>
                      <div>
                        <label style={{ display: 'block', marginBottom: '8px' }}>New Password (leave empty to keep current)</label>
                        <input
                          type="password"
                          value={formData.password}
                          onChange={(e) => setFormData({ ...formData, password: e.target.value })}
                          style={{
                            width: '100%',
                            padding: '8px',
                            borderRadius: '8px',
                            border: '1px solid var(--border)',
                            background: 'var(--bg-soft)',
                            color: 'var(--text)'
                          }}
                        />
                      </div>
                    </div>
                    <div style={{ display: 'flex', gap: '8px' }}>
                      <button
                        onClick={handleSave}
                        className="cta"
                        style={{ padding: '8px 16px', fontSize: '14px' }}
                      >
                        Save
                      </button>
                      <button
                        onClick={() => setEditingBuyer(null)}
                        style={{
                          padding: '8px 16px',
                          fontSize: '14px',
                          background: 'transparent',
                          border: '1px solid var(--border)',
                          borderRadius: '8px',
                          color: 'var(--text)',
                          cursor: 'pointer'
                        }}
                      >
                        Cancel
                      </button>
                    </div>
                  </div>
                ) : (
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                    <div style={{ flex: 1 }}>
                      <h3 style={{ marginBottom: '8px' }}>{buyer.username}</h3>
                      <p style={{ color: 'var(--muted)', fontSize: '14px', marginBottom: '4px' }}>
                        Email: {buyer.email}
                      </p>
                      <p style={{ color: 'var(--muted)', fontSize: '14px', marginBottom: '4px' }}>
                        ID: {buyer.id}
                      </p>
                      {buyer.created_at && (
                        <p style={{ color: 'var(--muted)', fontSize: '12px' }}>
                          Created: {new Date(buyer.created_at).toLocaleString()}
                        </p>
                      )}
                    </div>
                    <div style={{ display: 'flex', gap: '8px' }}>
                      <button
                        onClick={() => handleEdit(buyer)}
                        style={{
                          padding: '6px 12px',
                          fontSize: '12px',
                          background: 'transparent',
                          border: '1px solid var(--border)',
                          borderRadius: '6px',
                          color: 'var(--text)',
                          cursor: 'pointer'
                        }}
                      >
                        Edit
                      </button>
                      <button
                        onClick={() => handleDelete(buyer.id)}
                        style={{
                          padding: '6px 12px',
                          fontSize: '12px',
                          background: '#dc2626',
                          border: 'none',
                          borderRadius: '6px',
                          color: '#fff',
                          cursor: 'pointer'
                        }}
                      >
                        Delete
                      </button>
                    </div>
                  </div>
                )}
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  )
}