// Parse a 3-sentence feedback summary into [strong, thin, watchOut]
function parseFeedback(summary) {
  if (!summary) return [null, null, null];
  const parts = summary.match(/[^.!?]+[.!?]+/g) || [];
  const sentences = parts.map(s => s.trim()).filter(Boolean);
  return [
    sentences[0] || null,
    sentences[1] || null,
    sentences.slice(2).join(" ") || null,
  ];
}

function FeedbackCard({ icon, label, color, bg, border, text, darkMode }) {
  const surface = darkMode ? "rgba(255,255,255,.04)" : "#fff";
  return (
    <div style={{
      padding: "20px 22px",
      borderRadius: 14,
      background: bg || surface,
      border: `1.5px solid ${border}`,
      display: "flex", flexDirection: "column", gap: 10,
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <div style={{
          width: 28, height: 28, borderRadius: 99,
          background: color, display: "flex", alignItems: "center", justifyContent: "center",
          flexShrink: 0,
        }}>
          <span style={{ font: "700 13px var(--font-sans)", color: "#fff" }}>{icon}</span>
        </div>
        <span style={{ font: "600 13px var(--font-sans)", color, letterSpacing: "-.01em" }}>{label}</span>
      </div>
      <p style={{ font: "400 14px/1.65 var(--font-sans)", color: darkMode ? "rgba(255,255,255,.65)" : "var(--fg-2)", margin: 0 }}>
        {text}
      </p>
    </div>
  );
}

function Feedback({ onClose, onViewHistory, feedbackData, darkMode = false }) {
  const transcript = feedbackData?.transcript || [];
  const [strong, thin, watchOut] = parseFeedback(feedbackData?.summary);
  const breakdown = feedbackData?.breakdown || null;

  const bgArt = darkMode
    ? "radial-gradient(circle at 18% 12%, rgba(255,255,255,.08), transparent 22%), linear-gradient(180deg, #1d1e22 0%, #15161a 100%)"
    : "radial-gradient(circle at 18% 8%, rgba(255,255,255,.92), transparent 22%), linear-gradient(180deg, #f7f8fa 0%, #eef1f4 100%)";

  const headerBg = darkMode
    ? "linear-gradient(180deg, rgba(44,47,53,.86) 0%, rgba(28,30,35,.92) 100%)"
    : "linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(242,245,248,.94) 100%)";

  return (
    <div data-screen-label="Feedback · Post-session" style={{ minHeight: "100vh", background: bgArt }}>
      <header style={{
        padding: "20px 32px", borderBottom: "1px solid var(--border-1)",
        background: headerBg, backdropFilter: "blur(12px)",
        display: "flex", alignItems: "center", gap: 16,
      }}>
        <img src="../../assets/logo.svg" width="22" height="22" alt="" />
        <div>
          <Eyebrow>Session complete</Eyebrow>
          <h1 style={{ font: "400 24px/1.1 var(--font-display)", letterSpacing: "-0.015em", margin: "4px 0 0", color: "var(--fg-1)" }}>
            {feedbackData ? `${feedbackData.role} · ${feedbackData.company}` : "Mock interview"}
          </h1>
        </div>
        <div style={{ marginLeft: "auto", display: "flex", gap: 10, flexWrap: "wrap" }}>
          <Button variant="secondary" onClick={onClose}>Back to dashboard</Button>
          <Button variant="primary" onClick={onViewHistory}>View history</Button>
        </div>
      </header>

      <main style={{ padding: 32, maxWidth: 960, margin: "0 auto", display: "flex", flexDirection: "column", gap: 20 }}>
        {feedbackData ? (
          <>
            {/* ── Session meta row ── */}
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 12 }}>
              <div>
                <div style={{ font: "600 11px var(--font-sans)", textTransform: "uppercase", letterSpacing: ".08em", color: "var(--fg-4)", marginBottom: 4 }}>
                  Feedback
                </div>
                <div style={{ font: "400 13px var(--font-sans)", color: "var(--fg-3)" }}>
                  Specific. Not a score.
                </div>
              </div>
              <div style={{ display: "flex", gap: 16 }}>
                <div style={{ textAlign: "center" }}>
                  <div style={{ font: "400 36px/1 var(--font-display)", letterSpacing: "-0.03em", color: "var(--gr-green-600)" }}>
                    {feedbackData.questions_covered}
                  </div>
                  <div style={{ font: "var(--text-body-sm)", color: "var(--fg-3)", marginTop: 2 }}>questions</div>
                </div>
                {breakdown && (
                  <>
                    {[
                      { label: "Technical",  val: breakdown.technical },
                      { label: "Comms",      val: breakdown.communication },
                      { label: "Role fit",   val: breakdown.role_fit },
                    ].map(({ label, val }) => val ? (
                      <div key={label} style={{ textAlign: "center" }}>
                        <div style={{ font: "400 36px/1 var(--font-display)", letterSpacing: "-0.03em", color: val >= 7 ? "var(--gr-green-600)" : val >= 5 ? "#d97706" : "#dc2626" }}>
                          {val}
                        </div>
                        <div style={{ font: "var(--text-body-sm)", color: "var(--fg-3)", marginTop: 2 }}>{label}</div>
                      </div>
                    ) : null)}
                  </>
                )}
              </div>
            </div>

            {/* ── Feedback cards ── */}
            {(strong || thin || watchOut) ? (
              <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                {strong && (
                  <FeedbackCard
                    icon="✓" label="Strong"
                    color="#15803d"
                    bg={darkMode ? "rgba(21,128,61,.08)" : "rgba(21,128,61,.05)"}
                    border={darkMode ? "rgba(21,128,61,.25)" : "rgba(21,128,61,.2)"}
                    text={strong} darkMode={darkMode}
                  />
                )}
                {thin && (
                  <FeedbackCard
                    icon="~" label="Thin"
                    color="#b45309"
                    bg={darkMode ? "rgba(180,83,9,.08)" : "rgba(180,83,9,.05)"}
                    border={darkMode ? "rgba(180,83,9,.25)" : "rgba(180,83,9,.2)"}
                    text={thin} darkMode={darkMode}
                  />
                )}
                {watchOut && (
                  <FeedbackCard
                    icon="!" label="Watch out"
                    color="#dc2626"
                    bg={darkMode ? "rgba(220,38,38,.08)" : "rgba(220,38,38,.05)"}
                    border={darkMode ? "rgba(220,38,38,.25)" : "rgba(220,38,38,.2)"}
                    text={watchOut} darkMode={darkMode}
                  />
                )}
              </div>
            ) : (
              <Card padding={24} raised>
                <Eyebrow>Summary</Eyebrow>
                <p style={{ font: "var(--text-body)", color: "var(--fg-2)", margin: "8px 0 0", lineHeight: 1.6 }}>
                  {feedbackData.summary || "No summary available."}
                </p>
              </Card>
            )}

            {/* ── Red flags ── */}
            {breakdown?.red_flags?.length > 0 && (
              <div style={{
                padding: "16px 20px", borderRadius: 12,
                background: darkMode ? "rgba(220,38,38,.07)" : "rgba(220,38,38,.04)",
                border: `1px solid ${darkMode ? "rgba(220,38,38,.2)" : "rgba(220,38,38,.15)"}`,
              }}>
                <div style={{ font: "600 12px var(--font-sans)", color: "#dc2626", textTransform: "uppercase", letterSpacing: ".07em", marginBottom: 10 }}>
                  Red flags
                </div>
                <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                  {breakdown.red_flags.map((flag, i) => (
                    <div key={i} style={{ display: "flex", alignItems: "flex-start", gap: 8, font: "400 13px/1.5 var(--font-sans)", color: darkMode ? "rgba(255,255,255,.6)" : "var(--fg-2)" }}>
                      <span style={{ color: "#dc2626", flexShrink: 0 }}>—</span>
                      {flag}
                    </div>
                  ))}
                </div>
              </div>
            )}

            {/* ── Referral nudge ── */}
            <div style={{
              padding: "18px 24px", borderRadius: 12,
              background: "var(--bg-brand-soft)", border: "1px solid var(--gr-green-200)",
              display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, flexWrap: "wrap",
            }}>
              <div>
                <div style={{ font: "600 14px var(--font-sans)", color: "var(--gr-green-800)", marginBottom: 3 }}>Know someone else prepping?</div>
                <div style={{ font: "13px var(--font-sans)", color: "var(--gr-green-700)" }}>
                  Share Greenroom — they get 1 free voice mock interview, no credit card needed.
                </div>
              </div>
              <button
                onClick={() => {
                  navigator.clipboard?.writeText("https://usegreenroom.app?ref=share").then(() => alert("Link copied!"));
                }}
                style={{
                  height: 34, padding: "0 16px", borderRadius: 8, border: "1px solid var(--gr-green-300)",
                  background: "#fff", color: "var(--gr-green-700)", font: "500 13px var(--font-sans)", cursor: "pointer",
                  whiteSpace: "nowrap",
                }}
              >Copy referral link</button>
            </div>

            {/* ── Transcript ── */}
            {transcript.length > 0 && (
              <div>
                <Eyebrow>Full transcript</Eyebrow>
                <div style={{ display: "flex", flexDirection: "column", gap: 10, marginTop: 12 }}>
                  {transcript.map((entry, i) => (
                    <div key={i} style={{
                      display: "flex", flexDirection: "column", gap: 2,
                      alignItems: entry.role === "user" ? "flex-end" : "flex-start",
                    }}>
                      <span style={{ font: "var(--text-caption)", color: "var(--fg-4)", textTransform: "uppercase", letterSpacing: "0.06em" }}>
                        {entry.role === "user" ? "You" : "Coach Ari"}
                      </span>
                      <div style={{
                        maxWidth: "72%", padding: "10px 14px", borderRadius: 10,
                        font: "var(--text-body)", lineHeight: 1.55,
                        background: entry.role === "user" ? "var(--bg-brand-soft)" : "var(--bg-subtle)",
                        color: entry.role === "user" ? "var(--gr-green-700)" : "var(--fg-1)",
                        border: `1px solid ${entry.role === "user" ? "var(--gr-green-100)" : "var(--border-1)"}`,
                      }}>
                        {entry.content}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </>
        ) : (
          <Card padding={48} style={{ textAlign: "center" }}>
            <Icon name="clipboard" size={32} color="var(--fg-4)" />
            <div style={{ font: "500 16px var(--font-sans)", marginTop: 12 }}>No feedback yet</div>
            <div style={{ font: "var(--text-body-sm)", color: "var(--fg-3)", marginTop: 4 }}>Complete a mock interview to see your feedback here.</div>
            <div style={{ marginTop: 20 }}>
              <Button variant="primary" onClick={onClose}>Go to dashboard</Button>
            </div>
          </Card>
        )}
      </main>
    </div>
  );
}
window.Feedback = Feedback;