'use client'

import { useState } from 'react'
import { Text, Area, Select, ChipGroup, OptionCards } from './WizardFields'
import {
  STEP_TITLES, WHY_PUBLISH, WHAT_NEXT, generarHeadline, generarResumen,
  STAGE_DESC, ASSET_TYPE_DESC, OFFER_TYPE_DESC, DEAL_TYPE_DESC, SELLER_TYPE_DESC,
} from './wizardContent'
import { createListingAction, updateListingAction } from '@/app/dashboard/actions'
import { SatelliteMap } from '@/components/terrano/SatelliteMap'
import { listingImage } from '@/lib/listing-view'
import type { WizardForm } from '@/lib/publish'
import type { MapPin } from '@/lib/map-pin'
import {
  ASSET_TYPES, ASSET_TYPE_LABELS, STAGES, STAGE_LABELS, DEAL_TYPES, DEAL_TYPE_LABELS, COMMODITIES, COMMODITY_LABELS,
  COUNTRY_LABELS, OFFER_TYPES, OFFER_TYPE_LABELS, SELLER_TYPES, SELLER_TYPE_LABELS,
  CONTACT_PREFERENCES, CONTACT_PREFERENCE_LABELS, MINERALIZATION_TYPES, WORKS_OPTIONS,
} from '@/lib/constants'

const EMPTY: WizardForm = {
  title: '', stage: '', assetType: '', offerType: '', commodities: [], primaryCommodity: '',
  country: 'CL', region: '', city: '', lat: '', lng: '', surfaceHa: '', concessionCount: '', dealTypes: [], priceUsd: '',
  headline: '', sellReason: '', sellerCompany: '', sellerWebsite: '', sellerType: '',
  mineralizationType: '', works: [], waterAccess: '', energyAccess: '',
  esgEnvStatus: '', esgClosurePlan: '', esgCommunity: '', esgLiabilities: '',
  description: '', contactName: '', contactRole: '', contactEmail: '', contactPhone: '',
  contactPreference: '', hasAgent: false,
}

const opt = (values: readonly string[], labels?: Record<string, string>) =>
  values.map((v) => ({ value: v, label: labels?.[v] ?? v }))

const cardOpt = (values: readonly string[], labels: Record<string, string>, descs?: Record<string, string>) =>
  values.map((v) => ({ value: v, label: labels[v] ?? v, desc: descs?.[v] }))

function AiButton({ onClick }: { onClick: () => void }) {
  return (
    <button
      type="button"
      onClick={onClick}
      className="mono uppercase-wide"
      style={{ alignSelf: 'flex-start', marginTop: 6, fontSize: 10, color: 'var(--accent-2)', background: 'none', border: 0, letterSpacing: '0.06em', cursor: 'pointer' }}
    >
      ▣ Generar con plantilla
    </button>
  )
}

const h2 = { fontFamily: 'var(--f-display)', fontSize: 18, fontWeight: 600, letterSpacing: '-0.01em' } as const
const subStyle = { fontSize: 13, color: 'var(--muted)', marginTop: -8, lineHeight: 1.5 } as const

