import type { FC } from "hono/jsx";

export interface NeedsYouItem {
  title: string;
  detail: string;
  sessionHref?: string;
  diffHref?: string;
}

export interface ShippedItem {
  time: string;
  title: string;
  detail: string;
  meta: string;
}

export interface HandledItem {
  what: string;
  detail: string;
}

export interface DailyBriefProps {
  needsYou?: NeedsYouItem[];
  shipped?: ShippedItem[];
  handled?: HandledItem[];
  savedHrs?: number;
  user?: { name?: string; initials?: string };
}

const DEFAULT_NEEDS_YOU: NeedsYouItem[] = [
  {
    title: "Approve the repair on PR №218 — auto-repair × sandbox unification",
    detail:
      "Claude fixed the failing tests inside the PR sandbox overnight. Gates are green; Performance flagged an unbounded retry which Claude then capped. All that's left is your approval — or take the branch over manually if you'd rather work the diff yourself.",
    sessionHref: "#",
    diffHref: "#",
  },
];

const DEFAULT_SHIPPED: ShippedItem[] = [
  {
    time: "02:14",
    title: "Dependency bumps merged across 3 repos",
    detail:
      "drizzle-orm 0.44 → 0.45, hono patch, bun types. Fleet changeset, one review, all gates green.",
    meta: "gluecron · gluecron-cli · editor-extensions — reverted in one click if needed",
  },
  {
    time: "03:40",
    title: "Flaky test quarantined, then fixed",
    detail:
      "auto-repair bisected sandbox-boot.test.ts to a race on port assignment, patched the fixture, and un-quarantined it after 40 green runs.",
    meta: "PR №216 · merged by policy · 0 human minutes spent",
  },
  {
    time: "05:52",
    title: "Security advisory patched before you knew it existed",
    detail:
      "CVE in a transitive dep of the registry middleware. Patched, gated, deployed. Exposure window: 19 minutes.",
    meta: "PR №217 · deploy 82321e8 · advisory GHSA-4q7x",
  },
];

const DEFAULT_HANDLED: HandledItem[] = [
  {
    what: "4 PRs continuously rebased",
    detail: "no merge conflicts reached any developer this week",
  },
  {
    what: "EU semantic index backfill",
    detail: "completed 04:10, helvetia-fintech ticket auto-resolved",
  },
  {
    what: "2 stale branches archived",
    detail: "per repo policy, both had merged upstream",
  },
];

