'use client'

import { useState } from 'react'
import { DataRow } from './SectionHeader'
import { MineralChip } from './MineralChip'
import { SatelliteMap } from './SatelliteMap'
import { Icon } from './Icon'
import { formatHa } from '@/lib/format'
import { COMMODITY_LABELS, COUNTRY_LABELS, type Commodity } from '@/lib/constants'
import {
  assetTypeLabel,
  stageLabel,
  modalityLabel,
  primaryCommodity,
  secondaryCommodities,
} from '@/lib/listing-view'
import type { ListingWithRelations } from '@/lib/listings'
import type { MapPin } from '@/lib/map-pin'

type Tab = 'resumen' | 'tecnico' | 'docs' | 'ubicacion' | 'publicador'

const TABS: [Tab, string][] = [
  ['resumen', 'Resumen'],
  ['tecnico', 'Datos técnicos'],
  ['docs', 'Documentación'],
  ['ubicacion', 'Ubicación'],
  ['publicador', 'Publicador'],
]

export function DetailTabs({
  listing,
  pins,
}: {
  listing: ListingWithRelations
  pins: MapPin[]
}) {
  const [tab, setTab] = useState<Tab>('resumen')
  const primary = primaryCommodity(listing)
  const mineralLabel = primary ? COMMODITY_LABELS[primary as Commodity] ?? primary : 'mineral'

  const keypoints = [
    `Activo de ${mineralLabel.toLowerCase()} en etapa de ${(stageLabel(listing.stage) ?? 'evaluación').toLowerCase()}.`,
    listing.surfaceHa != null
      ? `Superficie de ${formatHa(listing.surfaceHa)}${listing.concessionCount ? ` en ${listing.concessionCount} concesión(es)` : ''}.`
      : null,
    listing.mineralizationType ? `Mineralización tipo ${listing.mineralizationType}.` : null,
    listing.waterAccess || listing.energyAccess
      ? `Infraestructura — agua: ${listing.waterAccess ?? 'por definir'}; energía: ${listing.energyAccess ?? 'por definir'}.`
      : null,
    `Modalidad de negocio: ${modalityLabel(listing.dealTypes)}.`,
  ].filter(Boolean) as string[]

  return (
    <section style={{ paddingTop: 36 }}>
      <div style={{ display: 'flex', borderBottom: '1px solid var(--line-soft)', marginBottom: 24, flexWrap: 'wrap' }}>
        {TABS.map(([k, label]) => (
          <button
            key={k}
            onClick={() => setTab(k)}
            style={{
              padding: '12px 20px',
              fontSize: 13,
              fontWeight: 500,
              color: tab === k ? 'var(--ink)' : 'var(--muted)',
              borderBottom: '2px solid ' + (tab === k ? 'var(--accent)' : 'transparent'),
              marginBottom: -1,
              background: 'none',
              border: 'none',
              borderBottomWidth: 2,
              borderBottomStyle: 'solid',
              borderBottomColor: tab === k ? 'var(--accent)' : 'transparent',
            }}
          >
            {label}
          </button>
        ))}
      </div>

      {tab === 'resumen' && (
        <div>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--ink-2)', marginTop: 0 }}>{listing.description}</p>
          <h3 className="display" style={{ fontSize: 22, fontWeight: 600, marginTop: 32, letterSpacing: '-0.02em' }}>
            Puntos clave
          </h3>
          <ul style={{ listStyle: 'none', padding: 0, margin: '16px 0' }}>
            {keypoints.map((t, i) => (
              <li key={i} style={{ display: 'flex', gap: 14, padding: '10px 0', borderBottom: '1px solid var(--line-softer)' }}>
                <span className="mono" style={{ fontSize: 11, color: 'var(--muted)', minWidth: 28 }}>0{i + 1}</span>
                <span style={{ fontSize: 14, lineHeight: 1.5 }}>{t}</span>
              </li>
            ))}
          </ul>
          {listing.sellReason && (
            <div style={{ marginTop: 24, padding: 20, background: 'var(--bg-elev)', border: '1px solid var(--line-soft)' }}>
              <div className="mono uppercase-wide" style={{ fontSize: 10.5, color: 'var(--muted)' }}>
                <span style={{ color: 'var(--accent)' }}>▣</span> Motivo de venta
              </div>
              <div style={{ fontSize: 14, marginTop: 8, lineHeight: 1.5 }}>{listing.sellReason}</div>
            </div>
          )}
        </div>
      )}

      {tab === 'tecnico' && (
        <div className="tech-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
          <div>
            <TechHeader>Geología</TechHeader>
            <DataRow label="Mineral principal" value={primary ? `${mineralLabel}` : '—'} accent />
            <DataRow label="Minerales 2°" value={secondaryCommodities(listing).map((c) => COMMODITY_LABELS[c as Commodity] ?? c).join(', ') || '—'} />
            <DataRow label="Mineralización" value={listing.mineralizationType ?? '—'} mono={false} />
            <DataRow label="Obras realizadas" value={listing.works ?? '—'} mono={false} />

            <TechHeader style={{ marginTop: 28 }}>Superficie y linderos</TechHeader>
            <DataRow label="Hectáreas" value={formatHa(listing.surfaceHa)} />
            <DataRow label="Concesiones" value={listing.concessionCount?.toString() ?? '—'} />
            <DataRow label="Coordenadas" value={listing.lat != null && listing.lng != null ? `${listing.lat}°, ${listing.lng}°` : '—'} />
          </div>
          <div>
            <TechHeader>Infraestructura</TechHeader>
            <DataRow label="Acceso a agua" value={listing.waterAccess ?? '—'} mono={false} />
            <DataRow label="Acceso a energía" value={listing.energyAccess ?? '—'} mono={false} />

            <TechHeader style={{ marginTop: 28 }}>Situación</TechHeader>
            <DataRow label="Tipo de activo" value={assetTypeLabel(listing.assetType)} mono={false} />
            <DataRow label="Etapa" value={stageLabel(listing.stage) ?? '—'} mono={false} />
            <DataRow label="Ubicación" value={[listing.city, listing.region, COUNTRY_LABELS[listing.country] ?? listing.country].filter(Boolean).join(', ')} mono={false} />
            <DataRow label="Modalidad" value={modalityLabel(listing.dealTypes)} mono={false} />
          </div>
        </div>
      )}

      {tab === 'docs' && (
        <div style={{ padding: 24, background: 'var(--bg-elev)', border: '1px dashed var(--line-soft)', fontSize: 13, color: 'var(--muted)', lineHeight: 1.6 }}>
          <Icon name="download" size={18} style={{ color: 'var(--accent)' }} />
          <div style={{ color: 'var(--ink)', fontWeight: 600, marginTop: 8, fontSize: 15 }}>Documentación técnica bajo solicitud</div>
          Para acceder a informes técnicos, resultados de laboratorio, planos y permisos, solicita
          acceso al publicador desde el panel de contacto. La subida de archivos a la plataforma
          estará disponible próximamente.
        </div>
      )}

      {tab === 'ubicacion' && (
        <div style={{ border: '1px solid var(--line-soft)' }}>
          <SatelliteMap pins={pins} selectedId={listing.id} height={520} />
        </div>
      )}

      {tab === 'publicador' && (
        <div style={{ display: 'flex', gap: 20, alignItems: 'flex-start', flexWrap: 'wrap' }}>
          <div style={{ width: 80, height: 80, background: 'var(--ink)', color: 'var(--bg-elev)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--f-display)', fontWeight: 600, fontSize: 24 }}>
            {(listing.sellerCompany ?? 'PM').split(' ').map((w) => w[0]).slice(0, 2).join('')}
          </div>
          <div style={{ flex: 1, minWidth: 240 }}>
            <div className="display" style={{ fontSize: 22, fontWeight: 600 }}>{listing.sellerCompany ?? 'Publicador privado'}</div>
            <div style={{ display: 'flex', gap: 10, marginTop: 6, flexWrap: 'wrap' }}>
              {listing.verified && (
                <span className="mono uppercase-wide" style={{ fontSize: 10, padding: '3px 8px', background: 'var(--accent)', color: '#fff' }}>✓ Verificado</span>
              )}
              {listing.sellerType && (
                <span className="mono" style={{ fontSize: 11, color: 'var(--muted)' }}>{listing.sellerType.replace('_', ' ').toLowerCase()}</span>
              )}
            </div>
            {listing.sellerWebsite && (
              <a href={listing.sellerWebsite} target="_blank" rel="noreferrer" className="mono" style={{ fontSize: 12, color: 'var(--accent)', marginTop: 10, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                <Icon name="external" size={12} /> {listing.sellerWebsite}
              </a>
            )}
          </div>
        </div>
      )}
    </section>
  )
}

function TechHeader({ children, style }: { children: React.ReactNode; style?: React.CSSProperties }) {
  return (
    <div
      className="mono uppercase-wide"
      style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.1em', paddingBottom: 8, borderBottom: '1px solid var(--ink)', ...style }}
    >
      {children}
    </div>
  )
}