export function PublishWizard({ initial, listingId }: { initial?: WizardForm; listingId?: string } = {}) {
  const isEdit = !!listingId
  const [step, setStep] = useState(0)
  const [form, setForm] = useState<WizardForm>(initial ?? EMPTY)
  const [errors, setErrors] = useState<string[]>([])
  const [submitting, setSubmitting] = useState(false)

  const set = <K extends keyof WizardForm>(k: K, v: WizardForm[K]) => setForm((f) => ({ ...f, [k]: v }))
  const toggle = (k: 'commodities' | 'works' | 'dealTypes', v: string) =>
    setForm((f) => ({ ...f, [k]: f[k].includes(v) ? f[k].filter((x) => x !== v) : [...f[k], v] }))

  async function publish() {
    setSubmitting(true)
    setErrors([])
    const res = listingId ? await updateListingAction(listingId, form) : await createListingAction(form)
    if (res && !res.ok) {
      setErrors(res.errors)
      setSubmitting(false)
      setStep(0)
    }
  }

  // Vista previa: coordenadas → pin del mapa
  const latN = Number(form.lat)
  const lngN = Number(form.lng)
  const hasCoords = form.lat.trim() !== '' && form.lng.trim() !== '' && Number.isFinite(latN) && Number.isFinite(lngN)
  const previewPins: MapPin[] = hasCoords
    ? [{
        id: 'preview', slug: '', title: form.title || 'Tu activo',
        lat: latN, lng: lngN,
        mineral: form.primaryCommodity || form.commodities[0] || 'OTRO',
        priceLabel: form.priceUsd ? `USD ${form.priceUsd}` : '—',
        haLabel: form.surfaceHa ? `${form.surfaceHa} ha` : '—',
        region: form.region, city: form.city, verified: false, stageCode: '', modality: '',
      }]
    : []

  // Vista previa de portada (imagen del lugar asignada automáticamente)
  const coverSrc = listingImage({
    assetType: form.assetType || null,
    region: form.region || null,
    commodities: form.commodities.map((c) => ({ commodity: c, isPrimary: c === form.primaryCommodity })),
  })

  return (
    <div className="publish-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 32, alignItems: 'start' }}>
      <div>
        <div className="mono uppercase-wide" style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.12em' }}>
          <span style={{ color: 'var(--accent)' }}>▣</span> Paso {step + 1} de 7
        </div>
        <h1 className="display" style={{ fontSize: 32, fontWeight: 600, letterSpacing: '-0.02em', marginTop: 4 }}>
          {isEdit ? 'Editar activo minero' : 'Publicar activo minero'}
        </h1>
        <p style={{ color: 'var(--muted)', marginTop: 4, fontSize: 14 }}>
          Conecta con compradores, inversionistas y socios de JV calificados a nivel global.
        </p>

        {/* Progreso por pasos */}
        <ol style={{ display: 'flex', flexWrap: 'wrap', gap: 6, listStyle: 'none', padding: 0, marginTop: 18 }}>
          {STEP_TITLES.map((t, i) => (
            <li
              key={t}
              className="mono uppercase-wide"
              style={{
                fontSize: 9.5,
                padding: '4px 8px',
                letterSpacing: '0.04em',
                border: '1px solid',
                borderColor: i === step ? 'var(--ink)' : 'var(--line-soft)',
                background: i === step ? 'var(--ink)' : i < step ? 'var(--bg-sunk)' : 'transparent',
                color: i === step ? 'var(--bg-elev)' : i < step ? 'var(--ink)' : 'var(--muted)',
              }}
            >
              {i + 1}. {t}
            </li>
          ))}
        </ol>

        <div className="card" style={{ marginTop: 24, padding: 24, display: 'flex', flexDirection: 'column', gap: 18 }}>
          {step === 0 && (
            <>
              <div>
                <h2 style={h2}>Identificación del activo</h2>
                <p style={subStyle}>Define quién publica y la naturaleza del activo.</p>
              </div>
              <OptionCards
                label="¿Bajo qué identidad publicas?"
                options={[
                  { value: 'self', label: 'Como persona o empresa', desc: 'Eres el titular del activo.' },
                  { value: 'broker', label: 'Por mandato (broker)', desc: 'Representas al titular en la venta.' },
                ]}
                selected={form.hasAgent ? 'broker' : 'self'}
                onSelect={(v) => set('hasAgent', v === 'broker')}
              />
              <Text label="Nombre del proyecto *" value={form.title} onChange={(v) => set('title', v)} placeholder="Ej: Proyecto Cu-Au en Canela" />
              <OptionCards label="Tipo de activo" options={cardOpt(ASSET_TYPES, ASSET_TYPE_LABELS, ASSET_TYPE_DESC)} selected={form.assetType} onSelect={(v) => set('assetType', v)} />
              <OptionCards label="Etapa del proyecto" options={cardOpt(STAGES, STAGE_LABELS, STAGE_DESC)} selected={form.stage} onSelect={(v) => set('stage', v)} />
              <OptionCards label="Tipo de oferta" options={cardOpt(OFFER_TYPES, OFFER_TYPE_LABELS, OFFER_TYPE_DESC)} selected={form.offerType} onSelect={(v) => set('offerType', v)} />
              <ChipGroup label="Mineralización (selecciona los minerales) *" options={opt(COMMODITIES, COMMODITY_LABELS)} selected={form.commodities} onToggle={(v) => toggle('commodities', v)} />
              {form.commodities.length > 0 && (
                <Select label="Mineral principal" value={form.primaryCommodity} onChange={(v) => set('primaryCommodity', v)} options={opt(form.commodities, COMMODITY_LABELS)} />
              )}
            </>
          )}

          {step === 1 && (
            <>
              <div>
                <h2 style={h2}>Ubicación y título minero</h2>
                <p style={subStyle}>Ubica el activo en el mapa con sus coordenadas.</p>
              </div>
              <Select label="País *" value={form.country} onChange={(v) => set('country', v)} options={Object.entries(COUNTRY_LABELS).map(([value, label]) => ({ value, label }))} includeEmpty={false} />
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <Text label="Región / Provincia" value={form.region} onChange={(v) => set('region', v)} />
                <Text label="Comuna / Ciudad" value={form.city} onChange={(v) => set('city', v)} />
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <Text label="Latitud (decimal)" type="number" value={form.lat} onChange={(v) => set('lat', v)} placeholder="-31.18" />
                <Text label="Longitud (decimal)" type="number" value={form.lng} onChange={(v) => set('lng', v)} placeholder="-71.00" />
              </div>

              {/* Vista previa del mapa */}
              <div style={{ border: '1px solid var(--line-soft)' }}>
                <div className="mono uppercase-wide" style={{ fontSize: 9.5, color: 'var(--muted)', padding: '8px 12px', borderBottom: '1px solid var(--line-softer)', display: 'flex', justifyContent: 'space-between' }}>
                  <span>Vista previa · mapa satelital</span>
                  <span>{hasCoords ? `${latN}°, ${lngN}°` : 'sin coordenadas'}</span>
                </div>
                {hasCoords ? (
                  <SatelliteMap pins={previewPins} selectedId="preview" height={260} showChrome={false} onSelect={() => {}} />
                ) : (
                  <div className="placeholder" style={{ height: 160, display: 'flex', alignItems: 'center', justifyContent: 'center', textAlign: 'center', padding: 16 }}>
                    Ingresa latitud y longitud para ver el activo en el mapa.
                  </div>
                )}
              </div>

              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <Text label="Hectáreas totales" type="number" value={form.surfaceHa} onChange={(v) => set('surfaceHa', v)} />
                <Text label="Cantidad de concesiones" type="number" value={form.concessionCount} onChange={(v) => set('concessionCount', v)} />
              </div>
            </>
          )}

          {step === 2 && (
            <>
              <div>
                <h2 style={h2}>Estructura del negocio</h2>
                <p style={subStyle}>Define cómo se transará el activo y quién es el titular.</p>
              </div>
              <OptionCards label="Estructura de la oferta *" multi options={cardOpt(DEAL_TYPES, DEAL_TYPE_LABELS, DEAL_TYPE_DESC)} selected={form.dealTypes} onSelect={(v) => toggle('dealTypes', v)} />
              <Text label="Precio solicitado (USD)" type="number" value={form.priceUsd} onChange={(v) => set('priceUsd', v)} placeholder="Déjalo vacío para 'a consultar'" />
              <Area label="Motivo de la venta o asociación" value={form.sellReason} onChange={(v) => set('sellReason', v)} />
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <Text label="Razón social / Titular" value={form.sellerCompany} onChange={(v) => set('sellerCompany', v)} />
                <Text label="Sitio web" value={form.sellerWebsite} onChange={(v) => set('sellerWebsite', v)} />
              </div>
              <OptionCards label="Tipo de vendedor" columns={3} options={cardOpt(SELLER_TYPES, SELLER_TYPE_LABELS, SELLER_TYPE_DESC)} selected={form.sellerType} onSelect={(v) => set('sellerType', v)} />
            </>
          )}

          {step === 3 && (
            <>
              <div>
                <h2 style={h2}>Ficha técnica</h2>
                <p style={subStyle}>Geología, infraestructura y la portada del activo.</p>
              </div>
              <Select label="Tipo de mineralización" value={form.mineralizationType} onChange={(v) => set('mineralizationType', v)} options={opt(MINERALIZATION_TYPES)} />
              <ChipGroup label="Trabajos realizados" options={opt(WORKS_OPTIONS)} selected={form.works} onToggle={(v) => toggle('works', v)} />
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <Text label="Acceso a agua" value={form.waterAccess} onChange={(v) => set('waterAccess', v)} />
                <Text label="Acceso a energía" value={form.energyAccess} onChange={(v) => set('energyAccess', v)} />
              </div>

              {/* Vista previa de portada */}
              <div>
                <div className="mono uppercase-wide" style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.08em', marginBottom: 8 }}>
                  Portada del activo
                </div>
                <div style={{ position: 'relative', height: 180, border: '1px solid var(--line-soft)', overflow: 'hidden' }}>
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img src={coverSrc} alt="Portada asignada" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                  <div className="mono uppercase-wide" style={{ position: 'absolute', inset: 'auto 0 0 0', padding: '6px 10px', fontSize: 9.5, color: '#f6f3ee', background: 'rgba(20,20,20,0.55)' }}>
                    Asignada automáticamente según tipo y región
                  </div>
                </div>
                <p style={{ fontSize: 11.5, color: 'var(--muted)', marginTop: 6 }}>
                  La carga de tus propias fotos y documentos llegará en una próxima fase.
                </p>
              </div>
            </>
          )}

          {step === 4 && (
            <>
              <div>
                <h2 style={h2}>Narrativa y media</h2>
                <p style={subStyle}>El texto que verán los compradores. Puedes generar un borrador y editarlo.</p>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column' }}>
                <Text label="Headline técnico" value={form.headline} onChange={(v) => set('headline', v)} />
                <AiButton onClick={() => set('headline', generarHeadline(form))} />
              </div>
              <div style={{ display: 'flex', flexDirection: 'column' }}>
                <Area label="Resumen / descripción del proyecto" value={form.description} onChange={(v) => set('description', v)} />
                <AiButton onClick={() => set('description', generarResumen(form))} />
              </div>
              <h3 className="mono uppercase-wide" style={{ marginTop: 8, fontSize: 11, color: 'var(--muted)' }}>ESG (opcional)</h3>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <Text label="Estudio de impacto ambiental" value={form.esgEnvStatus} onChange={(v) => set('esgEnvStatus', v)} />
                <Text label="Plan de cierre" value={form.esgClosurePlan} onChange={(v) => set('esgClosurePlan', v)} />
              </div>
              <Area label="Relación comunitaria" value={form.esgCommunity} onChange={(v) => set('esgCommunity', v)} />
              <Area label="Pasivos heredados" value={form.esgLiabilities} onChange={(v) => set('esgLiabilities', v)} />
            </>
          )}

          {step === 5 && (
            <>
              <div>
                <h2 style={h2}>Contacto y verificación</h2>
                <p style={subStyle}>Sólo el equipo de Portal Minería verá tu contacto. Las consultas llegan directo a ti.</p>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <Text label="Nombre de contacto" value={form.contactName} onChange={(v) => set('contactName', v)} />
                <Text label="Rol / cargo" value={form.contactRole} onChange={(v) => set('contactRole', v)} />
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <Text label="Correo electrónico" type="email" value={form.contactEmail} onChange={(v) => set('contactEmail', v)} />
                <Text label="Teléfono" value={form.contactPhone} onChange={(v) => set('contactPhone', v)} />
              </div>
              <OptionCards label="Forma preferida de contacto" columns={3} options={opt(CONTACT_PREFERENCES, CONTACT_PREFERENCE_LABELS)} selected={form.contactPreference} onSelect={(v) => set('contactPreference', v)} />
            </>
          )}

          {step === 6 && (
            <>
              <div>
                <h2 style={h2}>Revisión</h2>
                <p style={subStyle}>Revisa los datos clave antes de publicar.</p>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '160px 1fr', gap: 16, alignItems: 'start' }}>
                <div style={{ height: 110, border: '1px solid var(--line-soft)', overflow: 'hidden' }}>
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img src={coverSrc} alt="Portada" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                </div>
                <ul style={{ listStyle: 'none', padding: 0, display: 'flex', flexDirection: 'column', gap: 4, fontSize: 13 }}>
                  <ReviewRow label="Nombre" value={form.title || '—'} />
                  <ReviewRow label="Tipo · etapa" value={[ASSET_TYPE_LABELS[form.assetType as keyof typeof ASSET_TYPE_LABELS], STAGE_LABELS[form.stage as keyof typeof STAGE_LABELS]].filter(Boolean).join(' · ') || '—'} />
                  <ReviewRow label="Ubicación" value={[form.city, form.region, COUNTRY_LABELS[form.country] ?? form.country].filter(Boolean).join(', ') || '—'} />
                  <ReviewRow label="Coordenadas" value={hasCoords ? `${latN}°, ${lngN}°` : 'sin georreferenciar'} />
                  <ReviewRow label="Minerales" value={form.commodities.map((c) => COMMODITY_LABELS[c as keyof typeof COMMODITY_LABELS] ?? c).join(', ') || '—'} />
                  <ReviewRow label="Estructura" value={form.dealTypes.map((d) => DEAL_TYPE_LABELS[d as keyof typeof DEAL_TYPE_LABELS] ?? d).join(', ') || '—'} />
                  <ReviewRow label="Precio" value={form.priceUsd ? `USD ${form.priceUsd}` : 'A consultar'} />
                </ul>
              </div>
              {errors.length > 0 && (
                <ul style={{ marginTop: 4, paddingLeft: 18, color: 'var(--warn, #c2410c)', fontSize: 13 }}>
                  {errors.map((e) => <li key={e}>{e}</li>)}
                </ul>
              )}
            </>
          )}
        </div>

        <div style={{ marginTop: 24, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <button type="button" onClick={() => setStep((s) => Math.max(0, s - 1))} disabled={step === 0} className="btn ghost" style={{ border: '1px solid var(--line-soft)' }}>
            ← Atrás
          </button>
          <span className="mono uppercase-wide" style={{ fontSize: 10, color: 'var(--muted)' }}>
            Paso {step + 1} de 7 · {STEP_TITLES[step]}
          </span>
          {step < 6 ? (
            <button type="button" onClick={() => setStep((s) => Math.min(6, s + 1))} className="btn accent">
              Siguiente →
            </button>
          ) : (
            <button type="button" onClick={publish} disabled={submitting} className="btn accent">
              {submitting ? (isEdit ? 'Guardando…' : 'Publicando…') : isEdit ? 'Guardar cambios' : 'Publicar activo'}
            </button>
          )}
        </div>
      </div>

      <aside className="card" style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 20, fontSize: 13 }}>
        <div>
          <div className="mono uppercase-wide" style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.1em', marginBottom: 10 }}>
            <span style={{ color: 'var(--accent)' }}>▣</span> ¿Por qué publicar?
          </div>
          <ul style={{ listStyle: 'none', padding: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
            {WHY_PUBLISH.map(([t, d]) => (
              <li key={t}>
                <p style={{ fontWeight: 600 }}>{t}</p>
                <p style={{ color: 'var(--muted)' }}>{d}</p>
              </li>
            ))}
          </ul>
        </div>
        <div>
          <div className="mono uppercase-wide" style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.1em', marginBottom: 10 }}>¿Qué sucede después?</div>
          <ol style={{ paddingLeft: 18, color: 'var(--muted)', display: 'flex', flexDirection: 'column', gap: 4 }}>
            {WHAT_NEXT.map((t) => <li key={t}>{t}</li>)}
          </ol>
        </div>
      </aside>
    </div>
  )
}

function ReviewRow({ label, value }: { label: string; value: string }) {
  return (
    <li style={{ display: 'flex', gap: 8 }}>
      <span className="mono uppercase-wide" style={{ fontSize: 10, color: 'var(--muted)', minWidth: 90 }}>{label}</span>
      <span>{value}</span>
    </li>
  )
}