export const DailyBrief: FC<DailyBriefProps> = (props) => {
  const needsYou = props.needsYou ?? DEFAULT_NEEDS_YOU;
  const shipped = props.shipped ?? DEFAULT_SHIPPED;
  const handled = props.handled ?? DEFAULT_HANDLED;
  const savedHrs = props.savedHrs ?? 3.1;
  const user = props.user ?? {};
  const initials = user.initials ?? "C";

  const today = new Date();
  const dateLabel = today.toLocaleDateString("en-US", {
    weekday: "long",
    month: "long",
    day: "numeric",
  });

  return (
    <>
      <style dangerouslySetInnerHTML={{ __html: css }} />
      <div class="db-root">
        <header class="db-header">
          <a href="/" class="db-logo">
            <span class="db-logo-mark" />
            gluecron
          </a>
          <span class="db-header-sep">/</span>
          <span class="db-header-crumb">Brief</span>
          <div class="db-header-right">
            <span class="db-header-date">{dateLabel}</span>
            <span class="db-avatar">{initials}</span>
          </div>
        </header>

        <main class="db-main">
          <div class="db-eyebrow">Your morning brief · 7:00 am</div>
          <h1 class="db-headline">
            While you were away, the platform shipped three things and held one
            back for you.
          </h1>
          <p class="db-subtitle">
            Two-minute read. One decision needed. Everything below is linked,
            audited, and reversible.
          </p>

          {/* Needs You section */}
          <section class="db-section db-needs">
            <h2 class="db-section-label db-label-amber">
              <span class="db-pulse-dot db-pulse-amber" />
              Needs you · {needsYou.length}
            </h2>
            {needsYou.map((item) => (
              <div class="db-action-card">
                <div class="db-action-title">{item.title}</div>
                <p class="db-action-detail">{item.detail}</p>
                <div class="db-action-buttons">
                  <a
                    href={item.sessionHref ?? "#"}
                    class="db-btn db-btn-primary"
                  >
                    Open session
                  </a>
                  <a href={item.diffHref ?? "#"} class="db-btn db-btn-secondary">
                    Review diff manually
                  </a>
                </div>
              </div>
            ))}
          </section>

          {/* Shipped overnight section */}
          <section class="db-section db-shipped">
            <h2 class="db-section-label db-label-green">
              Shipped overnight · {shipped.length}
            </h2>
            <div class="db-timeline">
              {shipped.map((item) => (
                <div class="db-timeline-row">
                  <span class="db-timeline-time">{item.time}</span>
                  <div class="db-timeline-body">
                    <div class="db-timeline-title">{item.title}</div>
                    <div class="db-timeline-detail">{item.detail}</div>
                    <div class="db-timeline-meta">{item.meta}</div>
                  </div>
                </div>
              ))}
            </div>
          </section>

          {/* Handled quietly section */}
          <section class="db-section db-handled">
            <h2 class="db-section-label db-label-muted">Handled quietly</h2>
            <div class="db-handled-list">
              {handled.map((item) => (
                <div class="db-handled-row">
                  <span class="db-handled-dot" />
                  <span class="db-handled-text">
                    <strong class="db-handled-what">{item.what}</strong>
                    {" — "}
                    {item.detail}
                  </span>
                </div>
              ))}
            </div>
          </section>

          {/* Footer */}
          <div class="db-footer">
            <p class="db-footer-note">
              Your team's standup, replaced. Every item links to its full audit
              trail.
            </p>
            <span class="db-footer-saved">
              saved you ≈ {savedHrs.toFixed(1)} hrs overnight
            </span>
          </div>
        </main>
      </div>
      <script
        dangerouslySetInnerHTML={{
          __html: clientJs,
        }}
      />
    </>
  );
};

export default DailyBrief;

