import { useState } from 'react';

interface Opportunity {
  id: string;
  title: string;
  amountEstimated: number;
  stage: string;
  contactId: string | null;
  companyId: string | null;
  lostReason: string | null;
  lastActivityAt: string | null;
  updatedAt: string;
}
interface Task {
  id: string;
  type: string;
  title: string;
  dueAt: string | null;
  status: string;
}
interface Activity {
  id: string;
  type: string;
  body: string;
  createdAt: string;
}

interface Props {
  opportunity: Opportunity;
  contactId: string | null;
  contactName: string;
  contactWhatsapp: string | null;
  contactEmail: string | null;
  contactLifecycle: string | null;
  companyName: string;
  stages: string[];
  stageLabels: Record<string, string>;
  initialTasks: Task[];
  initialActivities: Activity[];
}

const money = new Intl.NumberFormat('es-MX', {
  style: 'currency',
  currency: 'MXN',
  maximumFractionDigits: 0,
});

interface WaCtx {
  nombre: string;
  empresa: string;
  titulo: string;
  monto: string;
}

/** Mensaje de WhatsApp listo para enviar, personalizado y distinto por etapa. */
function waTemplate(stage: string, c: WaCtx): string {
  const saludo = `Hola ${c.nombre}`;
  const deEmpresa = c.empresa ? ` de ${c.empresa}` : '';
  switch (stage) {
    case 'lead_nuevo':
      return `${saludo}, te saluda Peninsula Fitness 👋. Vi tu interés en ${c.titulo}. ¿Te ayudo a elegir el piso ideal y armar tu cotización? Solo necesito los m² y tu código postal para pasarte precio y tiempos.`;
    case 'contactado':
      return `${saludo}${deEmpresa}, gracias por tu tiempo. ¿Avanzamos con la cotización de ${c.titulo}? Si me confirmas medidas y el uso del espacio, te la preparo hoy mismo.`;
    case 'cotizacion_enviada':
      return `${saludo}, ¿pudiste revisar la cotización de ${c.titulo} por ${c.monto}? Quedo al pendiente de cualquier duda sobre medidas, envío o instalación. 😊`;
    case 'seguimiento':
      return `${saludo}, doy seguimiento a tu proyecto de ${c.titulo}. ¿Cómo lo ves? Si necesitas ajustar cantidades o ver otras opciones, con gusto te apoyo.`;
    case 'negociacion':
      return `${saludo}, para cerrar tu pedido de ${c.titulo} (${c.monto}) puedo apoyarte con condiciones de envío e instalación. ¿Te marco para afinar los últimos detalles y agendar?`;
    case 'ganado':
      return `${saludo}, ¡gracias por tu confianza! 🎉 Coordinemos el envío e instalación de ${c.titulo}. ¿Me confirmas tus datos de facturación y la fecha que te conviene?`;
    case 'perdido':
      return `${saludo}, gracias por considerarnos para ${c.titulo}. Si más adelante retomas el proyecto, con gusto te apoyo con la mejor opción y precio. Quedo a tus órdenes. 🙌`;
    default:
      return `${saludo}, te saluda Peninsula Fitness. ¿Cómo te puedo ayudar con ${c.titulo}?`;
  }
}

/** Tres variantes de mensaje de WhatsApp: por etapa, directo y con oferta. */
const WA_VARIANTS = [
  { key: 'etapa', label: 'Por etapa' },
  { key: 'directo', label: 'Directo' },
  { key: 'oferta', label: 'Con oferta' },
];
function waTemplates(stage: string, c: WaCtx): string[] {
  const saludo = `Hola ${c.nombre}`;
  const directo = `${saludo}, soy tu asesor en Peninsula Fitness 👋. Doy seguimiento a ${c.titulo}. ¿Tienes 2 minutos para resolver dudas y avanzar? Quedo al pendiente.`;
  const oferta = `${saludo}, en Peninsula Fitness te apoyamos con asesoría gratuita, cortes a medida y precio por volumen para ${c.titulo}. Si me confirmas tus m² te paso el mejor precio directo con factura. 💪`;
  return [waTemplate(stage, c), directo, oferta];
}

