/* MIRAI — Tickets · pantalla de seguimiento de cambios solicitados */

// ---- Constantes ----
const TICKET_STATUSES = {
  pending:  { label: "Pendiente",   cls: "is-pending"  },
  progress: { label: "En progreso", cls: "is-progress" },
  done:     { label: "Publicado",   cls: "is-done"     },
};

const TICKET_STEPS = [
  "Solicitud recibida",
  "Aprobado",
  "En desarrollo",
  "Publicado",
];

const TICKETS_DATA = [
  {
    id: "TK-024", title: "Agregar pregunta por escritura",
    desc: "Consultar si el propietario cuenta con escritura.",
    status: "pending", step: 1,
    detailDesc: "Emma deberá preguntar si la propiedad cuenta con escritura antes de continuar el proceso de consulta.",
  },
  {
    id: "TK-021", title: "Mejorar filtro por barrio",
    desc: "Permitir búsquedas más precisas por zona.",
    status: "pending", step: 1,
    detailDesc: "Agregar filtros adicionales para que los clientes puedan delimitar la búsqueda a un barrio específico dentro de la zona.",
  },
  {
    id: "TK-023", title: "Mejorar búsqueda por propiedad específica",
    desc: "Buscar también por dirección, altura o código.",
    status: "progress", step: 3,
    detailDesc: "Emma deberá encontrar propiedades aunque el cliente envíe la dirección de forma incompleta.",
  },
  {
    id: "TK-022", title: "Ajustar saludo inicial",
    desc: "Evitar repetir la presentación de Emma.",
    status: "progress", step: 2,
    detailDesc: "Optimizar el flujo de bienvenida para que Emma no repita la presentación en conversaciones continuas.",
  },
  {
    id: "TK-019", title: "Confirmación antes de mostrar alquileres",
    desc: "Validar antes de enviar propiedades.",
    status: "done", step: 4,
    detailDesc: "Emma deberá confirmar los criterios del cliente antes de enviar el listado de propiedades en alquiler.",
  },
  {
    id: "TK-018", title: "Registrar audios correctamente",
    desc: "Guardar audios dentro del historial.",
    status: "done", step: 4,
    detailDesc: "Implementar el registro de mensajes de voz en el historial de conversaciones del cliente.",
  },
];

const TICKET_TABS = [
  { key: "todos",    label: "Todos",       icon: "home"    },
  { key: "pending",  label: "Pendientes",  icon: "clock"   },
  { key: "progress", label: "En progreso", icon: "refresh" },
  { key: "done",     label: "Resueltos",   icon: "check2"  },
];

const STATUS_COLS = [
  { status: "pending",  title: "Pendientes"  },
  { status: "progress", title: "En progreso" },
  { status: "done",     title: "Resueltos"   },
];

// ---- Badge de estado ----
function TicketBadge({ status }) {
  const cfg = TICKET_STATUSES[status] || { label: status, cls: "" };
  return <span className={`dash-tk__badge ${cfg.cls}`}>{cfg.label}</span>;
}

// ---- Tarjeta de ticket ----
function TicketCard({ ticket, selected, onSelect }) {
  return (
    <div
      className={`dash-tk__card ${selected ? "is-selected" : ""}`}
      onClick={() => onSelect(ticket)}
      tabIndex={0}
      role="button"
      onKeyDown={(e) => { if (e.key === "Enter") onSelect(ticket); }}>
      <span className="dash-tk__card-id">#{ticket.id} · {ticket.title}</span>
      <p className="dash-tk__card-desc">{ticket.desc}</p>
      <TicketBadge status={ticket.status} />
    </div>
  );
}

// ---- Columna del kanban ----
function TicketColumn({ title, tickets, selected, onSelect, animDelay }) {
  return (
    <div className="dash-tk__column" style={{ animationDelay: animDelay }}>
      <div className="dash-tk__column-head">
        <span className="dash-tk__column-title">{title}</span>
        <span className="dash-tk__column-count">{tickets.length}</span>
      </div>
      <div className="dash-tk__column-body">
        {tickets.map((t) => (
          <TicketCard
            key={t.id}
            ticket={t}
            selected={selected && selected.id === t.id}
            onSelect={onSelect} />
        ))}
        {tickets.length === 0 && (
          <div className="dash-tk__empty-col">Sin tickets en esta columna.</div>
        )}
      </div>
    </div>
  );
}

// ---- Pasos de progreso ----
function TicketProgress({ ticket }) {
  return (
    <ol className="dash-tk__steps">
      {TICKET_STEPS.map((s, i) => {
        const stepNum = i + 1;
        const isDone   = stepNum < ticket.step || ticket.status === "done";
        const isActive = stepNum === ticket.step && ticket.status !== "done";
        return (
          <li key={s} className="dash-tk__step">
            <span className="dash-tk__step-icon">
              {isDone ? (
                <svg viewBox="0 0 20 20" fill="none">
                  <circle cx="10" cy="10" r="10" fill="#22C55E"/>
                  <path d="M5.5 10.2l3 3 6-6.5" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              ) : isActive ? (
                <svg viewBox="0 0 20 20" fill="none">
                  <circle cx="10" cy="10" r="10" fill="#3B82F6"/>
                  <circle cx="10" cy="10" r="3.2" fill="#fff"/>
                </svg>
              ) : (
                <svg viewBox="0 0 20 20" fill="none">
                  <circle cx="10" cy="10" r="9" stroke="#D1D5DB" strokeWidth="2"/>
                </svg>
              )}
            </span>
            <span className={`dash-tk__step-label ${isActive ? "is-active" : ""} ${isDone ? "is-done" : ""}`}>
              {stepNum}. {s}
            </span>
          </li>
        );
      })}
    </ol>
  );
}