const css = `
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;600;700&family=Inter+Tight:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

@keyframes gcPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

.db-root {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: -0.008em;
  color: #16181d;
  background: #fcfcfd;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Header ── */
.db-header {
  height: 56px;
  border-bottom: 1px solid rgba(22, 24, 29, 0.07);
  background: #fcfcfd;
  display: flex;
  align-items: center;
  padding: 0 28px;
  gap: 20px;
  position: sticky;
  top: 0;
  z-index: 50;
}

.db-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.02em;
  color: #16181d;
  text-decoration: none;
}

.db-logo-mark {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: #4353c9;
  display: inline-block;
  flex-shrink: 0;
}

.db-header-sep {
  color: #c4c6cf;
}

.db-header-crumb {
  font-size: 13px;
  color: #16181d;
  font-weight: 500;
}

.db-header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

.db-header-date {
  font-size: 12.5px;
  color: #6b7080;
}

.db-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #16181d;
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  flex-shrink: 0;
}

/* ── Main layout ── */
.db-main {
  flex: 1;
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
  padding: 56px 32px 88px;
}

/* ── Eyebrow + headline ── */
.db-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a8d99;
  margin-bottom: 12px;
}

.db-headline {
  font-family: 'Inter Tight', sans-serif;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.12;
  color: #111318;
  margin: 0 0 12px;
}

.db-subtitle {
  font-size: 15px;
  color: #6b7080;
  margin: 0 0 44px;
  line-height: 1.6;
  max-width: 58ch;
}

/* ── Sections ── */
.db-section {
  margin-bottom: 48px;
}

.db-section-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.db-label-amber {
  color: #b45309;
}

.db-label-green {
  color: #1e7f5c;
}

.db-label-muted {
  color: #8a8d99;
}

/* ── Pulse dot ── */
.db-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.db-pulse-amber {
  background: #b45309;
  animation: gcPulse 1.4s ease-in-out infinite;
}

/* ── Action card (Needs You) ── */
.db-action-card {
  border: 1px solid rgba(22, 24, 29, 0.10);
  border-radius: 14px;
  background: #ffffff;
  padding: 24px 26px;
}

.db-action-title {
  font-size: 15px;
  font-weight: 600;
  color: #16181d;
  margin-bottom: 6px;
  line-height: 1.4;
}

.db-action-detail {
  font-size: 13.5px;
  color: #6b7080;
  margin: 0 0 16px;
  line-height: 1.6;
}

.db-action-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── Buttons ── */
.db-btn {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  display: inline-block;
  line-height: 1.5;
  transition: border-color 0.12s ease, background 0.12s ease;
  font-family: 'Inter', sans-serif;
}

.db-btn-primary {
  background: #16181d;
  color: #ffffff;
  border: 1px solid transparent;
}

.db-btn-primary:hover {
  background: #2a2d36;
}

.db-btn-secondary {
  background: #ffffff;
  color: #16181d;
  border: 1px solid rgba(22, 24, 29, 0.12);
}

.db-btn-secondary:hover {
  border-color: rgba(22, 24, 29, 0.22);
}

/* ── Timeline (Shipped) ── */
.db-timeline {
  display: flex;
  flex-direction: column;
}

.db-timeline-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 18px;
  padding: 16px 4px;
  border-bottom: 1px solid rgba(22, 24, 29, 0.06);
}

.db-timeline-row:last-child {
  border-bottom: none;
}

.db-timeline-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #8a8d99;
  padding-top: 2px;
  flex-shrink: 0;
}

.db-timeline-body {
  min-width: 0;
}

.db-timeline-title {
  font-size: 14px;
  font-weight: 500;
  color: #16181d;
  line-height: 1.45;
}

.db-timeline-detail {
  font-size: 13px;
  color: #6b7080;
  margin-top: 2px;
  line-height: 1.55;
}

.db-timeline-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: #8a8d99;
  margin-top: 6px;
}

/* ── Handled quietly ── */
.db-handled-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.db-handled-row {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 13.5px;
  color: #6b7080;
}

.db-handled-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c4c6cf;
  flex-shrink: 0;
  position: relative;
  top: -2px;
}

.db-handled-text {
  line-height: 1.55;
}

.db-handled-what {
  color: #16181d;
  font-weight: 500;
}

/* ── Footer ── */
.db-footer {
  border-top: 1px solid rgba(22, 24, 29, 0.07);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}

.db-footer-note {
  font-size: 12.5px;
  color: #8a8d99;
  margin: 0;
  line-height: 1.55;
}

.db-footer-saved {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: #8a8d99;
  white-space: nowrap;
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .db-main {
    padding: 40px 20px 64px;
  }

  .db-headline {
    font-size: 26px;
  }

  .db-timeline-row {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
  }

  .db-footer {
    flex-direction: column;
    gap: 8px;
  }

  .db-header {
    padding: 0 16px;
  }
}
`;

const clientJs = `
(function () {
  'use strict';

  // Hover state for secondary button — pure CSS handles most, but ensure
  // any programmatic focus rings stay subtle.
  var secondaryBtns = document.querySelectorAll('.db-btn-secondary');
  secondaryBtns.forEach(function (btn) {
    btn.addEventListener('mouseenter', function () {
      btn.style.borderColor = 'rgba(22,24,29,0.22)';
    });
    btn.addEventListener('mouseleave', function () {
      btn.style.borderColor = 'rgba(22,24,29,0.12)';
    });
  });

  // Animate timeline rows in on load
  var rows = document.querySelectorAll('.db-timeline-row');
  rows.forEach(function (row, i) {
    row.style.opacity = '0';
    row.style.transform = 'translateY(8px)';
    row.style.transition = 'opacity 0.28s ease, transform 0.28s ease';
    setTimeout(function () {
      row.style.opacity = '1';
      row.style.transform = 'translateY(0)';
    }, 120 + i * 80);
  });

  // Animate handled rows
  var handledRows = document.querySelectorAll('.db-handled-row');
  handledRows.forEach(function (row, i) {
    row.style.opacity = '0';
    row.style.transition = 'opacity 0.24s ease';
    setTimeout(function () {
      row.style.opacity = '1';
    }, 400 + i * 60);
  });

  // Action card entrance
  var actionCard = document.querySelector('.db-action-card');
  if (actionCard) {
    actionCard.style.opacity = '0';
    actionCard.style.transform = 'translateY(6px)';
    actionCard.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
    setTimeout(function () {
      actionCard.style.opacity = '1';
      actionCard.style.transform = 'translateY(0)';
    }, 60);
  }
})();
`;