interface Suggestion {
  type: string;
  title: string;
}

/** Tareas sugeridas según la etapa del lead. */
function taskSuggestions(stage: string): Suggestion[] {
  const map: Record<string, Suggestion[]> = {
    lead_nuevo: [
      { type: 'call', title: 'Llamar para presentar y calificar' },
      { type: 'whatsapp', title: 'Enviar catálogo por WhatsApp' },
      { type: 'follow_up', title: 'Pedir m², CP y uso del espacio' },
    ],
    contactado: [
      { type: 'review_quote', title: 'Preparar y enviar cotización' },
      { type: 'whatsapp', title: 'Confirmar medidas y código postal' },
    ],
    cotizacion_enviada: [
      { type: 'follow_up', title: 'Seguimiento día 1' },
      { type: 'call', title: 'Resolver dudas de la cotización' },
    ],
    seguimiento: [
      { type: 'follow_up', title: 'Seguimiento día 3' },
      { type: 'whatsapp', title: 'Ofrecer asesoría de instalación' },
    ],
    negociacion: [
      { type: 'call', title: 'Acordar condiciones de pago' },
      { type: 'review_quote', title: 'Enviar propuesta final' },
    ],
    ganado: [
      { type: 'follow_up', title: 'Coordinar envío e instalación' },
      { type: 'email', title: 'Solicitar datos de facturación' },
    ],
    perdido: [{ type: 'follow_up', title: 'Reactivar en 30 días' }],
  };
  return map[stage] ?? [];
}

const fmtDate = (iso: string | null) =>
  iso ? new Intl.DateTimeFormat('es-MX', { dateStyle: 'medium', timeStyle: 'short' }).format(new Date(iso)) : '—';

const TASK_TYPES = ['call', 'whatsapp', 'email', 'review_quote', 'follow_up'];
const TASK_TYPE_LABEL: Record<string, string> = {
  call: 'Llamada',
  whatsapp: 'WhatsApp',
  email: 'Email',
  review_quote: 'Revisar cotización',
  follow_up: 'Seguimiento',
};