// ---- Panel de detalle ----
function TicketDetail({ ticket, onToast }) {
  if (!ticket) return (
    <div className="dash-tk__detail dash-tk__detail--empty">
      <Icon name="ticket" size={28} />
      <p>Seleccioná un ticket para ver el detalle.</p>
    </div>
  );
  return (
    <div className="dash-tk__detail">
      <div className="dash-tk__detail-head">
        <h3 className="dash-tk__detail-title">#{ticket.id} · {ticket.title}</h3>
        <TicketBadge status={ticket.status} />
      </div>
      <p className="dash-tk__detail-desc">{ticket.detailDesc}</p>
      <TicketProgress ticket={ticket} />
      <div className="dash-tk__detail-foot">
        <button className="dash-tk__foot-btn" onClick={() => onToast("Historial próximamente disponible.")}>
          <Icon name="clock" size={14} /> Ver historial
        </button>
        <button className="dash-tk__foot-btn dash-tk__foot-btn--primary" onClick={() => onToast("Comentarios próximamente disponibles.")}>
          <Icon name="comment" size={14} /> Agregar comentario
        </button>
      </div>
    </div>
  );
}

// ---- Tabs de filtro ----
function TicketFilters({ activeTab, setActiveTab }) {
  return (
    <div className="dash-tk__filters">
      {TICKET_TABS.map((t) => (
        <button
          key={t.key}
          className={`dash-tk__tab ${activeTab === t.key ? "is-on" : ""}`}
          onClick={() => setActiveTab(t.key)}>
          <Icon name={t.icon} size={15} />
          {t.label}
        </button>
      ))}
    </div>
  );
}

// ---- Página principal ----
function TicketsPage({ user, onLogout, env, setEnv, showEnvSwitch }) {
  const [tickets] = React.useState(TICKETS_DATA);
  const [selected, setSelected] = React.useState(
    () => TICKETS_DATA.find((t) => t.id === "TK-023") || null
  );
  const [activeTab, setActiveTab] = React.useState("todos");
  const [sbOpen, setSbOpen] = React.useState(false);
  const [toast, showToast] = useToast();

  const byStatus = (s) => tickets.filter((t) => t.status === s);

  // Qué columnas mostrar según el tab activo
  const visibleCols = activeTab === "todos"
    ? STATUS_COLS
    : STATUS_COLS.filter((c) => c.status === activeTab);

  // Grilla: 3 columnas cuando se ven todas, 1 cuando es filtro individual
  const boardCols = visibleCols.length === 1 ? "1fr" : "repeat(3, minmax(0, 1fr))";

  return (
    <div className="dboard">
      <DashboardSidebar
        active="tickets" user={user}
        onComingSoon={() => showToast(COMING_SOON)}
        open={sbOpen} onClose={() => setSbOpen(false)}
        env={env} setEnv={setEnv} showEnvSwitch={showEnvSwitch} />

      <div className="dash-main">
        <header className="dash-head">
          <div className="dash-head__left">
            <button className="dash-iconbtn dash-head__menu" onClick={() => setSbOpen(true)} aria-label="Abrir menú">
              <Icon name="menu" />
            </button>
            <div className="dash-head__heading">
              <h1 className="dash-head__title">Tickets</h1>
              <p className="dash-head__sub">Seguí en tiempo real el avance de cada cambio solicitado</p>
            </div>
          </div>
          <div className="dash-head__right">
            <button className="dash-tk__create-btn" onClick={() => showToast("Crear ticket próximamente disponible.")}>
              <Icon name="plus" size={16} /> Crear nuevo ticket
            </button>
            <button className="dash-iconbtn" aria-label="Actualizar" onClick={() => showToast("Actualizado.")}>
              <Icon name="refresh" size={18} />
            </button>
            <Dropdown
              align="right" className="dash-profile"
              button={(open, toggle) => (
                <button className="dash-avatar" onClick={toggle} aria-label="Perfil">
                  <Icon name="user" size={18} />
                </button>
              )}>
              <button className="dd__opt" onClick={() => showToast(COMING_SOON)}>Mi cuenta</button>
              <button className="dd__opt" onClick={onLogout}>Cerrar sesión</button>
            </Dropdown>
          </div>
        </header>

        <TicketFilters activeTab={activeTab} setActiveTab={setActiveTab} />

        <div className="dash-tk__layout">
          {/* key en el board fuerza re-mount y animación al cambiar tab */}
          <div className="dash-tk__board" key={activeTab} style={{ gridTemplateColumns: boardCols }}>
            {visibleCols.map((col, i) => (
              <TicketColumn
                key={col.status}
                title={col.title}
                tickets={byStatus(col.status)}
                selected={selected}
                onSelect={setSelected}
                animDelay={`${i * 55}ms`} />
            ))}
          </div>

          {/* key en el detalle fuerza animación al cambiar ticket */}
          <TicketDetail key={selected ? selected.id : "empty"} ticket={selected} onToast={showToast} />
        </div>
      </div>

      <ComingSoonNotice msg={toast} />
    </div>
  );
}

Object.assign(window, { TicketsPage });