import { useState, useEffect, useMemo } from 'react'
import { useNavigate, Link } from 'react-router-dom'
import { useAlert } from '../context/AlertContext'
import { useAuth } from '../context/AuthContext'
import { motion } from 'framer-motion'
import FormField from '../components/FormField'
import Forbidden from '../components/Forbidden'
import AdminDatePicker from '../components/AdminDatePicker'
import apiFetch from '../utils/api'

const API_BASE = '/api/admin'

export default function ProjectCreate() {
  const navigate = useNavigate()
  const alert = useAlert()
  const { hasPermission } = useAuth()

  const [form, setForm] = useState({
    project_number: '',
    name: '',
    customer_id: null,
    customer_name: '',
    start_date: new Date().toISOString().split('T')[0]
  })
  const [saving, setSaving] = useState(false)
  const [errors, setErrors] = useState({})
  const [loadingNumber, setLoadingNumber] = useState(true)

  // Customer selector state
  const [customers, setCustomers] = useState([])
  const [customerSearch, setCustomerSearch] = useState('')
  const [showCustomerDropdown, setShowCustomerDropdown] = useState(false)

  // Load initial data
  useEffect(() => {
    const load = async () => {
      try {
        const [numRes, custRes] = await Promise.all([
          apiFetch(`${API_BASE}/projects.php?action=next_number`),
          apiFetch(`${API_BASE}/customers.php`)
        ])

        const numData = await numRes.json()
        if (numData.success) {
          setForm(prev => ({ ...prev, project_number: numData.data.number }))
        }

        const custData = await custRes.json()
        if (custData.success) {
          setCustomers(custData.data.customers)
        }
      } catch {
        alert.error('Chyba při načítání dat')
      } finally {
        setLoadingNumber(false)
      }
    }
    load()
  }, [alert])

  // Customer filtering
  const filteredCustomers = useMemo(() => {
    if (!customerSearch) return customers
    const q = customerSearch.toLowerCase()
    return customers.filter(c =>
      (c.name || '').toLowerCase().includes(q) ||
      (c.company_id || '').includes(customerSearch) ||
      (c.city || '').toLowerCase().includes(q)
    )
  }, [customers, customerSearch])

  // Close dropdown on outside click
  useEffect(() => {
    const handleClickOutside = () => setShowCustomerDropdown(false)
    if (showCustomerDropdown) {
      document.addEventListener('click', handleClickOutside)
      return () => document.removeEventListener('click', handleClickOutside)
    }
  }, [showCustomerDropdown])

  if (!hasPermission('projects.create')) return <Forbidden />

  const selectCustomer = (customer) => {
    setForm(prev => ({ ...prev, customer_id: customer.id, customer_name: customer.name }))
    setErrors(prev => ({ ...prev, customer_id: undefined }))
    setCustomerSearch('')
    setShowCustomerDropdown(false)
  }

  const clearCustomer = () => {
    setForm(prev => ({ ...prev, customer_id: null, customer_name: '' }))
  }

  const updateForm = (field, value) => {
    setForm(prev => ({ ...prev, [field]: value }))
    setErrors(prev => ({ ...prev, [field]: undefined }))
  }

  const handleSave = async () => {
    const newErrors = {}
    if (!form.name.trim()) newErrors.name = 'Název projektu je povinný'
    if (!form.customer_id) newErrors.customer_id = 'Vyberte zákazníka'
    setErrors(newErrors)
    if (Object.keys(newErrors).length > 0) return

    setSaving(true)
    try {
      const body = {
        name: form.name.trim(),
        customer_id: form.customer_id,
        start_date: form.start_date,
        project_number: form.project_number.trim()
      }

      const res = await apiFetch(`${API_BASE}/projects.php`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body)
      })
      const data = await res.json()
      if (data.success) {
        navigate(`/projects/${data.data.project_id}`, { state: { created: true } })
      } else {
        alert.error(data.error || 'Nepodařilo se vytvořit projekt')
      }
    } catch {
      alert.error('Chyba připojení')
    } finally {
      setSaving(false)
    }
  }

  if (loadingNumber) {
    return (
      <div className="admin-skeleton" style={{ padding: 0, gap: '1.5rem' }}>
        <div className="admin-skeleton-row" style={{ justifyContent: 'space-between' }}>
          <div className="admin-skeleton-line h-8" style={{ width: '200px' }} />
        </div>
        <div className="admin-card">
          <div className="admin-skeleton" style={{ gap: '1.25rem' }}>
            {[0, 1, 2, 3].map(i => (
              <div key={i} className="admin-skeleton-row">
                <div className="admin-skeleton-line w-1/4" />
                <div className="admin-skeleton-line w-1/2" />
              </div>
            ))}
          </div>
        </div>
      </div>
    )
  }

  return (
    <div>
      <motion.div
        className="admin-page-header"
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.4 }}
      >
        <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
          <Link to="/projects" className="admin-btn-icon" title="Zpět" aria-label="Zpět">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M19 12H5M12 19l-7-7 7-7" />
            </svg>
          </Link>
          <div>
            <h1 className="admin-page-title">Nový projekt</h1>
            <p className="admin-page-subtitle">Ruční vytvoření projektu</p>
          </div>
        </div>
        <div className="admin-page-actions">
          <button
            onClick={handleSave}
            disabled={saving}
            className="admin-btn admin-btn-primary"
          >
            {saving ? 'Ukládám...' : 'Uložit'}
          </button>
        </div>
      </motion.div>

      <motion.div
        className="admin-card"
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.4, delay: 0.1 }}
        style={{ overflow: 'visible' }}
      >
        <div className="admin-card-body">
          <h3 className="admin-card-title">Základní údaje</h3>
          <div className="admin-form">
            <div className="admin-form-row">
              <FormField label="Číslo projektu">
                <input
                  type="text"
                  value={form.project_number}
                  onChange={(e) => updateForm('project_number', e.target.value)}
                  className="admin-form-input"
                  placeholder="Ponechte prázdné pro automatické"
                />
              </FormField>
              <FormField label="Název" error={errors.name} required>
                <input
                  type="text"
                  value={form.name}
                  onChange={(e) => updateForm('name', e.target.value)}
                  className="admin-form-input"
                  placeholder="Název projektu"
                />
              </FormField>
            </div>

            <div className="admin-form-row">
              <FormField label="Zákazník" error={errors.customer_id} required>
                {form.customer_id ? (
                  <div className="offers-customer-selected">
                    <span>{form.customer_name}</span>
                    <button type="button" onClick={clearCustomer} className="admin-btn-icon" title="Odebrat zákazníka" aria-label="Odebrat zákazníka">
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                        <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
                      </svg>
                    </button>
                  </div>
                ) : (
                  <div className="offers-customer-select" onClick={(e) => e.stopPropagation()}>
                    <input
                      type="text"
                      value={customerSearch}
                      onChange={(e) => { setCustomerSearch(e.target.value); setShowCustomerDropdown(true) }}
                      onFocus={() => setShowCustomerDropdown(true)}
                      className="admin-form-input"
                      placeholder="Hledat zákazníka..."
                    />
                    {showCustomerDropdown && (
                      <div className="offers-customer-dropdown">
                        {filteredCustomers.length === 0 ? (
                          <div className="offers-customer-dropdown-empty">
                            Žádní zákazníci
                          </div>
                        ) : (
                          filteredCustomers.slice(0, 20).map(c => (
                            <div
                              key={c.id}
                              className="offers-customer-dropdown-item"
                              onMouseDown={() => selectCustomer(c)}
                            >
                              <div>{c.name}</div>
                              {c.city && <div>{c.city}</div>}
                            </div>
                          ))
                        )}
                      </div>
                    )}
                  </div>
                )}
              </FormField>
              <FormField label="Datum zahájení">
                <AdminDatePicker
                  mode="date"
                  value={form.start_date}
                  onChange={(val) => updateForm('start_date', val)}
                />
              </FormField>
            </div>
          </div>
        </div>
      </motion.div>

    </div>
  )
}