export default function OpportunityDetail({
  opportunity,
  contactId,
  contactName,
  contactWhatsapp,
  contactEmail,
  contactLifecycle,
  companyName,
  stages,
  stageLabels,
  initialTasks,
  initialActivities,
}: Props) {
  const [opp, setOpp] = useState(opportunity);
  const [tasks, setTasks] = useState(initialTasks);
  const [acts, setActs] = useState(initialActivities);

  const firstName = (contactName || '').split(' ')[0] || 'cliente';
  const waDigits = (contactWhatsapp || '').replace(/\D/g, '');
  const waCtx = (): WaCtx => ({
    nombre: firstName,
    empresa: companyName && companyName !== '—' ? companyName : '',
    titulo: opp.title,
    monto: money.format(opp.amountEstimated),
  });
  const [waVariant, setWaVariant] = useState(0);
  const [waMsg, setWaMsg] = useState(() =>
    waTemplate(opportunity.stage, {
      nombre: (contactName || '').split(' ')[0] || 'cliente',
      empresa: companyName && companyName !== '—' ? companyName : '',
      titulo: opportunity.title,
      monto: money.format(opportunity.amountEstimated),
    }),
  );

  function applyVariant(i: number) {
    setWaVariant(i);
    setWaMsg(waTemplates(opp.stage, waCtx())[i] ?? '');
  }

  function openWhatsApp() {
    if (!waDigits) return;
    window.open(`https://wa.me/${waDigits}?text=${encodeURIComponent(waMsg)}`, '_blank');
  }

  const [title, setTitle] = useState(opportunity.title);
  const [amount, setAmount] = useState(String(opportunity.amountEstimated));
  const [lostReason, setLostReason] = useState(opportunity.lostReason ?? '');
  const [savingField, setSavingField] = useState(false);
  const [msg, setMsg] = useState<{ text: string; ok: boolean } | null>(null);

  const [note, setNote] = useState('');
  const [taskTitle, setTaskTitle] = useState('');
  const [taskType, setTaskType] = useState('follow_up');
  const [taskDue, setTaskDue] = useState('');
  const [busy, setBusy] = useState(false);

  function flash(text: string, ok = true) {
    setMsg({ text, ok });
    setTimeout(() => setMsg(null), 3500);
  }

  async function api(url: string, method: string, body?: unknown) {
    const res = await fetch(url, {
      method,
      headers: body ? { 'content-type': 'application/json' } : undefined,
      body: body ? JSON.stringify(body) : undefined,
    });
    return res.json();
  }

  async function refreshActivities() {
    const json = await api(
      `/api/crm/activities?relatedType=opportunity&relatedId=${opp.id}`,
      'GET',
    );
    if (json.ok) setActs(json.data);
  }
  async function refreshTasks() {
    const json = await api(`/api/crm/tasks?opportunityId=${opp.id}`, 'GET');
    if (json.ok) setTasks(json.data);
  }

  async function saveFields() {
    setSavingField(true);
    const json = await api(`/api/crm/opportunities/${opp.id}`, 'PATCH', {
      title,
      amountEstimated: Number(amount) || 0,
      lostReason: lostReason || null,
    });
    setSavingField(false);
    if (json.ok) {
      setOpp(json.data);
      flash('Cambios guardados.');
    } else {
      flash(json.error || 'No se pudo guardar.', false);
    }
  }

  async function changeStage(stage: string) {
    if (stage === opp.stage) return;
    const reason =
      stage === 'perdido' && !lostReason
        ? window.prompt('Motivo de pérdida (obligatorio):') || ''
        : lostReason;
    if (stage === 'perdido' && !reason) {
      flash('Necesitas un motivo para marcar como perdida.', false);
      return;
    }
    setBusy(true);
    const json = await api(`/api/crm/opportunities/${opp.id}/change-stage`, 'POST', {
      stage,
      reason: reason || undefined,
    });
    setBusy(false);
    if (json.ok) {
      setOpp((o) => ({ ...o, stage, lostReason: reason || o.lostReason }));
      if (reason) setLostReason(reason);
      // El mensaje de WhatsApp se adapta a la nueva etapa (variante elegida).
      setWaMsg(waTemplates(stage, { ...waCtx(), titulo: opp.title })[waVariant] ?? '');
      flash(`Etapa: ${stageLabels[stage] ?? stage}`);
      refreshActivities();
    } else {
      flash(json.error || 'No se pudo cambiar la etapa.', false);
    }
  }

  async function addNote(e: React.FormEvent) {
    e.preventDefault();
    if (!note.trim()) return;
    setBusy(true);
    const json = await api('/api/crm/activities', 'POST', {
      relatedType: 'opportunity',
      relatedId: opp.id,
      type: 'note',
      body: note.trim(),
    });
    setBusy(false);
    if (json.ok) {
      setNote('');
      refreshActivities();
      flash('Nota agregada.');
    } else {
      flash(json.error || 'No se pudo agregar la nota.', false);
    }
  }

  async function addTask(e: React.FormEvent) {
    e.preventDefault();
    if (!taskTitle.trim()) return;
    setBusy(true);
    const json = await api('/api/crm/tasks', 'POST', {
      opportunityId: opp.id,
      contactId: opp.contactId,
      type: taskType,
      title: taskTitle.trim(),
      dueAt: taskDue ? new Date(taskDue).toISOString() : null,
    });
    setBusy(false);
    if (json.ok) {
      setTaskTitle('');
      setTaskDue('');
      refreshTasks();
      flash('Tarea creada.');
    } else {
      flash(json.error || 'No se pudo crear la tarea.', false);
    }
  }

  async function addSuggestedTask(s: Suggestion) {
    setBusy(true);
    const json = await api('/api/crm/tasks', 'POST', {
      opportunityId: opp.id,
      contactId: opp.contactId,
      type: s.type,
      title: s.title,
      dueAt: new Date(Date.now() + 86_400_000).toISOString(),
    });
    setBusy(false);
    if (json.ok) {
      refreshTasks();
      flash('Tarea agregada.');
    } else {
      flash(json.error || 'No se pudo agregar la tarea.', false);
    }
  }

  async function completeTask(id: string) {
    const json = await api(`/api/crm/tasks/${id}/complete`, 'POST');
    if (json.ok) refreshTasks();
  }
  async function deleteTask(id: string) {
    if (!window.confirm('¿Eliminar esta tarea?')) return;
    const json = await api(`/api/crm/tasks/${id}`, 'DELETE');
    if (json.ok) refreshTasks();
  }

  const isWon = opp.stage === 'ganado';
  const isLost = opp.stage === 'perdido';

  return (
    <div>
      {msg && (
        <p
          className="notice"
          style={{ marginBottom: 16, color: msg.ok ? 'var(--pf-success)' : '#ff7a8a' }}
        >
          {msg.text}
        </p>
      )}

      <div style={{ display: 'grid', gap: 16 }}>
        {/* ---- Resumen del contacto ---- */}
        <div className="card" style={{ padding: 18 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 8 }}>
            <h2 style={{ fontSize: '1.1rem' }}>Contacto</h2>
            {contactId && (
              <a href={`/crm/leads/${contactId}`} style={{ color: 'var(--pf-accent-300)', fontWeight: 600, fontSize: '.85rem' }}>
                Ver / editar ficha →
              </a>
            )}
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 10, marginTop: 8 }}>
            <div><div className="muted" style={{ fontSize: '.72rem', textTransform: 'uppercase', letterSpacing: '.06em' }}>Nombre</div><strong>{contactName}</strong></div>
            <div><div className="muted" style={{ fontSize: '.72rem', textTransform: 'uppercase', letterSpacing: '.06em' }}>Empresa</div><strong>{companyName}</strong></div>
            <div><div className="muted" style={{ fontSize: '.72rem', textTransform: 'uppercase', letterSpacing: '.06em' }}>WhatsApp</div><strong>{contactWhatsapp ?? '—'}</strong></div>
            <div><div className="muted" style={{ fontSize: '.72rem', textTransform: 'uppercase', letterSpacing: '.06em' }}>Correo</div><strong style={{ wordBreak: 'break-all' }}>{contactEmail ?? '—'}</strong></div>
            <div><div className="muted" style={{ fontSize: '.72rem', textTransform: 'uppercase', letterSpacing: '.06em' }}>Ciclo de vida</div><strong>{contactLifecycle ? (stageLabels[contactLifecycle] ?? contactLifecycle) : '—'}</strong></div>
          </div>
        </div>

        {/* ---- Datos editables ---- */}
        <div className="card" style={{ padding: 18 }}>
          <h2 style={{ fontSize: '1.1rem' }}>Datos de la oportunidad</h2>
          <div className="field">
            <label>Título</label>
            <input className="input" value={title} onChange={(e) => setTitle(e.target.value)} />
          </div>
          <div className="field">
            <label>Monto estimado (MXN)</label>
            <input
              className="input"
              type="number"
              inputMode="decimal"
              value={amount}
              onChange={(e) => setAmount(e.target.value)}
            />
          </div>
          {isLost && (
            <div className="field">
              <label>Motivo de pérdida</label>
              <input className="input" value={lostReason} onChange={(e) => setLostReason(e.target.value)} />
            </div>
          )}
          <div className="muted" style={{ fontSize: '.85rem', marginBottom: 12 }}>
            Última actividad: {fmtDate(opp.lastActivityAt)}
          </div>
          <button className="btn btn-primary" disabled={savingField} onClick={saveFields}>
            {savingField ? 'Guardando…' : 'Guardar cambios'}
          </button>
        </div>

        {/* ---- Etapa / avanzar ---- */}
        <div className="card" style={{ padding: 18 }}>
          <h2 style={{ fontSize: '1.1rem' }}>Etapa</h2>
          <p className="muted" style={{ fontSize: '.85rem' }}>
            Actual: <strong style={{ color: 'var(--pf-accent-300)' }}>{stageLabels[opp.stage] ?? opp.stage}</strong>
          </p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 8 }}>
            {stages.map((s) => (
              <button
                key={s}
                disabled={busy || s === opp.stage}
                onClick={() => changeStage(s)}
                className="chip"
                style={{
                  cursor: s === opp.stage ? 'default' : 'pointer',
                  background: s === opp.stage ? 'var(--pf-accent)' : 'transparent',
                  color: s === opp.stage ? '#fff' : 'var(--pf-text-dim)',
                  borderColor: s === opp.stage ? 'var(--pf-accent)' : 'var(--pf-border)',
                }}
              >
                {stageLabels[s] ?? s}
              </button>
            ))}
          </div>
          <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
            <button
              className="btn btn-secondary"
              style={{ width: 'auto' }}
              disabled={busy || isWon}
              onClick={() => changeStage('ganado')}
            >
              ✓ Marcar ganado
            </button>
            <button
              className="btn btn-secondary"
              style={{ width: 'auto' }}
              disabled={busy || isLost}
              onClick={() => changeStage('perdido')}
            >
              ✕ Marcar perdido
            </button>
          </div>
        </div>

        {/* ---- Seguimiento por WhatsApp ---- */}
        <div className="card" style={{ padding: 18 }}>
          <h2 style={{ fontSize: '1.1rem' }}>Seguimiento por WhatsApp</h2>
          <p className="muted" style={{ fontSize: '.85rem' }}>
            Etapa <strong style={{ color: 'var(--pf-accent-300)' }}>{stageLabels[opp.stage] ?? opp.stage}</strong>
            {waDigits ? <> · a {contactWhatsapp}</> : <> · sin WhatsApp registrado</>}
          </p>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', margin: '10px 0 4px' }}>
            {WA_VARIANTS.map((v, i) => (
              <button
                key={v.key}
                className="chip"
                style={{
                  cursor: 'pointer',
                  background: waVariant === i ? 'var(--pf-accent)' : 'transparent',
                  color: waVariant === i ? '#fff' : 'var(--pf-text-dim)',
                  borderColor: waVariant === i ? 'var(--pf-accent)' : 'var(--pf-border)',
                }}
                onClick={() => applyVariant(i)}
              >
                {v.label}
              </button>
            ))}
          </div>
          <div className="field" style={{ margin: '10px 0' }}>
            <textarea
              className="textarea"
              rows={5}
              value={waMsg}
              onChange={(e) => setWaMsg(e.target.value)}
            />
          </div>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            <button
              className="btn btn-whatsapp"
              style={{ width: 'auto' }}
              disabled={!waDigits}
              onClick={openWhatsApp}
            >
              💬 Abrir WhatsApp
            </button>
            <button
              className="btn btn-secondary"
              style={{ width: 'auto' }}
              onClick={() => setWaMsg(waTemplate(opp.stage, waCtx()))}
              type="button"
            >
              ↺ Plantilla de la etapa
            </button>
          </div>
        </div>

        {/* ---- Tareas ---- */}
        <div className="card" style={{ padding: 18 }}>
          <h2 style={{ fontSize: '1.1rem' }}>Tareas ({tasks.filter((t) => t.status !== 'completed').length} abiertas)</h2>

          {/* Sugerencias según la etapa */}
          {taskSuggestions(opp.stage).length > 0 && (
            <div style={{ margin: '10px 0' }}>
              <div className="muted" style={{ fontSize: '.78rem', marginBottom: 6 }}>
                Sugerencias para esta etapa (clic para agregar):
              </div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                {taskSuggestions(opp.stage).map((s) => (
                  <button
                    key={s.title}
                    className="chip"
                    style={{ cursor: 'pointer' }}
                    disabled={busy}
                    onClick={() => addSuggestedTask(s)}
                  >
                    + {s.title}
                  </button>
                ))}
              </div>
            </div>
          )}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, margin: '10px 0' }}>
            {tasks.length === 0 && <p className="muted" style={{ fontSize: '.85rem' }}>Sin tareas.</p>}
            {tasks.map((t) => (
              <div
                key={t.id}
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: 8,
                  padding: '8px 10px',
                  border: '1px solid var(--pf-border)',
                  borderRadius: 8,
                  opacity: t.status === 'completed' ? 0.55 : 1,
                }}
              >
                <span style={{ flex: 1 }}>
                  <strong style={{ fontSize: '.9rem' }}>{t.title}</strong>
                  <br />
                  <span className="muted" style={{ fontSize: '.75rem' }}>
                    {TASK_TYPE_LABEL[t.type] ?? t.type} · vence {fmtDate(t.dueAt)} ·{' '}
                    <span style={{ color: t.status === 'overdue' ? '#ff7a8a' : 'inherit' }}>{t.status}</span>
                  </span>
                </span>
                {t.status !== 'completed' && (
                  <button className="chip" style={{ cursor: 'pointer' }} onClick={() => completeTask(t.id)}>
                    ✓
                  </button>
                )}
                <button className="chip" style={{ cursor: 'pointer' }} onClick={() => deleteTask(t.id)}>
                  🗑
                </button>
              </div>
            ))}
          </div>
          <form onSubmit={addTask} style={{ borderTop: '1px solid var(--pf-border)', paddingTop: 12 }}>
            <div className="field" style={{ marginBottom: 8 }}>
              <input
                className="input"
                placeholder="Nueva tarea…"
                value={taskTitle}
                onChange={(e) => setTaskTitle(e.target.value)}
              />
            </div>
            <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
              <select className="select" value={taskType} onChange={(e) => setTaskType(e.target.value)}>
                {TASK_TYPES.map((t) => (
                  <option key={t} value={t}>
                    {TASK_TYPE_LABEL[t]}
                  </option>
                ))}
              </select>
              <input
                className="input"
                type="datetime-local"
                value={taskDue}
                onChange={(e) => setTaskDue(e.target.value)}
              />
            </div>
            <button className="btn btn-secondary" disabled={busy}>
              Agregar tarea
            </button>
          </form>
        </div>

        {/* ---- Actividad / notas ---- */}
        <div className="card" style={{ padding: 18 }}>
          <h2 style={{ fontSize: '1.1rem' }}>Actividad</h2>
          <form onSubmit={addNote} style={{ margin: '10px 0' }}>
            <div className="field" style={{ marginBottom: 8 }}>
              <textarea
                className="textarea"
                rows={2}
                placeholder="Agregar una nota, llamada o seguimiento…"
                value={note}
                onChange={(e) => setNote(e.target.value)}
              />
            </div>
            <button className="btn btn-secondary" disabled={busy}>
              Agregar nota
            </button>
          </form>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {acts.length === 0 && <p className="muted" style={{ fontSize: '.85rem' }}>Sin actividad.</p>}
            {acts.map((a) => (
              <div key={a.id} style={{ paddingBottom: 8, borderBottom: '1px solid var(--pf-border)' }}>
                <div style={{ fontSize: '.9rem' }}>{a.body}</div>
                <div className="muted" style={{ fontSize: '.72rem' }}>
                  {a.type} · {fmtDate(a.createdAt)}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}