// Reusable pastel "widget" components inspired by the app's dashboard cards.
// Colors: pastel rose, mint, sky, butter, lavender - same L/C, varied hue.

const LUCHI_PASTELS = {
  rose:    { bg: "oklch(94% 0.05 20)",  ring: "oklch(86% 0.08 20)",  ink: "oklch(40% 0.14 20)",  soft: "oklch(97% 0.02 20)"  },
  butter:  { bg: "oklch(95% 0.07 95)",  ring: "oklch(88% 0.1 95)",   ink: "oklch(42% 0.12 80)",  soft: "oklch(98% 0.03 95)"  },
  mint:    { bg: "oklch(94% 0.06 160)", ring: "oklch(86% 0.08 160)", ink: "oklch(38% 0.1 160)",  soft: "oklch(97% 0.02 160)" },
  sky:     { bg: "oklch(94% 0.05 230)", ring: "oklch(86% 0.07 230)", ink: "oklch(40% 0.12 240)", soft: "oklch(97% 0.02 230)" },
  lavender:{ bg: "oklch(94% 0.05 290)", ring: "oklch(86% 0.07 290)", ink: "oklch(40% 0.12 290)", soft: "oklch(97% 0.02 290)" },
  blush:   { bg: "oklch(94% 0.06 0)",   ring: "oklch(86% 0.08 0)",   ink: "oklch(42% 0.14 0)",   soft: "oklch(97% 0.02 0)"   },
};
window.LUCHI_PASTELS = LUCHI_PASTELS;

// -------- Client timer card (hero widget) --------
function TimerCard({ name, hours = "02:14:37", rate = 60, color = "sky", earned = "134.56", running = true, style }) {
  const c = LUCHI_PASTELS[color];
  return (
    <div className="lt-widget" style={{
      background: c.bg, borderColor: c.ring, color: "#1b1b1b", ...style
    }}>
      <div className="lt-widget-top">
        <span className="lt-dot" style={{ background: running ? c.ink : "#9a9a9a" }} />
        <span className="lt-status">{running ? "TRACKING" : "PAUSED"}</span>
        <span className="lt-widget-actions">↺ ✎</span>
      </div>
      <div className="lt-client-name">{name}</div>
      <div className="lt-timer-frame" style={{ background: c.soft, borderColor: c.ring }}>
        <div className="lt-timer-label">CURRENT SESSION</div>
        <div className="lt-timer-digits">{hours}</div>
      </div>
      <div className="lt-timer-meta">
        <span>${rate}/hr</span>
        <span>·</span>
        <span>${earned} today</span>
      </div>
      <div className="lt-timer-buttons">
        <button className="lt-btn-dark">{running ? "▐▐ Pause" : "▶ Start"}</button>
        <button className="lt-btn-light">Reset</button>
      </div>
    </div>
  );
}

// -------- Compact stat widget --------
function StatWidget({ label, value, sub, color = "butter", icon, style }) {
  const c = LUCHI_PASTELS[color];
  return (
    <div className="lt-stat" style={{ background: c.bg, borderColor: c.ring, ...style }}>
      <div className="lt-stat-top">
        <div className="lt-stat-icon" style={{ background: c.soft, color: c.ink, borderColor: c.ring }}>{icon}</div>
        <span className="lt-stat-label">{label}</span>
      </div>
      <div className="lt-stat-value">{value}</div>
      {sub && <div className="lt-stat-sub">{sub}</div>}
    </div>
  );
}

// -------- AFK prompt --------
function AFKWidget({ t, style }) {
  return (
    <div className="lt-prompt" style={{ background: LUCHI_PASTELS.rose.bg, borderColor: LUCHI_PASTELS.rose.ring, ...style }}>
      <div className="lt-prompt-head">
        <div className="lt-prompt-icon" style={{ background: LUCHI_PASTELS.rose.soft, color: LUCHI_PASTELS.rose.ink }}>⏸</div>
        <div>
          <div className="lt-prompt-title">{t.widget_afk}</div>
          <div className="lt-prompt-sub">00:15:02 idle detected</div>
        </div>
      </div>
      <div className="lt-prompt-actions">
        <button className="lt-chip">Discount</button>
        <button className="lt-chip">Keep</button>
        <button className="lt-chip lt-chip-dark">Pause</button>
      </div>
    </div>
  );
}

