import React, { useState, useEffect } from 'react'
import api from '../api.js'
import {
  Plus, Trash2, Edit2, X, Check, GripVertical,
  Type, Hash, Phone, Mail, AlertTriangle, Columns
} from 'lucide-react'

const TYPE_OPTIONS = [
  { value: 'text',   label: 'Text',   icon: Type },
  { value: 'number', label: 'Number', icon: Hash },
  { value: 'phone',  label: 'Phone',  icon: Phone },
  { value: 'email',  label: 'Email',  icon: Mail },
]

const TypeIcon = ({ type, size = 14 }) => {
  const opt = TYPE_OPTIONS.find(t => t.value === type)
  const Icon = opt?.icon || Type
  return <Icon size={size} />
}

function FieldModal({ field, onClose, onSave }) {
  const [form, setForm] = useState({
    label: field?.label || '',
    field_type: field?.field_type || 'text',
    required: field?.required || false,
  })
  const [error, setError] = useState('')
  const [loading, setLoading] = useState(false)

  const handleSubmit = async (e) => {
    e.preventDefault()
    setError('')
    if (!form.label.trim()) return setError('Label is required')
    setLoading(true)
    try {
      if (field) {
        const { data } = await api.put(`/fields/${field.id}`, form)
        onSave(data, 'edit')
      } else {
        const { data } = await api.post('/fields', form)
        onSave(data, 'add')
      }
      onClose()
    } catch (err) {
      setError(err.response?.data?.error || 'Failed to save field')
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70">
      <div className="bg-slate-900 rounded-2xl border border-slate-800 w-full max-w-md shadow-2xl">
        <div className="flex items-center justify-between p-6 border-b border-slate-800">
          <h3 className="text-lg font-bold text-white">{field ? 'Edit Field' : 'New Field'}</h3>
          <button onClick={onClose} className="text-slate-400 hover:text-white"><X size={20} /></button>
        </div>
        <form onSubmit={handleSubmit} className="p-6 space-y-5">
          {error && <div className="bg-red-500/10 border border-red-500/30 text-red-400 text-sm rounded-xl px-4 py-3">{error}</div>}

          <div>
            <label className="block text-sm font-medium text-slate-400 mb-1.5">Field Label <span className="text-red-400">*</span></label>
            <input
              type="text"
              value={form.label}
              onChange={e => setForm({ ...form, label: e.target.value })}
              autoFocus
              className="w-full bg-slate-800 border border-slate-700 rounded-xl px-4 py-3 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition"
              placeholder="e.g. First Name, Contract ID..."
            />
            {!field && form.label && (
              <p className="text-xs text-slate-500 mt-1.5">
                Key: <code className="text-slate-400">{form.label.trim().toLowerCase().replace(/[^a-z0-9]+/g, '_').replace(/^_|_$/g, '')}</code>
              </p>
            )}
          </div>

          <div>
            <label className="block text-sm font-medium text-slate-400 mb-2">Field Type</label>
            <div className="grid grid-cols-4 gap-2">
              {TYPE_OPTIONS.map(({ value, label, icon: Icon }) => (
                <button
                  type="button"
                  key={value}
                  onClick={() => setForm({ ...form, field_type: value })}
                  className={`flex flex-col items-center gap-1.5 py-3 px-2 rounded-xl border text-xs font-medium transition ${
                    form.field_type === value
                      ? 'border-indigo-500 bg-indigo-500/10 text-indigo-400'
                      : 'border-slate-700 text-slate-400 hover:border-slate-600 hover:text-white'
                  }`}
                >
                  <Icon size={16} />
                  {label}
                </button>
              ))}
            </div>
          </div>

          <div>
            <label className="flex items-center gap-3 cursor-pointer group">
              <div
                onClick={() => setForm({ ...form, required: !form.required })}
                className={`w-11 h-6 rounded-full transition-colors relative ${form.required ? 'bg-indigo-600' : 'bg-slate-700'}`}
              >
                <div className={`absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow transition-transform ${form.required ? 'translate-x-5' : ''}`} />
              </div>
              <span className="text-sm font-medium text-slate-300 group-hover:text-white transition">Required field</span>
            </label>
            <p className="text-xs text-slate-500 mt-1 ml-14">Users must fill this field when adding a contract</p>
          </div>

          <div className="flex gap-3 pt-1">
            <button type="button" onClick={onClose} className="flex-1 py-2.5 rounded-xl border border-slate-700 text-slate-400 hover:text-white transition text-sm font-medium">Cancel</button>
            <button type="submit" disabled={loading} className="flex-1 py-2.5 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-semibold disabled:opacity-50 transition">
              {loading ? 'Saving...' : field ? 'Save Changes' : 'Add Field'}
            </button>
          </div>
        </form>
      </div>
    </div>
  )
}

export default function Fields() {
  const [fields, setFields] = useState([])
  const [loading, setLoading] = useState(true)
  const [modal, setModal] = useState(null) // null | 'add' | field object
  const [deleteConfirm, setDeleteConfirm] = useState(null)
  const [toast, setToast] = useState('')
  const [dragIdx, setDragIdx] = useState(null)
  const [dragOverIdx, setDragOverIdx] = useState(null)

  useEffect(() => {
    api.get('/fields').then(({ data }) => { setFields(data); setLoading(false) }).catch(() => setLoading(false))
  }, [])

  const showToast = (msg) => { setToast(msg); setTimeout(() => setToast(''), 3000) }

  const handleSave = (data, type) => {
    if (type === 'add') setFields(prev => [...prev, data])
    else setFields(prev => prev.map(f => f.id === data.id ? data : f))
    showToast(type === 'add' ? 'Field added' : 'Field updated')
  }

  const handleDelete = async (field) => {
    try {
      await api.delete(`/fields/${field.id}`)
      setFields(prev => prev.filter(f => f.id !== field.id))
      setDeleteConfirm(null)
      showToast('Field deleted')
    } catch (err) {
      showToast(err.response?.data?.error || 'Failed to delete')
    }
  }

  // Drag-to-reorder
  const handleDragStart = (idx) => setDragIdx(idx)
  const handleDragOver = (e, idx) => { e.preventDefault(); setDragOverIdx(idx) }
  const handleDrop = async (idx) => {
    if (dragIdx === null || dragIdx === idx) { setDragIdx(null); setDragOverIdx(null); return }
    const reordered = [...fields]
    const [moved] = reordered.splice(dragIdx, 1)
    reordered.splice(idx, 0, moved)
    const withOrder = reordered.map((f, i) => ({ ...f, sort_order: i + 1 }))
    setFields(withOrder)
    setDragIdx(null)
    setDragOverIdx(null)
    try {
      await api.put('/fields/reorder', { order: withOrder.map(f => ({ id: f.id, sort_order: f.sort_order })) })
    } catch { showToast('Failed to save order') }
  }

  return (
    <div className="max-w-3xl">
      {toast && (
        <div className="fixed top-4 right-4 z-50 bg-green-500/20 border border-green-500/40 text-green-300 px-4 py-3 rounded-xl shadow-xl text-sm font-medium flex items-center gap-2">
          <Check size={16} />{toast}
        </div>
      )}

      <div className="flex items-center justify-between mb-6">
        <div>
          <h2 className="text-2xl font-bold text-white">Fields</h2>
          <p className="text-slate-400 text-sm mt-1">Manage the columns shown in the Dashboard</p>
        </div>
        <button
          onClick={() => setModal('add')}
          className="flex items-center gap-2 bg-indigo-600 hover:bg-indigo-500 text-white px-4 py-2.5 rounded-xl text-sm font-semibold transition shadow-lg shadow-indigo-900/40"
        >
          <Plus size={16} />Add Field
        </button>
      </div>

      {/* Info banner */}
      <div className="bg-indigo-500/10 border border-indigo-500/20 rounded-xl px-4 py-3 mb-5 flex items-start gap-3">
        <Columns size={16} className="text-indigo-400 mt-0.5 flex-shrink-0" />
        <p className="text-sm text-indigo-300">
          Fields define the columns in the Dashboard. You can drag rows to reorder them. Deleting a field removes its data from all existing contracts.
        </p>
      </div>

      <div className="bg-slate-900 rounded-2xl border border-slate-800 overflow-hidden">
        {loading ? (
          <div className="p-12 text-center text-slate-500">Loading...</div>
        ) : fields.length === 0 ? (
          <div className="p-12 text-center">
            <Columns size={48} className="text-slate-700 mx-auto mb-3" />
            <p className="text-slate-400 mb-1">No fields defined yet</p>
            <button onClick={() => setModal('add')} className="text-indigo-400 hover:text-indigo-300 text-sm mt-2">
              Add your first field →
            </button>
          </div>
        ) : (
          <table className="w-full">
            <thead>
              <tr className="border-b border-slate-800">
                <th className="w-10 px-4 py-3"></th>
                <th className="text-left px-4 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider">Label</th>
                <th className="text-left px-4 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider">Key</th>
                <th className="text-left px-4 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider">Type</th>
                <th className="text-left px-4 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider">Required</th>
                <th className="text-right px-4 py-3 text-xs font-semibold text-slate-400 uppercase tracking-wider">Actions</th>
              </tr>
            </thead>
            <tbody>
              {fields.map((f, idx) => (
                <tr
                  key={f.id}
                  draggable
                  onDragStart={() => handleDragStart(idx)}
                  onDragOver={(e) => handleDragOver(e, idx)}
                  onDrop={() => handleDrop(idx)}
                  onDragEnd={() => { setDragIdx(null); setDragOverIdx(null) }}
                  className={`border-b border-slate-800/50 transition ${
                    dragOverIdx === idx && dragIdx !== idx ? 'bg-indigo-500/10' : 'hover:bg-slate-800/30'
                  } ${dragIdx === idx ? 'opacity-40' : ''}`}
                >
                  <td className="px-4 py-3.5">
                    <GripVertical size={16} className="text-slate-600 cursor-grab active:cursor-grabbing" />
                  </td>
                  <td className="px-4 py-3.5">
                    <span className="text-white font-medium">{f.label}</span>
                  </td>
                  <td className="px-4 py-3.5">
                    <code className="text-xs text-slate-400 bg-slate-800 px-2 py-1 rounded-lg">{f.field_key}</code>
                  </td>
                  <td className="px-4 py-3.5">
                    <div className="flex items-center gap-1.5 text-slate-400 text-sm">
                      <TypeIcon type={f.field_type} />
                      <span className="capitalize">{f.field_type}</span>
                    </div>
                  </td>
                  <td className="px-4 py-3.5">
                    {f.required
                      ? <span className="text-xs px-2.5 py-1 rounded-full bg-amber-500/20 text-amber-400 font-medium">Required</span>
                      : <span className="text-xs text-slate-600">Optional</span>
                    }
                  </td>
                  <td className="px-4 py-3.5 text-right">
                    <div className="flex items-center justify-end gap-2">
                      <button onClick={() => setModal(f)} className="p-2 rounded-lg text-slate-400 hover:text-white hover:bg-slate-700 transition">
                        <Edit2 size={14} />
                      </button>
                      <button onClick={() => setDeleteConfirm(f)} className="p-2 rounded-lg text-slate-400 hover:text-red-400 hover:bg-red-500/10 transition">
                        <Trash2 size={14} />
                      </button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>

      {modal && (
        <FieldModal
          field={modal === 'add' ? null : modal}
          onClose={() => setModal(null)}
          onSave={handleSave}
        />
      )}

      {deleteConfirm && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70">
          <div className="bg-slate-900 rounded-2xl border border-slate-800 p-6 w-full max-w-sm shadow-2xl">
            <div className="flex items-start gap-3 mb-4">
              <div className="w-10 h-10 bg-red-500/20 rounded-xl flex items-center justify-center flex-shrink-0">
                <AlertTriangle size={20} className="text-red-400" />
              </div>
              <div>
                <h3 className="text-lg font-bold text-white">Delete Field</h3>
                <p className="text-slate-400 text-sm mt-1">
                  Delete <strong className="text-white">"{deleteConfirm.label}"</strong>? This will permanently remove this column and all its data from every contract.
                </p>
              </div>
            </div>
            <div className="flex gap-3">
              <button onClick={() => setDeleteConfirm(null)} className="flex-1 py-2.5 rounded-xl border border-slate-700 text-slate-400 hover:text-white transition text-sm">Cancel</button>
              <button onClick={() => handleDelete(deleteConfirm)} className="flex-1 py-2.5 rounded-xl bg-red-500/20 hover:bg-red-500/30 text-red-400 border border-red-500/30 transition text-sm font-semibold">Delete Field</button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}