/* ============================================================
   DASHBOARD — Panel de inicio personalizado
   ============================================================ */

function Dashboard({ user, t, lang, onGo, onOpenChat, onOpenContract }) {
  const data = useHistory();
  const deadlines = lxNextDeadlines();
  const topDeadlines = deadlines.slice(0, 3);
  const recentContracts = data.contracts.slice(0, 3);
  const recentChats = data.chats.slice(0, 3);

  const hour = new Date().getHours();
  const greetKey = hour < 12 ? 'dash.greetingMorning' : hour < 20 ? 'dash.greetingAfternoon' : 'dash.greetingEvening';
  const firstName = (user.name || '').split(' ')[0];

  const statusColor = { red: 'var(--red)', amber: 'var(--amber)', green: 'var(--green)' };

  const QA = [
    { id: 'chat', icon: 'chat', t: t('dash.qa.chat'), d: t('dash.qa.chatDesc'), action: onOpenChat },
    { id: 'contract', icon: 'contract', t: t('dash.qa.contract'), d: t('dash.qa.contractDesc'), action: () => onOpenContract() },
    { id: 'review', icon: 'review', t: t('dash.qa.review'), d: t('dash.qa.reviewDesc'), action: () => onGo('review') },
  ];

  return (
    <div className="section-pad fade-up dash">
      <div className="dash-hero">
        <h1>{t(greetKey)}{firstName && firstName !== 'Invitado' ? `, ${firstName}` : ''}.</h1>
        <p>{t('dash.welcome')}</p>
      </div>

      {/* Quick actions */}
      <div className="dash-block">
        <div className="dash-block-head"><Icon name="bolt" size={15} /> {t('dash.quickActions')}</div>
        <div className="qa-grid">
          {QA.map(q => (
            <button key={q.id} className="qa-card" onClick={q.action}>
              <div className="qa-ic"><Icon name={q.icon} size={20} /></div>
              <div className="qa-text">
                <strong>{q.t}</strong>
                <span>{q.d}</span>
              </div>
              <Icon name="arrowRight" size={16} className="qa-arr" />
            </button>
          ))}
        </div>
      </div>

      {/* Promos: análisis de riesgos + asistente Hacienda */}
      <div className="dash-spotlight">
        <button className="dash-risk" onClick={() => onGo('risks')}>
          <div className="dr-ic"><Icon name="shield" size={22} /></div>
          <div className="dr-text">
            <strong>Análisis de riesgos fiscales</strong>
            <span>Detecta puntos de atención, sin agobios.</span>
          </div>
          <span className="dr-cta"><Icon name="arrowRight" size={15} /></span>
        </button>
        <button className="dash-risk hac" onClick={() => onGo('hacienda')}>
          <div className="dr-ic"><Icon name="mail" size={22} /></div>
          <div className="dr-text">
            <strong>Asistente con Hacienda</strong>
            <span>¿Te ha llegado una carta? Te ayudo.</span>
          </div>
          <span className="dr-cta"><Icon name="arrowRight" size={15} /></span>
        </button>
      </div>

      <div className="dash-cols">
        {/* Deadlines */}
        <div className="dash-block">
          <div className="dash-block-head">
            <Icon name="calendar" size={15} /> {t('dash.deadlines')}
            <button className="dash-link" onClick={() => onGo('alerts')}>{t('dash.viewAll')} <Icon name="arrowRight" size={13} /></button>
          </div>
          <div className="deadline-list">
            {topDeadlines.map((d, i) => (
              <button key={i} className="deadline-item" onClick={() => onGo('alerts')}>
                <div className="dl-code" style={{ color: statusColor[d.status] }}>{d.code}</div>
                <div className="dl-meta">
                  <strong>{d.name}</strong>
                  <span>{d.desc[lang] || d.desc.es}</span>
                </div>
                <div className="dl-days" style={{ color: statusColor[d.status] }}>
                  <b>{d.days}</b> {d.days === 1 ? t('dash.day') : t('dash.days')}
                </div>
              </button>
            ))}
          </div>
        </div>

        {/* Recent documents */}
        <div className="dash-block">
          <div className="dash-block-head">
            <Icon name="contract" size={15} /> {t('dash.recent')}
            {recentContracts.length > 0 && <button className="dash-link" onClick={() => onGo('history')}>{t('dash.viewAll')} <Icon name="arrowRight" size={13} /></button>}
          </div>
          {recentContracts.length > 0 ? (
            <div className="recent-list">
              {recentContracts.map(c => (
                <button key={c.id} className="recent-item" onClick={() => onOpenContract(c)}>
                  <div className="ri-ic"><Icon name="file" size={16} /></div>
                  <div className="ri-meta">
                    <strong>{c.title}</strong>
                    <span>{lxRelDate(c.createdAt, lang)}</span>
                  </div>
                  <Icon name="arrowRight" size={15} className="ri-arr" />
                </button>
              ))}
            </div>
          ) : (
            <div className="dash-empty">
              <div className="de-ic"><Icon name="contract" size={20} /></div>
              <p>{t('dash.recentEmpty')}</p>
              <button className="btn btn-ghost de-btn" onClick={() => onOpenContract()}>{t('dash.openContract')}</button>
            </div>
          )}
        </div>
      </div>

      {/* Recent chats (full width) */}
      <div className="dash-block">
        <div className="dash-block-head">
          <Icon name="chat" size={15} /> {t('dash.recentChats')}
          {recentChats.length > 0 && <button className="dash-link" onClick={() => onGo('history')}>{t('dash.viewAll')} <Icon name="arrowRight" size={13} /></button>}
        </div>
        {recentChats.length > 0 ? (
          <div className="recent-list chats">
            {recentChats.map(c => (
              <button key={c.id} className="recent-item" onClick={() => onOpenChat(c)}>
                <div className="ri-ic chat"><Icon name="message" size={16} /></div>
                <div className="ri-meta">
                  <strong>{c.title}</strong>
                  <span>{lxRelDate(c.updatedAt, lang)} · {c.messages ? Math.floor(c.messages.filter(m => m.role === 'user').length) : 0} {t('hist.messages')}</span>
                </div>
                <Icon name="arrowRight" size={15} className="ri-arr" />
              </button>
            ))}
          </div>
        ) : (
          <div className="dash-empty">
            <div className="de-ic"><Icon name="chat" size={20} /></div>
            <p>{t('dash.chatsEmpty')}</p>
            <button className="btn btn-ghost de-btn" onClick={onOpenChat}>{t('dash.qa.chat')}</button>
          </div>
        )}
      </div>

      <style>{`
        .dash { max-width: 1020px; }
        .dash-hero { margin-bottom: 30px; }
        .dash-hero h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.025em; color: var(--white); }
        .dash-hero p { font-size: 15px; color: var(--text-2); margin-top: 6px; }
        .dash-block { margin-bottom: 26px; }
        .dash-block-head { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 14px; white-space: nowrap; }
        .dash-block-head .ic { color: var(--violet-soft); flex-shrink: 0; }
        .dash-link { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500; color: var(--text-3); transition: color .15s; flex-shrink: 0; }
        .dash-link .ic { color: inherit; }
        .dash-link:hover { color: var(--violet-soft); }

        .qa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
        .qa-card { display: flex; align-items: center; gap: 14px; text-align: left; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: transform .15s, border-color .15s, background .15s; }
        .qa-card:hover { transform: translateY(-3px); border-color: var(--violet-line); background: var(--surface-2); }
        .qa-ic { width: 46px; height: 46px; border-radius: 12px; background: var(--violet-dim); border: 1px solid var(--violet-line); display: grid; place-items: center; color: var(--violet-soft); flex-shrink: 0; }
        .qa-text { flex: 1; min-width: 0; }
        .qa-text strong { display: block; font-size: 14.5px; font-weight: 600; color: var(--white); }
        .qa-text span { font-size: 12.5px; color: var(--text-3); }
        .qa-arr { color: var(--text-4); transition: transform .15s, color .15s; flex-shrink: 0; }
        .qa-card:hover .qa-arr { color: var(--violet-soft); transform: translateX(3px); }

        .dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
        .dash-spotlight { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 26px; }
        .dash-risk { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 16px 18px; border-radius: var(--radius); border: 1px solid var(--violet-line); background: linear-gradient(120deg, var(--violet-dim), transparent); transition: transform .15s, background .15s; }
        .dash-risk:hover { transform: translateY(-2px); background: linear-gradient(120deg, rgba(124,58,237,0.2), transparent); }
        .dash-risk.hac { border-color: rgba(251,191,36,0.3); background: linear-gradient(120deg, var(--amber-dim), transparent); }
        .dash-risk.hac:hover { background: linear-gradient(120deg, rgba(251,191,36,0.18), transparent); }
        .dash-risk.hac .dr-ic { background: var(--amber-dim); border-color: rgba(251,191,36,0.3); color: var(--amber); }
        .dash-risk.hac .dr-cta { color: var(--amber); }
        .dr-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--violet-dim); border: 1px solid var(--violet-line); display: grid; place-items: center; color: var(--violet-soft); flex-shrink: 0; }
        .dr-text { flex: 1; min-width: 0; }
        .dr-text strong { display: block; font-size: 14px; font-weight: 600; color: var(--white); }
        .dr-text span { font-size: 12px; color: var(--text-2); }
        .dr-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--violet-soft); flex-shrink: 0; }

        .deadline-list, .recent-list { display: flex; flex-direction: column; gap: 9px; }
        .deadline-item, .recent-item { display: flex; align-items: center; gap: 13px; text-align: left; width: 100%; padding: 13px 15px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; transition: border-color .15s, background .15s, transform .12s; }
        .deadline-item:hover, .recent-item:hover { border-color: var(--line-2); background: var(--surface-2); transform: translateX(2px); }
        .dl-code { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 36px; }
        .dl-meta, .ri-meta { flex: 1; min-width: 0; }
        .dl-meta strong, .ri-meta strong { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .dl-meta span, .ri-meta span { font-size: 12px; color: var(--text-3); }
        .dl-days { text-align: right; font-size: 12px; color: var(--text-2); flex-shrink: 0; }
        .dl-days b { display: block; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
        .ri-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; color: var(--violet-soft); flex-shrink: 0; }
        .ri-ic.chat { color: var(--text-2); }
        .ri-arr { color: var(--text-4); flex-shrink: 0; }
        .recent-item:hover .ri-arr { color: var(--text-2); }

        .dash-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 32px 24px; background: var(--surface); border: 1px dashed var(--line-2); border-radius: var(--radius); }
        .de-ic { width: 46px; height: 46px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; color: var(--text-3); }
        .dash-empty p { font-size: 13px; color: var(--text-3); line-height: 1.55; max-width: 320px; }
        .de-btn { padding: 8px 14px; font-size: 12.5px; }

        @media (max-width: 860px) {
          .qa-grid { grid-template-columns: 1fr; }
          .dash-spotlight { grid-template-columns: 1fr; }
          .dash-cols { grid-template-columns: 1fr; gap: 26px; }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { Dashboard });