// -------- App detection --------
function AppDetectWidget({ t, style }) {
  return (
    <div className="lt-prompt" style={{ background: LUCHI_PASTELS.mint.bg, borderColor: LUCHI_PASTELS.mint.ring, ...style }}>
      <div className="lt-prompt-head">
        <div className="lt-prompt-icon" style={{ background: LUCHI_PASTELS.mint.soft, color: LUCHI_PASTELS.mint.ink }}>◆</div>
        <div>
          <div className="lt-prompt-title">{t.widget_app}</div>
          <div className="lt-prompt-sub">Detected 42 sec ago</div>
        </div>
      </div>
      <div className="lt-prompt-actions">
        <button className="lt-chip lt-chip-dark">Start Harper</button>
        <button className="lt-chip">Dismiss</button>
      </div>
    </div>
  );
}

// -------- Tiny bar chart (analytics) --------
function MiniChart({ color = "lavender", style }) {
  const c = LUCHI_PASTELS[color];
  const bars = [40, 72, 58, 90, 48, 81, 66];
  const days = ["M", "T", "W", "T", "F", "S", "S"];
  return (
    <div className="lt-chart" style={{ background: c.bg, borderColor: c.ring, ...style }}>
      <div className="lt-chart-head">
        <span className="lt-chart-label">THIS WEEK</span>
        <span className="lt-chart-val">34h 12m</span>
      </div>
      <div className="lt-chart-bars">
        {bars.map((h, i) => (
          <div key={i} className="lt-chart-col">
            <div className="lt-chart-bar" style={{ height: `${h}%`, background: c.ink, opacity: i === 3 ? 1 : 0.7 }} />
            <span className="lt-chart-day">{days[i]}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// -------- Invoice widget --------
function InvoiceWidget({ style }) {
  return (
    <div className="lt-invoice" style={{ ...style }}>
      <div className="lt-invoice-head">
        <div>
          <div className="lt-invoice-small">INVOICE · #0421</div>
          <div className="lt-invoice-to">Harper Studio</div>
        </div>
        <div className="lt-invoice-amt">$2,420.00</div>
      </div>
      <div className="lt-invoice-rows">
        <div className="lt-invoice-row"><span>Logo exploration</span><span>12.5h</span><span>$750</span></div>
        <div className="lt-invoice-row"><span>Brand system</span><span>18.0h</span><span>$1,080</span></div>
        <div className="lt-invoice-row"><span>Handoff & QA</span><span>9.8h</span><span>$590</span></div>
      </div>
      <div className="lt-invoice-foot">
        <span className="lt-invoice-status">● Ready to send</span>
        <button className="lt-btn-dark" style={{ fontSize: 11, padding: "6px 12px" }}>Send</button>
      </div>
    </div>
  );
}

// -------- Calendar widget --------
function CalendarWidget({ style }) {
  const days = Array.from({ length: 35 }, (_, i) => i - 2);
  const events = { 8: "rose", 9: "rose", 12: "sky", 15: "mint", 18: "butter", 22: "lavender", 23: "lavender", 24: "lavender" };
  return (
    <div className="lt-cal" style={{ ...style }}>
      <div className="lt-cal-head">
        <span className="lt-cal-month">APRIL</span>
        <span className="lt-cal-nav">‹ ›</span>
      </div>
      <div className="lt-cal-grid lt-cal-dow">
        {["S","M","T","W","T","F","S"].map((d, i) => <div key={i} className="lt-cal-dow-cell">{d}</div>)}
      </div>
      <div className="lt-cal-grid">
        {days.map((d, i) => {
          const day = d > 0 && d <= 30 ? d : null;
          const evt = day ? events[day] : null;
          return (
            <div key={i} className={`lt-cal-cell ${day === 15 ? "lt-cal-today" : ""}`}>
              {day && <span className="lt-cal-num">{day}</span>}
              {evt && <span className="lt-cal-ev" style={{ background: LUCHI_PASTELS[evt].ring }} />}
            </div>
          );
        })}
      </div>
    </div>
  );
}

// -------- Notification nudge --------
function NudgeWidget({ style }) {
  return (
    <div className="lt-nudge" style={{ ...style }}>
      <div className="lt-nudge-bell">
        <div className="lt-nudge-bell-inner">⏱</div>
      </div>
      <div>
        <div className="lt-nudge-title">30 minutes in.</div>
        <div className="lt-nudge-sub">Keep going or take five?</div>
      </div>
      <div className="lt-nudge-actions">
        <button className="lt-chip lt-chip-dark">Keep</button>
        <button className="lt-chip">Pause</button>
      </div>
    </div>
  );
}

Object.assign(window, {
  TimerCard, StatWidget, AFKWidget, AppDetectWidget,
  MiniChart, InvoiceWidget, CalendarWidget, NudgeWidget,
});