import { useState, useRef } from "react";

// ─── CONSTANTS ────────────────────────────────────────────────────────────────
const USERS = [
  { id: 0, name: "Manager", role: "manager", avatar: "MG", pin: "0000", color: "#111827" },
  { id: 1, name: "Asha Mensah", role: "employee", avatar: "AM", pin: "1111", color: "#6366f1", trustBattery: 87, handle: "@brand_asha" },
  { id: 2, name: "Jordan Blake", role: "employee", avatar: "JB", pin: "2222", color: "#0891b2", trustBattery: 62, handle: "@brand_jordan" },
  { id: 3, name: "Priya Nair", role: "employee", avatar: "PN", pin: "3333", color: "#059669", trustBattery: 95, handle: "@brand_priya" },
];

const TASKS = [
  { label: "Content Creation", icon: "✏️", points: 5 },
  { label: "Content Scheduling", icon: "📅", points: 2 },
  { label: "Community Engagement", icon: "💬", points: 3 },
  { label: "Reporting & Analytics", icon: "📊", points: 2 },
  { label: "Inbox Management", icon: "📥", points: 1 },
  { label: "Ad Campaign Management", icon: "📣", points: 4 },
  { label: "Strategy", icon: "🧠", points: 5 },
  { label: "Research", icon: "🔍", points: 4 },
  { label: "Brand Development", icon: "🎨", points: 5 },
  { label: "Competitor Analysis", icon: "🔭", points: 4 },
];

const SAMPLE_HISTORY = {
  1: [
    { date: "Mon", points: 8, status: "verified", trustDelta: 5 },
    { date: "Tue", points: 10, status: "verified", trustDelta: 6 },
    { date: "Wed", points: 6, status: "flagged", trustDelta: -3 },
    { date: "Thu", points: 9, status: "verified", trustDelta: 5 },
    { date: "Fri", points: 0, status: "pending", trustDelta: 0 },
  ],
  2: [
    { date: "Mon", points: 6, status: "verified", trustDelta: 3 },
    { date: "Tue", points: 4, status: "flagged", trustDelta: -5 },
    { date: "Wed", points: 7, status: "verified", trustDelta: 4 },
    { date: "Thu", points: 5, status: "flagged", trustDelta: -4 },
    { date: "Fri", points: 0, status: "pending", trustDelta: 0 },
  ],
  3: [
    { date: "Mon", points: 10, status: "verified", trustDelta: 6 },
    { date: "Tue", points: 12, status: "verified", trustDelta: 7 },
    { date: "Wed", points: 9, status: "verified", trustDelta: 5 },
    { date: "Thu", points: 11, status: "verified", trustDelta: 6 },
    { date: "Fri", points: 0, status: "pending", trustDelta: 0 },
  ],
};

// ─── UTILS ────────────────────────────────────────────────────────────────────
const batteryColor = v => v >= 80 ? "#059669" : v >= 55 ? "#d97706" : "#dc2626";
const batteryLabel = v => v >= 80 ? "Elite" : v >= 55 ? "Solid" : "At risk";
const getHour = () => new Date().getHours();
const isPlanOpen = () => getHour() < 16; // 4 PM cutoff (test mode)
const isFriday = () => new Date().getDay() === 5;

async function callGemini(apiKey, prompt) {
  const res = await fetch(
    `https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent?key=${apiKey}`,
    {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        contents: [{ parts: [{ text: prompt }] }],
        generationConfig: { temperature: 0.7, maxOutputTokens: 500 },
      }),
    }
  );
  if (!res.ok) throw new Error("API error " + res.status);
  const d = await res.json();
  return d.candidates?.[0]?.content?.parts?.[0]?.text || "";
}

// ─── SHARED UI ────────────────────────────────────────────────────────────────
function Avatar({ initials, size = 40, color = "#6366f1" }) {
  return (
    <div style={{ width: size, height: size, borderRadius: "50%", background: color + "20", color, fontWeight: 700, fontSize: size * 0.33, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, border: "1.5px solid " + color + "40" }}>{initials}</div>
  );
}

function Pill({ children, color = "#6366f1", bg }) {
  return <span style={{ fontSize: 11, fontWeight: 700, padding: "3px 9px", borderRadius: 99, background: bg || color + "18", color, letterSpacing: 0.3, whiteSpace: "nowrap" }}>{children}</span>;
}

function Card({ children, style, onClick }) {
  return (
    <div onClick={onClick} style={{ background: "#fff", borderRadius: 16, border: "1px solid #f0f0f0", boxShadow: "0 1px 4px rgba(0,0,0,0.06)", padding: "1.25rem", cursor: onClick ? "pointer" : "default", transition: "box-shadow 0.15s", ...(style || {}) }}
      onMouseEnter={e => { if (onClick) e.currentTarget.style.boxShadow = "0 4px 16px rgba(0,0,0,0.1)"; }}
      onMouseLeave={e => { if (onClick) e.currentTarget.style.boxShadow = "0 1px 4px rgba(0,0,0,0.06)"; }}
    >{children}</div>
  );
}

function Spinner() {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 8, color: "#6366f1", fontSize: 13, padding: "4px 0" }}>
      <div style={{ width: 15, height: 15, border: "2px solid #6366f120", borderTop: "2px solid #6366f1", borderRadius: "50%", animation: "spin 0.7s linear infinite" }} />
      Analysing with Gemini...
    </div>
  );
}

function TrustBar({ value }) {
  const color = batteryColor(value);
  return (
    <div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 6 }}>
        <span style={{ fontSize: 12, color: "#9ca3af" }}>Trust Battery</span>
        <Pill color={color}>{batteryLabel(value)}</Pill>
      </div>
      <div style={{ height: 10, background: "#f3f4f6", borderRadius: 99, overflow: "hidden" }}>
        <div style={{ width: value + "%", height: "100%", background: color, borderRadius: 99, transition: "width 0.8s ease" }} />
      </div>
      <div style={{ textAlign: "right", fontSize: 12, fontWeight: 700, color, marginTop: 4 }}>{value}%</div>
    </div>
  );
}

// ─── SETUP ────────────────────────────────────────────────────────────────────
function SetupScreen({ onDone }) {
  const [key, setKey] = useState("");
  const [testing, setTesting] = useState(false);
  const [result, setResult] = useState(null);

  async function test() {
    setTesting(true); setResult(null);
    try { await callGemini(key, "Reply with just: OK"); setResult("ok"); }
    catch { setResult("fail"); }
    setTesting(false);
  }

  return (
    <div style={{ minHeight: "100vh", background: "#f8f9fa", display: "flex", alignItems: "center", justifyContent: "center", padding: "1rem" }}>
      <div style={{ width: "100%", maxWidth: 420 }}>
        <div style={{ textAlign: "center", marginBottom: "2rem" }}>
          <div style={{ fontSize: 52, marginBottom: 10 }}>⚡</div>
          <h1 style={{ fontSize: 30, fontWeight: 800, color: "#111", letterSpacing: -1, margin: 0 }}>TYHID</h1>
          <p style={{ color: "#9ca3af", fontSize: 14, marginTop: 6 }}>Track Your Hours, I Dare You</p>
        </div>
        <Card>
          <div style={{ fontSize: 12, fontWeight: 700, color: "#374151", marginBottom: 6, textTransform: "uppercase", letterSpacing: 0.5 }}>Gemini API Key</div>
          <input type="password" value={key} onChange={e => setKey(e.target.value)} placeholder="AIza..."
            style={{ width: "100%", padding: "11px 14px", borderRadius: 10, border: "1.5px solid #e5e7eb", fontSize: 14, outline: "none", marginBottom: 10, boxSizing: "border-box" }} />
          {result && (
            <div style={{ padding: "9px 12px", borderRadius: 9, marginBottom: 10, background: result === "ok" ? "#f0fdf4" : "#fef2f2", color: result === "ok" ? "#059669" : "#dc2626", fontSize: 13, fontWeight: 600 }}>
              {result === "ok" ? "✓ Connected! Ready to go." : "✗ Invalid key — check and try again."}
            </div>
          )}
          <div style={{ display: "flex", gap: 8 }}>
            <button onClick={test} disabled={!key || testing} style={{ flex: 1, padding: 11, borderRadius: 10, border: "1.5px solid #e5e7eb", background: "#f9fafb", fontSize: 13, fontWeight: 600, cursor: "pointer" }}>
              {testing ? "Testing..." : "Test"}
            </button>
            <button onClick={() => onDone(key)} disabled={!key} style={{ flex: 2, padding: 11, borderRadius: 10, border: "none", background: key ? "#6366f1" : "#e5e7eb", color: key ? "#fff" : "#9ca3af", fontSize: 13, fontWeight: 700, cursor: key ? "pointer" : "not-allowed" }}>
              Enter Portal →
            </button>
          </div>
        </Card>
        <p style={{ textAlign: "center", fontSize: 11, color: "#d1d5db", marginTop: 10 }}>🧪 Test mode: plan submission open until 4 PM</p>
      </div>
    </div>
  );
}

// ─── LOGIN ────────────────────────────────────────────────────────────────────
function LoginScreen({ onLogin }) {
  const [selected, setSelected] = useState(null);
  const [pin, setPin] = useState("");
  const [error, setError] = useState("");
  const [shaking, setShaking] = useState(false);

  function handleDigit(d) {
    if (pin.length >= 4) return;
    const next = pin + d;
    setPin(next); setError("");
    if (next.length === 4) {
      setTimeout(() => {
        if (selected?.pin === next) { onLogin(selected); }
        else { setShaking(true); setError("Wrong PIN"); setTimeout(() => { setPin(""); setShaking(false); }, 600); }
      }, 100);
    }
  }

  return (
    <div style={{ minHeight: "100vh", background: "#f8f9fa", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: "1rem" }}>
      <div style={{ textAlign: "center", marginBottom: "1.5rem" }}>
        <div style={{ fontSize: 36, marginBottom: 4 }}>⚡</div>
        <h1 style={{ fontSize: 24, fontWeight: 800, color: "#111", letterSpacing: -0.5, margin: 0 }}>TYHID</h1>
        <p style={{ color: "#9ca3af", fontSize: 13, margin: "4px 0 0" }}>Who are you?</p>
      </div>
      {!selected ? (
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, width: "100%", maxWidth: 360 }}>
          {USERS.map(u => (
            <Card key={u.id} onClick={() => setSelected(u)} style={{ textAlign: "center", padding: "1.25rem 1rem" }}>
              <div style={{ display: "flex", justifyContent: "center", marginBottom: 10 }}>
                <Avatar initials={u.avatar} size={48} color={u.color} />
              </div>
              <div style={{ fontWeight: 700, fontSize: 14, color: "#111" }}>{u.name}</div>
              <div style={{ fontSize: 11, color: "#9ca3af", marginTop: 2, textTransform: "capitalize" }}>{u.role}</div>
            </Card>
          ))}
        </div>
      ) : (
        <div style={{ width: "100%", maxWidth: 280 }}>
          <Card style={{ textAlign: "center" }}>
            <div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginBottom: "1.25rem" }}>
              <Avatar initials={selected.avatar} size={52} color={selected.color} />
              <div style={{ fontWeight: 700, fontSize: 16, color: "#111", marginTop: 10 }}>{selected.name}</div>
              <div style={{ fontSize: 12, color: "#9ca3af" }}>Enter your PIN</div>
            </div>
            <div style={{ display: "flex", gap: 12, justifyContent: "center", marginBottom: "1.25rem", animation: shaking ? "shake 0.4s" : "none" }}>
              {[0,1,2,3].map(i => (
                <div key={i} style={{ width: 13, height: 13, borderRadius: "50%", border: "2px solid " + (i < pin.length ? selected.color : "#d1d5db"), background: i < pin.length ? selected.color : "transparent", transition: "all 0.15s" }} />
              ))}
            </div>
            {error && <div style={{ color: "#dc2626", fontSize: 13, marginBottom: 8, fontWeight: 600 }}>{error}</div>}
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 7 }}>
              {[1,2,3,4,5,6,7,8,9,"",0,"⌫"].map((d, i) => (
                <button key={i} onClick={() => d === "⌫" ? setPin(p => p.slice(0,-1)) : d !== "" && handleDigit(String(d))} disabled={d === ""}
                  style={{ padding: "13px 0", borderRadius: 9, border: "1.5px solid " + (d === "" ? "transparent" : "#f0f0f0"), background: d === "" ? "transparent" : "#f9fafb", fontSize: d === "⌫" ? 16 : 17, fontWeight: 600, cursor: d === "" ? "default" : "pointer" }}>{d}</button>
              ))}
            </div>
            <button onClick={() => { setSelected(null); setPin(""); setError(""); }} style={{ marginTop: "1rem", background: "none", border: "none", color: "#9ca3af", fontSize: 13, cursor: "pointer" }}>← Back</button>
          </Card>
          <p style={{ textAlign: "center", fontSize: 11, color: "#d1d5db", marginTop: 8 }}>Demo PINs: 0000 / 1111 / 2222 / 3333</p>
        </div>
      )}
    </div>
  );
}

// ─── CLOCK-IN (PLAN) ──────────────────────────────────────────────────────────
function ClockIn({ user, apiKey, onPlanLocked }) {
  const open = isPlanOpen();
  const [goals, setGoals] = useState([{ id: 1, taskText: "", hours: "", notes: "", points: 0, aiResult: null, aiLoading: false }]);
  const [submitting, setSubmitting] = useState(false);

  const totalPoints = goals.reduce((s, g) => s + (Number(g.points) || 0), 0);

  function addGoal() {
    setGoals(p => [...p, { id: Date.now(), taskText: "", hours: "", notes: "", points: 0, aiResult: null, aiLoading: false }]);
  }
  function update(id, patch) { setGoals(p => p.map(g => g.id === id ? { ...g, ...patch } : g)); }
  function removeGoal(id) { setGoals(p => p.filter(g => g.id !== id)); }
  function pickTemplate(goalId, t) { update(goalId, { taskText: t.label, points: t.points, hours: "", aiResult: null }); }

  async function getAIFeedback(goal) {
    if (!goal.taskText) return;
    update(goal.id, { aiLoading: true, aiResult: null });
    try {
      const prompt = `You are an AI Strategic Coach for a marketing team. Evaluate this task:
Task: ${goal.taskText}
Planned hours: ${goal.hours || "not given"}
Details: ${goal.notes || "none"}

Reply ONLY in this format:
SCORE: [1-10]
POINTS: [1, 2, 3, 5, 8, or 13]
ROI: [HIGH, MEDIUM, or LOW]
FEEDBACK: [2 direct, specific coaching sentences]`;
      const r = await callGemini(apiKey, prompt);
      const score = parseInt(r.match(/SCORE:\s*(\d+)/)?.[1] || "7");
      const pts = parseInt(r.match(/POINTS:\s*(\d+)/)?.[1] || "3");
      const roi = r.match(/ROI:\s*(HIGH|MEDIUM|LOW)/)?.[1] || "MEDIUM";
      const feedback = r.match(/FEEDBACK:\s*(.+)/s)?.[1]?.trim() || r;
      update(goal.id, { aiLoading: false, aiResult: { score, pts, roi, feedback }, points: pts });
    } catch (e) {
      update(goal.id, { aiLoading: false, aiResult: { error: e.message } });
    }
  }

  async function handleSubmit() {
    setSubmitting(true);
    await new Promise(r => setTimeout(r, 900));
    onPlanLocked(goals);
  }

  return (
    <div style={{ padding: "1.25rem 1rem", maxWidth: 600, margin: "0 auto" }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "1.25rem" }}>
        <div>
          <h2 style={{ fontSize: 18, fontWeight: 800, color: "#111", margin: 0 }}>🕘 Clock In — Today's Plan</h2>
          <p style={{ fontSize: 13, color: "#9ca3af", margin: "3px 0 0" }}>Min 8 story points · Locks at 4:00 PM</p>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
          <div style={{ width: 8, height: 8, borderRadius: "50%", background: open ? "#059669" : "#dc2626", animation: open ? "pulse 2s infinite" : "none" }} />
          <span style={{ fontSize: 12, fontWeight: 700, color: open ? "#059669" : "#dc2626" }}>{open ? "OPEN" : "LOCKED"}</span>
        </div>
      </div>

      {!open && (
        <div style={{ background: "#fef2f2", border: "1px solid #fecaca", borderRadius: 12, padding: "12px 16px", marginBottom: "1rem", fontSize: 13, color: "#991b1b" }}>
          🔒 Submission closed at 4:00 PM. Contact your manager for an override.
        </div>
      )}

      {goals.map((goal, idx) => (
        <Card key={goal.id} style={{ marginBottom: "1rem", opacity: open ? 1 : 0.65 }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }}>
            <span style={{ fontSize: 12, fontWeight: 700, color: "#9ca3af", textTransform: "uppercase", letterSpacing: 0.5 }}>Goal {idx + 1}</span>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              {goal.points > 0 && <Pill color={user.color}>{goal.points} pts</Pill>}
              {goals.length > 1 && <button onClick={() => removeGoal(goal.id)} style={{ background: "none", border: "none", color: "#d1d5db", cursor: "pointer", fontSize: 20, lineHeight: 1 }}>×</button>}
            </div>
          </div>

          <div style={{ marginBottom: 10 }}>
            <div style={{ fontSize: 12, fontWeight: 600, color: "#374151", marginBottom: 6 }}>What are you working on?</div>
            <input type="text" value={goal.taskText} onChange={e => update(goal.id, { taskText: e.target.value, points: 0, aiResult: null })}
              placeholder="Type your task, or pick a suggestion below..." disabled={!open}
              style={{ width: "100%", padding: "10px 13px", borderRadius: 9, border: "1.5px solid #e5e7eb", fontSize: 14, outline: "none", boxSizing: "border-box" }}
              onFocus={e => e.target.style.borderColor = user.color} onBlur={e => e.target.style.borderColor = "#e5e7eb"} />
          </div>

          <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginBottom: 12 }}>
            {TASKS.map(t => {
              const active = goal.taskText === t.label;
              return (
                <button key={t.label} onClick={() => open && pickTemplate(goal.id, t)} style={{ padding: "5px 11px", borderRadius: 99, border: "1.5px solid " + (active ? user.color : "#e5e7eb"), background: active ? user.color + "18" : "#f9fafb", color: active ? user.color : "#6b7280", fontSize: 12, fontWeight: active ? 700 : 500, cursor: open ? "pointer" : "not-allowed" }}>
                  {t.icon} {t.label}
                </button>
              );
            })}
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginBottom: 10 }}>
            <div>
              <div style={{ fontSize: 12, fontWeight: 600, color: "#374151", marginBottom: 5 }}>Hours planned</div>
              <input type="number" value={goal.hours} onChange={e => update(goal.id, { hours: e.target.value })} placeholder="e.g. 2.5" min="0.5" max="8" step="0.5" disabled={!open}
                style={{ width: "100%", padding: "9px 12px", borderRadius: 9, border: "1.5px solid #e5e7eb", fontSize: 14, outline: "none", boxSizing: "border-box" }} />
            </div>
            <div>
              <div style={{ fontSize: 12, fontWeight: 600, color: "#374151", marginBottom: 5 }}>Story points</div>
              <div style={{ padding: "9px 12px", borderRadius: 9, border: "1.5px solid #e5e7eb", fontSize: 14, color: goal.points ? user.color : "#9ca3af", fontWeight: goal.points ? 700 : 400, background: "#f9fafb" }}>
                {goal.points || "via template or AI"}
              </div>
            </div>
          </div>

          <textarea value={goal.notes} onChange={e => update(goal.id, { notes: e.target.value })} rows={2} disabled={!open}
            placeholder="What will you produce? What decisions will you make? What's the expected output?"
            style={{ width: "100%", padding: "9px 12px", borderRadius: 9, border: "1.5px solid #e5e7eb", fontSize: 13, outline: "none", resize: "vertical", boxSizing: "border-box", fontFamily: "inherit", lineHeight: 1.5, marginBottom: 10 }}
            onFocus={e => e.target.style.borderColor = user.color} onBlur={e => e.target.style.borderColor = "#e5e7eb"} />

          {open && (
            <button onClick={() => getAIFeedback(goal)} disabled={goal.aiLoading || !goal.taskText}
              style={{ padding: "8px 16px", borderRadius: 9, border: "1.5px solid #6366f1", background: "#eef2ff", color: "#6366f1", fontSize: 12, fontWeight: 700, cursor: "pointer" }}>
              🤖 Get AI Coaching
            </button>
          )}
          {goal.aiLoading && <div style={{ marginTop: 8 }}><Spinner /></div>}
          {goal.aiResult && !goal.aiResult.error && (
            <div style={{ marginTop: 10, background: "#f5f3ff", borderRadius: 10, padding: "12px 14px", border: "1px solid #e0e7ff" }}>
              <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginBottom: 8 }}>
                <Pill color="#6366f1">Score {goal.aiResult.score}/10</Pill>
                <Pill color="#0891b2">{goal.aiResult.pts} story pts</Pill>
                <Pill color={goal.aiResult.roi === "HIGH" ? "#059669" : goal.aiResult.roi === "MEDIUM" ? "#d97706" : "#dc2626"}>{goal.aiResult.roi} ROI</Pill>
              </div>
              <p style={{ fontSize: 13, color: "#4c1d95", margin: 0, lineHeight: 1.6 }}>{goal.aiResult.feedback}</p>
            </div>
          )}
        </Card>
      ))}

      <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
        {open && (
          <button onClick={addGoal} style={{ padding: "10px 16px", borderRadius: 10, border: "1.5px dashed #d1d5db", background: "#f9fafb", fontSize: 13, fontWeight: 600, color: "#9ca3af", cursor: "pointer" }}>
            + Add goal
          </button>
        )}
        <div style={{ flex: 1 }} />
        <div style={{ fontSize: 13, color: "#6b7280" }}>
          <span style={{ fontWeight: 800, fontSize: 20, color: totalPoints >= 8 ? "#059669" : "#d97706" }}>{totalPoints}</span>
          <span style={{ color: "#d1d5db" }}>/8</span> pts
        </div>
        <button onClick={handleSubmit} disabled={!open || totalPoints < 8 || submitting}
          style={{ padding: "11px 22px", borderRadius: 10, border: "none", background: open && totalPoints >= 8 ? user.color : "#e5e7eb", color: open && totalPoints >= 8 ? "#fff" : "#9ca3af", fontSize: 13, fontWeight: 700, cursor: open && totalPoints >= 8 ? "pointer" : "not-allowed" }}>
          {submitting ? "Locking..." : "🔒 Lock Plan & Clock In"}
        </button>
      </div>
    </div>
  );
}

// ─── CLOCK-OUT ────────────────────────────────────────────────────────────────
function EvidenceUploader({ goalId, evidence, onUpdate, color }) {
  const fileRef = useRef();
  const [urlInput, setUrlInput] = useState("");
  const [showUrlBox, setShowUrlBox] = useState(false);

  function handleFile(e) {
    const file = e.target.files[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = ev => {
      onUpdate(goalId, { type: "file", name: file.name, size: file.size, dataUrl: ev.target.result });
    };
    reader.readAsDataURL(file);
  }

  function addUrl() {
    if (!urlInput.trim()) return;
    onUpdate(goalId, { type: "url", url: urlInput.trim() });
    setUrlInput(""); setShowUrlBox(false);
  }

  function removeEvidence() { onUpdate(goalId, null); }

  if (evidence) {
    const isImg = evidence.type === "file" && evidence.dataUrl?.startsWith("data:image");
    return (
      <div style={{ marginTop: 10, background: "#f0fdf4", border: "1px solid #bbf7d0", borderRadius: 10, padding: "10px 12px" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <span style={{ fontSize: 18 }}>{evidence.type === "url" ? "🔗" : isImg ? "🖼️" : "📎"}</span>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 12, fontWeight: 700, color: "#059669" }}>Evidence attached</div>
            <div style={{ fontSize: 11, color: "#6b7280", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
              {evidence.type === "url" ? evidence.url : evidence.name}
            </div>
          </div>
          <button onClick={removeEvidence} style={{ background: "none", border: "none", color: "#9ca3af", cursor: "pointer", fontSize: 16 }}>×</button>
        </div>
        {isImg && <img src={evidence.dataUrl} alt="evidence" style={{ marginTop: 8, maxWidth: "100%", maxHeight: 120, borderRadius: 8, objectFit: "cover" }} />}
      </div>
    );
  }

  return (
    <div style={{ marginTop: 10 }}>
      {showUrlBox ? (
        <div style={{ display: "flex", gap: 6 }}>
          <input value={urlInput} onChange={e => setUrlInput(e.target.value)} placeholder="https://..." onKeyDown={e => e.key === "Enter" && addUrl()}
            style={{ flex: 1, padding: "8px 11px", borderRadius: 8, border: "1.5px solid #e5e7eb", fontSize: 13, outline: "none", boxSizing: "border-box" }}
            onFocus={e => e.target.style.borderColor = color} onBlur={e => e.target.style.borderColor = "#e5e7eb"} autoFocus />
          <button onClick={addUrl} style={{ padding: "8px 13px", borderRadius: 8, border: "none", background: color, color: "#fff", fontSize: 12, fontWeight: 700, cursor: "pointer" }}>Add</button>
          <button onClick={() => setShowUrlBox(false)} style={{ padding: "8px 10px", borderRadius: 8, border: "1px solid #e5e7eb", background: "#f9fafb", fontSize: 12, cursor: "pointer" }}>✕</button>
        </div>
      ) : (
        <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
          <button onClick={() => fileRef.current.click()} style={{ padding: "6px 12px", borderRadius: 8, border: "1.5px dashed #d1d5db", background: "#fafafa", fontSize: 12, color: "#6b7280", cursor: "pointer" }}>
            📎 Upload file
          </button>
          <button onClick={() => setShowUrlBox(true)} style={{ padding: "6px 12px", borderRadius: 8, border: "1.5px dashed #d1d5db", background: "#fafafa", fontSize: 12, color: "#6b7280", cursor: "pointer" }}>
            🔗 Add URL
          </button>
          <input ref={fileRef} type="file" accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.csv,.txt,.ppt,.pptx" style={{ display: "none" }} onChange={handleFile} />
        </div>
      )}
    </div>
  );
}

function ClockOut({ user, lockedGoals, apiKey, onClockOutDone }) {
  const [completions, setCompletions] = useState(() =>
    lockedGoals.map(g => ({ id: g.id, done: false, partial: false, notes: "", evidence: null }))
  );
  const [submitting, setSubmitting] = useState(false);
  const [aiSummary, setAiSummary] = useState(null);
  const [aiLoading, setAiLoading] = useState(false);
  const [clockedOut, setClockedOut] = useState(false);

  function toggle(id, field) {
    setCompletions(p => p.map(c => {
      if (c.id !== id) return c;
      if (field === "done") return { ...c, done: !c.done, partial: false };
      if (field === "partial") return { ...c, partial: !c.partial, done: false };
      return c;
    }));
  }

  function updateNotes(id, notes) { setCompletions(p => p.map(c => c.id === id ? { ...c, notes } : c)); }
  function updateEvidence(id, evidence) { setCompletions(p => p.map(c => c.id === id ? { ...c, evidence } : c)); }

  const doneCount = completions.filter(c => c.done).length;
  const partialCount = completions.filter(c => c.partial).length;
  const totalGoals = lockedGoals.length;

  async function generateSummary() {
    setAiLoading(true);
    const lines = lockedGoals.map((g, i) => {
      const c = completions[i];
      const status = c.done ? "COMPLETED" : c.partial ? "PARTIAL" : "NOT DONE";
      return `- ${g.taskText} (${g.points} pts): ${status}${c.notes ? " — " + c.notes : ""}`;
    }).join("\n");
    const prompt = `Marketing employee ${user.name} is clocking out. Here's their day:
${lines}

Write a 2-sentence end-of-day coaching note: one sentence acknowledging what went well, one forward-looking suggestion. Be direct, warm, and specific.`;
    try {
      const r = await callGemini(apiKey, prompt);
      setAiSummary(r.trim());
    } catch (e) { setAiSummary("Could not generate summary: " + e.message); }
    setAiLoading(false);
  }

  async function handleClockOut() {
    setSubmitting(true);
    await new Promise(r => setTimeout(r, 800));
    setClockedOut(true);
    setSubmitting(false);
    onClockOutDone(completions);
  }

  if (clockedOut) {
    return (
      <div style={{ padding: "3rem 1rem", maxWidth: 480, margin: "0 auto", textAlign: "center" }}>
        <div style={{ fontSize: 56, marginBottom: 12 }}>🏁</div>
        <h2 style={{ fontSize: 22, fontWeight: 800, color: "#111", marginBottom: 8 }}>Clocked out!</h2>
        <p style={{ color: "#6b7280", marginBottom: "1.5rem" }}>Your day is logged. Manager reconciliation runs at 5 PM.</p>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 10 }}>
          {[{ l: "Completed", v: doneCount, c: "#059669" }, { l: "Partial", v: partialCount, c: "#d97706" }, { l: "Missed", v: totalGoals - doneCount - partialCount, c: "#dc2626" }].map(s => (
            <Card key={s.l} style={{ textAlign: "center", padding: "1rem 0.75rem" }}>
              <div style={{ fontSize: 28, fontWeight: 800, color: s.c }}>{s.v}</div>
              <div style={{ fontSize: 11, color: "#9ca3af", marginTop: 2 }}>{s.l}</div>
            </Card>
          ))}
        </div>
      </div>
    );
  }

  return (
    <div style={{ padding: "1.25rem 1rem", maxWidth: 600, margin: "0 auto" }}>
      <div style={{ marginBottom: "1.25rem" }}>
        <h2 style={{ fontSize: 18, fontWeight: 800, color: "#111", margin: 0 }}>🕔 Clock Out — End of Day</h2>
        <p style={{ fontSize: 13, color: "#9ca3af", margin: "3px 0 0" }}>Tick what you did · upload evidence where needed</p>
      </div>

      {lockedGoals.map((goal, idx) => {
        const c = completions.find(x => x.id === goal.id);
        const status = c.done ? "done" : c.partial ? "partial" : "none";
        const borderColor = status === "done" ? "#059669" : status === "partial" ? "#d97706" : "#f0f0f0";
        const bgColor = status === "done" ? "#f0fdf4" : status === "partial" ? "#fffbeb" : "#fff";

        return (
          <Card key={goal.id} style={{ marginBottom: 12, border: "1.5px solid " + borderColor, background: bgColor, transition: "all 0.2s" }}>
            {/* Goal header */}
            <div style={{ display: "flex", alignItems: "flex-start", gap: 12 }}>
              <div style={{ display: "flex", flexDirection: "column", gap: 6, flexShrink: 0, paddingTop: 2 }}>
                {/* Done checkbox */}
                <button onClick={() => toggle(goal.id, "done")} title="Mark as completed" style={{ width: 26, height: 26, borderRadius: 7, border: "2px solid " + (c.done ? "#059669" : "#d1d5db"), background: c.done ? "#059669" : "#fff", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", flexShrink: 0, transition: "all 0.15s" }}>
                  {c.done && <span style={{ color: "#fff", fontSize: 14, fontWeight: 900 }}>✓</span>}
                </button>
                {/* Partial checkbox */}
                <button onClick={() => toggle(goal.id, "partial")} title="Mark as partially done" style={{ width: 26, height: 26, borderRadius: 7, border: "2px solid " + (c.partial ? "#d97706" : "#d1d5db"), background: c.partial ? "#d97706" : "#fff", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", flexShrink: 0, transition: "all 0.15s" }}>
                  {c.partial && <span style={{ color: "#fff", fontSize: 14, fontWeight: 900 }}>~</span>}
                </button>
              </div>

              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap", marginBottom: 4 }}>
                  <span style={{ fontWeight: 700, fontSize: 15, color: "#111", textDecoration: c.done ? "none" : "none" }}>
                    {TASKS.find(t => t.label === goal.taskText)?.icon || "📌"} {goal.taskText}
                  </span>
                  <Pill color={user.color}>{goal.points} pts</Pill>
                  {status === "done" && <Pill color="#059669">✓ Done</Pill>}
                  {status === "partial" && <Pill color="#d97706">~ Partial</Pill>}
                </div>
                {goal.hours && <div style={{ fontSize: 12, color: "#9ca3af" }}>Planned: {goal.hours}h</div>}
                <div style={{ fontSize: 11, color: "#d1d5db", marginTop: 2 }}>✓ = complete · ~ = partial</div>
              </div>
            </div>

            {/* Notes */}
            <div style={{ marginTop: 12 }}>
              <textarea value={c.notes} onChange={e => updateNotes(goal.id, e.target.value)} rows={2}
                placeholder="What did you actually do? Any blockers? (optional)"
                style={{ width: "100%", padding: "8px 11px", borderRadius: 9, border: "1.5px solid #e5e7eb", fontSize: 13, outline: "none", resize: "vertical", boxSizing: "border-box", fontFamily: "inherit", lineHeight: 1.5 }}
                onFocus={e => e.target.style.borderColor = user.color} onBlur={e => e.target.style.borderColor = "#e5e7eb"} />
            </div>

            {/* Evidence uploader */}
            <EvidenceUploader goalId={goal.id} evidence={c.evidence} onUpdate={updateEvidence} color={user.color} />
          </Card>
        );
      })}

      {/* AI summary */}
      <div style={{ marginBottom: "1rem" }}>
        <button onClick={generateSummary} disabled={aiLoading} style={{ padding: "9px 16px", borderRadius: 9, border: "1.5px solid #6366f1", background: "#eef2ff", color: "#6366f1", fontSize: 13, fontWeight: 700, cursor: "pointer" }}>
          🤖 Generate AI End-of-Day Summary
        </button>
        {aiLoading && <div style={{ marginTop: 8 }}><Spinner /></div>}
        {aiSummary && (
          <div style={{ marginTop: 10, background: "#f5f3ff", borderRadius: 10, padding: "12px 14px", border: "1px solid #e0e7ff", fontSize: 13, color: "#4c1d95", lineHeight: 1.7 }}>
            🤖 {aiSummary}
          </div>
        )}
      </div>

      {/* Submit */}
      <div style={{ display: "flex", alignItems: "center", gap: 10, justifyContent: "flex-end" }}>
        <div style={{ fontSize: 13, color: "#6b7280" }}>
          <span style={{ fontWeight: 700, color: "#059669" }}>{doneCount}</span> done · <span style={{ fontWeight: 700, color: "#d97706" }}>{partialCount}</span> partial
        </div>
        <button onClick={handleClockOut} disabled={submitting}
          style={{ padding: "11px 22px", borderRadius: 10, border: "none", background: user.color, color: "#fff", fontSize: 13, fontWeight: 700, cursor: "pointer" }}>
          {submitting ? "Submitting..." : "🏁 Clock Out"}
        </button>
      </div>
    </div>
  );
}

// ─── MY STATS ─────────────────────────────────────────────────────────────────
function MyStats({ user }) {
  const history = SAMPLE_HISTORY[user.id] || [];
  const done = history.filter(d => d.status !== "pending");
  const verifiedDays = done.filter(d => d.status === "verified").length;
  const totalPts = done.reduce((s, d) => s + d.points, 0);
  const netTrust = done.reduce((s, d) => s + d.trustDelta, 0);
  const maxPts = Math.max(...done.map(d => d.points), 1);

  return (
    <div style={{ padding: "1.25rem 1rem", maxWidth: 600, margin: "0 auto" }}>
      <h2 style={{ fontSize: 18, fontWeight: 800, color: "#111", marginBottom: "1.25rem" }}>My Performance</h2>
      <Card style={{ marginBottom: "1rem", background: user.color + "08", border: "1px solid " + user.color + "30" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: "1rem" }}>
          <Avatar initials={user.avatar} size={52} color={user.color} />
          <div style={{ flex: 1 }}>
            <div style={{ fontWeight: 800, fontSize: 16, color: "#111" }}>{user.name}</div>
            <div style={{ fontSize: 12, color: "#9ca3af" }}>{user.handle}</div>
          </div>
          <div style={{ textAlign: "right" }}>
            <div style={{ fontSize: 34, fontWeight: 800, color: batteryColor(user.trustBattery) }}>{user.trustBattery}</div>
            <div style={{ fontSize: 11, color: "#9ca3af" }}>Trust Battery</div>
          </div>
        </div>
        <TrustBar value={user.trustBattery} />
      </Card>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 10, marginBottom: "1rem" }}>
        {[{ l: "Days verified", v: verifiedDays, c: "#059669" }, { l: "Story points", v: totalPts, c: user.color }, { l: "Trust change", v: (netTrust > 0 ? "+" : "") + netTrust, c: netTrust >= 0 ? "#059669" : "#dc2626" }].map(s => (
          <Card key={s.l} style={{ textAlign: "center", padding: "1rem 0.75rem" }}>
            <div style={{ fontSize: 26, fontWeight: 800, color: s.c }}>{s.v}</div>
            <div style={{ fontSize: 11, color: "#9ca3af", marginTop: 2 }}>{s.l}</div>
          </Card>
        ))}
      </div>

      <Card style={{ marginBottom: "1rem" }}>
        <div style={{ fontSize: 13, fontWeight: 700, color: "#374151", marginBottom: 12 }}>This Week</div>
        <div style={{ display: "flex", gap: 8, alignItems: "flex-end" }}>
          {history.map(d => (
            <div key={d.date} style={{ flex: 1, textAlign: "center" }}>
              <div style={{ height: 80, display: "flex", alignItems: "flex-end", justifyContent: "center", marginBottom: 6 }}>
                {d.status !== "pending"
                  ? <div style={{ width: "70%", height: Math.max((d.points / maxPts) * 72, 6) + "px", background: d.status === "verified" ? user.color : "#dc2626", borderRadius: "4px 4px 0 0", opacity: 0.85 }} />
                  : <div style={{ width: "70%", height: 6, background: "#f3f4f6", borderRadius: 4 }} />}
              </div>
              <div style={{ fontSize: 10, color: "#9ca3af" }}>{d.date}</div>
              <div style={{ fontSize: 12, marginTop: 2 }}>{d.status === "verified" ? "✅" : d.status === "flagged" ? "⚠️" : "⏳"}</div>
              {d.trustDelta !== 0 && <div style={{ fontSize: 10, fontWeight: 700, color: d.trustDelta > 0 ? "#059669" : "#dc2626" }}>{d.trustDelta > 0 ? "+" : ""}{d.trustDelta}</div>}
            </div>
          ))}
        </div>
      </Card>

      <Card style={{ background: user.trustBattery >= 70 ? "#f0fdf4" : "#fef2f2", border: "1px solid " + (user.trustBattery >= 70 ? "#bbf7d0" : "#fecaca") }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <span style={{ fontSize: 24 }}>{user.trustBattery >= 70 ? "💚" : "🔴"}</span>
          <div>
            <div style={{ fontWeight: 700, fontSize: 14, color: user.trustBattery >= 70 ? "#059669" : "#dc2626" }}>Performance pay: {user.trustBattery >= 70 ? "cleared ✓" : "at risk ✗"}</div>
            <div style={{ fontSize: 12, color: "#6b7280", marginTop: 1 }}>{user.trustBattery >= 70 ? "Keep your Trust Battery above 70% to maintain performance pay." : "Trust Battery below threshold. Review flagged days with your manager."}</div>
          </div>
        </div>
      </Card>
    </div>
  );
}

// ─── SCORECARD ────────────────────────────────────────────────────────────────
function EmployeeScorecard({ user, scorecardApproved }) {
  const history = SAMPLE_HISTORY[user.id] || [];
  if (!scorecardApproved) {
    return (
      <div style={{ padding: "3rem 1rem", maxWidth: 440, margin: "0 auto", textAlign: "center" }}>
        <div style={{ fontSize: 52, marginBottom: 14 }}>🔐</div>
        <h2 style={{ fontSize: 20, fontWeight: 800, color: "#111", marginBottom: 8 }}>Scorecard Locked</h2>
        <p style={{ fontSize: 14, color: "#6b7280", lineHeight: 1.7 }}>{!isFriday() ? "Your weekly scorecard is released every Friday after your manager reviews and approves it." : "Your manager hasn't approved this week's scorecard yet."}</p>
        <div style={{ marginTop: "1.5rem", background: "#f9fafb", borderRadius: 12, padding: "1rem", fontSize: 13, color: "#9ca3af" }}>{!isFriday() ? "📅 Available on Friday" : "⏳ Awaiting manager approval"}</div>
      </div>
    );
  }
  return (
    <div style={{ padding: "1.25rem 1rem", maxWidth: 560, margin: "0 auto" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: "1.25rem" }}>
        <h2 style={{ fontSize: 18, fontWeight: 800, color: "#111", margin: 0 }}>Weekly Scorecard</h2>
        <Pill color="#059669">✓ Approved</Pill>
      </div>
      <Card style={{ marginBottom: "1rem" }}><TrustBar value={user.trustBattery} /></Card>
      {history.filter(d => d.status !== "pending").map(d => (
        <Card key={d.date} style={{ marginBottom: 8, display: "flex", alignItems: "center", gap: 12, padding: "0.9rem 1rem" }}>
          <div style={{ width: 44, height: 44, borderRadius: 10, background: d.status === "verified" ? "#f0fdf4" : "#fef2f2", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 20 }}>
            {d.status === "verified" ? "✅" : "⚠️"}
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontWeight: 700, fontSize: 14 }}>{d.date}</div>
            <div style={{ fontSize: 12, color: "#9ca3af" }}>{d.points} story points · {d.status}</div>
          </div>
          <div style={{ fontWeight: 700, fontSize: 14, color: d.trustDelta >= 0 ? "#059669" : "#dc2626" }}>{d.trustDelta > 0 ? "+" : ""}{d.trustDelta}</div>
        </Card>
      ))}
    </div>
  );
}

// ─── MANAGER DASHBOARD ────────────────────────────────────────────────────────
function ManagerDashboard({ apiKey, scorecardApproved, onApproveScorecard }) {
  const [tab, setTab] = useState("overview");
  const [generatingFor, setGeneratingFor] = useState(null);
  const [reports, setReports] = useState({});
  const [reconciling, setReconciling] = useState(false);
  const [reconProgress, setReconProgress] = useState(0);
  const [reconDone, setReconDone] = useState(false);
  const employees = USERS.filter(u => u.role === "employee");

  async function generateReport(emp) {
    setGeneratingFor(emp.id);
    const h = SAMPLE_HISTORY[emp.id] || [];
    const prompt = `Write a brief professional weekly performance review (3 short paragraphs, no bullets) for ${emp.name}.
Stats: Trust Battery ${emp.trustBattery}%, verified days: ${h.filter(d=>d.status==="verified").length}/4, flagged: ${h.filter(d=>d.status==="flagged").length}, total points: ${h.reduce((s,d)=>s+d.points,0)}.
Be specific, constructive, and direct.`;
    try { const r = await callGemini(apiKey, prompt); setReports(p => ({ ...p, [emp.id]: r })); }
    catch (e) { setReports(p => ({ ...p, [emp.id]: "Error: " + e.message })); }
    setGeneratingFor(null);
  }

  async function runRecon() {
    setReconciling(true); setReconProgress(0); setReconDone(false);
    for (let i = 0; i <= 100; i += 5) { await new Promise(r => setTimeout(r, 70)); setReconProgress(i); }
    setReconciling(false); setReconDone(true);
  }

  const tabs = [{ id: "overview", label: "Overview" }, { id: "reconciliation", label: "Reconciliation" }, { id: "scorecards", label: "Scorecards" }, { id: "trust", label: "Trust" }];

  return (
    <div style={{ padding: "1.25rem 1rem", maxWidth: 680, margin: "0 auto" }}>
      <div style={{ marginBottom: "1.25rem" }}>
        <h2 style={{ fontSize: 18, fontWeight: 800, color: "#111", margin: 0 }}>Manager Dashboard</h2>
        <p style={{ fontSize: 13, color: "#9ca3af", margin: "4px 0 0" }}>Full team visibility</p>
      </div>
      <div style={{ display: "flex", gap: 4, marginBottom: "1.25rem", background: "#f3f4f6", borderRadius: 10, padding: 4 }}>
        {tabs.map(t => (
          <button key={t.id} onClick={() => setTab(t.id)} style={{ flex: 1, padding: "8px 4px", borderRadius: 7, border: "none", background: tab === t.id ? "#fff" : "transparent", color: tab === t.id ? "#111" : "#6b7280", fontSize: 12, fontWeight: tab === t.id ? 700 : 500, cursor: "pointer", boxShadow: tab === t.id ? "0 1px 3px rgba(0,0,0,0.1)" : "none" }}>{t.label}</button>
        ))}
      </div>

      {tab === "overview" && (
        <div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 10, marginBottom: "1rem" }}>
            {[{ l: "Team avg trust", v: Math.round(employees.reduce((s,e)=>s+e.trustBattery,0)/employees.length)+"%", c: "#6366f1" }, { l: "Verified today", v: "4/5", c: "#059669" }, { l: "Flags pending", v: "2", c: "#dc2626" }].map(s => (
              <Card key={s.l} style={{ textAlign: "center", padding: "0.9rem" }}>
                <div style={{ fontSize: 24, fontWeight: 800, color: s.c }}>{s.v}</div>
                <div style={{ fontSize: 11, color: "#9ca3af", marginTop: 2 }}>{s.l}</div>
              </Card>
            ))}
          </div>
          {employees.map(emp => {
            const h = SAMPLE_HISTORY[emp.id] || [];
            const hasFlag = h.some(d => d.status === "flagged");
            return (
              <Card key={emp.id} style={{ marginBottom: 10 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                  <Avatar initials={emp.avatar} size={42} color={emp.color} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap", marginBottom: 4 }}>
                      <span style={{ fontWeight: 700, fontSize: 14 }}>{emp.name}</span>
                      {hasFlag && <Pill color="#dc2626">⚠ flagged</Pill>}
                    </div>
                    <div style={{ height: 7, background: "#f3f4f6", borderRadius: 99 }}>
                      <div style={{ width: emp.trustBattery + "%", height: "100%", background: batteryColor(emp.trustBattery), borderRadius: 99 }} />
                    </div>
                  </div>
                  <div style={{ textAlign: "right", flexShrink: 0 }}>
                    <div style={{ fontSize: 20, fontWeight: 800, color: batteryColor(emp.trustBattery) }}>{emp.trustBattery}%</div>
                    <div style={{ fontSize: 10, color: "#9ca3af" }}>trust</div>
                  </div>
                </div>
              </Card>
            );
          })}
        </div>
      )}

      {tab === "reconciliation" && (
        <div>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "1rem", flexWrap: "wrap", gap: 10 }}>
            <p style={{ fontSize: 13, color: "#6b7280", margin: 0 }}>Social API verification + AI quality audits</p>
            <button onClick={runRecon} disabled={reconciling} style={{ padding: "9px 18px", borderRadius: 9, border: "none", background: reconciling ? "#e5e7eb" : "#111", color: reconciling ? "#9ca3af" : "#fff", fontSize: 13, fontWeight: 700, cursor: reconciling ? "not-allowed" : "pointer" }}>
              {reconciling ? "Running " + reconProgress + "%..." : reconDone ? "▶ Re-run" : "▶ Run Job"}
            </button>
          </div>
          {reconciling && (
            <Card style={{ marginBottom: "1rem" }}>
              <div style={{ display: "flex", justifyContent: "space-between", fontSize: 13, color: "#6b7280", marginBottom: 8 }}>
                <span>{reconProgress < 35 ? "Connecting to Meta Graph API..." : reconProgress < 65 ? "Verifying post timestamps..." : reconProgress < 88 ? "Counting interactions..." : "Compiling results..."}</span>
                <span>{reconProgress}%</span>
              </div>
              <div style={{ height: 6, background: "#f3f4f6", borderRadius: 99 }}>
                <div style={{ width: reconProgress + "%", height: "100%", background: "#111", borderRadius: 99, transition: "width 0.1s" }} />
              </div>
            </Card>
          )}
          {employees.map(emp => {
            const h = SAMPLE_HISTORY[emp.id] || [];
            const flagged = h.filter(d => d.status === "flagged").length;
            const verified = h.filter(d => d.status === "verified").length;
            return (
              <Card key={emp.id} style={{ marginBottom: 10 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 10 }}>
                  <Avatar initials={emp.avatar} size={36} color={emp.color} />
                  <span style={{ fontWeight: 700, fontSize: 14, flex: 1 }}>{emp.name}</span>
                  <Pill color="#059669">✓ {verified}</Pill>
                  {flagged > 0 && <Pill color="#dc2626">⚠ {flagged} flagged</Pill>}
                </div>
                <div style={{ display: "flex", gap: 6 }}>
                  {h.filter(d => d.status !== "pending").map(d => (
                    <div key={d.date} style={{ flex: 1, padding: "7px 6px", borderRadius: 8, background: d.status === "verified" ? "#f0fdf4" : "#fef2f2", textAlign: "center" }}>
                      <div style={{ fontSize: 11, fontWeight: 700, color: d.status === "verified" ? "#059669" : "#dc2626" }}>{d.date}</div>
                      <div style={{ fontSize: 10, color: "#9ca3af", marginTop: 1 }}>{d.points}pts</div>
                    </div>
                  ))}
                </div>
              </Card>
            );
          })}
        </div>
      )}

      {tab === "scorecards" && (
        <div>
          {!scorecardApproved
            ? <button onClick={onApproveScorecard} style={{ width: "100%", padding: 13, borderRadius: 12, border: "none", background: "#059669", color: "#fff", fontSize: 14, fontWeight: 700, cursor: "pointer", marginBottom: "1rem" }}>✓ Approve All Scorecards & Notify Team</button>
            : <div style={{ background: "#f0fdf4", border: "1px solid #bbf7d0", borderRadius: 12, padding: "12px 16px", marginBottom: "1rem", fontSize: 13, color: "#059669", fontWeight: 600 }}>✅ Scorecards approved — employees can now view their results.</div>
          }
          {employees.map(emp => (
            <Card key={emp.id} style={{ marginBottom: 10 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }}>
                <Avatar initials={emp.avatar} size={40} color={emp.color} />
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 700, fontSize: 14 }}>{emp.name}</div>
                  <div style={{ fontSize: 12, color: "#9ca3af" }}>Trust Battery: <span style={{ fontWeight: 700, color: batteryColor(emp.trustBattery) }}>{emp.trustBattery}%</span></div>
                </div>
                <Pill color={emp.trustBattery >= 70 ? "#059669" : "#dc2626"}>{emp.trustBattery >= 70 ? "Pay cleared ✓" : "Pay withheld ✗"}</Pill>
              </div>
              <button onClick={() => generateReport(emp)} disabled={generatingFor === emp.id} style={{ padding: "8px 14px", borderRadius: 8, border: "1.5px solid #6366f1", background: "#eef2ff", color: "#6366f1", fontSize: 12, fontWeight: 700, cursor: "pointer" }}>
                {generatingFor === emp.id ? "Generating..." : "🤖 AI Performance Report"}
              </button>
              {generatingFor === emp.id && <div style={{ marginTop: 8 }}><Spinner /></div>}
              {reports[emp.id] && <div style={{ marginTop: 10, background: "#f9fafb", borderRadius: 10, padding: "12px 14px", fontSize: 13, color: "#374151", lineHeight: 1.7, borderLeft: "3px solid " + emp.color }}>{reports[emp.id]}</div>}
            </Card>
          ))}
        </div>
      )}

      {tab === "trust" && (
        <div>
          {employees.map(emp => {
            const h = SAMPLE_HISTORY[emp.id] || [];
            return (
              <Card key={emp.id} style={{ marginBottom: 10 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: "1rem" }}>
                  <Avatar initials={emp.avatar} size={48} color={emp.color} />
                  <div style={{ flex: 1 }}>
                    <div style={{ fontWeight: 700, fontSize: 15 }}>{emp.name}</div>
                    <div style={{ fontSize: 12, color: "#9ca3af" }}>{emp.handle}</div>
                  </div>
                  <div style={{ textAlign: "right" }}>
                    <div style={{ fontSize: 28, fontWeight: 800, color: batteryColor(emp.trustBattery) }}>{emp.trustBattery}</div>
                    <div style={{ fontSize: 10, color: "#9ca3af" }}>/ 100</div>
                  </div>
                </div>
                <TrustBar value={emp.trustBattery} />
                <div style={{ display: "flex", gap: 6, marginTop: 12 }}>
                  {h.map(d => (
                    <div key={d.date} style={{ flex: 1, textAlign: "center" }}>
                      <div style={{ height: 36, borderRadius: 6, background: d.trustDelta > 0 ? "#f0fdf4" : d.trustDelta < 0 ? "#fef2f2" : "#f9fafb", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 11, fontWeight: 700, color: d.trustDelta > 0 ? "#059669" : d.trustDelta < 0 ? "#dc2626" : "#9ca3af" }}>
                        {d.trustDelta > 0 ? "+" : ""}{d.trustDelta || "–"}
                      </div>
                      <div style={{ fontSize: 10, color: "#9ca3af", marginTop: 3 }}>{d.date}</div>
                    </div>
                  ))}
                </div>
              </Card>
            );
          })}
        </div>
      )}
    </div>
  );
}

// ─── EMPLOYEE SHELL ───────────────────────────────────────────────────────────
function EmployeeShell({ user, apiKey, scorecardApproved, onLogout }) {
  // "clockin" | "clockout" | "stats" | "scorecard"
  const [tab, setTab] = useState("clockin");
  const [lockedGoals, setLockedGoals] = useState(null); // null = not clocked in yet
  const [clockedOut, setClockedOut] = useState(false);

  function handlePlanLocked(goals) { setLockedGoals(goals); setTab("clockout"); }
  function handleClockOutDone() { setClockedOut(true); }

  const tabs = [
    { id: "clockin", label: "🕘 Clock In", disabled: !!lockedGoals },
    { id: "clockout", label: "🕔 Clock Out", disabled: !lockedGoals || clockedOut },
    { id: "stats", label: "📈 Stats" },
    { id: "scorecard", label: "🏆 Scorecard" },
  ];

  return (
    <div style={{ minHeight: "100vh", background: "#f8f9fa" }}>
      <div style={{ background: "#fff", borderBottom: "1px solid #f0f0f0", padding: "0 1rem", position: "sticky", top: 0, zIndex: 100 }}>
        <div style={{ maxWidth: 640, margin: "0 auto", height: 54, display: "flex", alignItems: "center", gap: 10 }}>
          <div style={{ fontWeight: 800, fontSize: 16, color: user.color }}>⚡ TYHID</div>
          <div style={{ flex: 1 }} />
          {lockedGoals && !clockedOut && <Pill color="#059669">Clocked in ✓</Pill>}
          {clockedOut && <Pill color="#6366f1">Clocked out ✓</Pill>}
          <Avatar initials={user.avatar} size={30} color={user.color} />
          <span style={{ fontSize: 13, fontWeight: 600, color: "#374151" }}>{user.name.split(" ")[0]}</span>
          <button onClick={onLogout} style={{ padding: "4px 10px", borderRadius: 7, border: "1px solid #e5e7eb", background: "#f9fafb", fontSize: 11, color: "#9ca3af", cursor: "pointer" }}>Out</button>
        </div>
      </div>
      <div style={{ background: "#fff", borderBottom: "1px solid #f0f0f0" }}>
        <div style={{ maxWidth: 640, margin: "0 auto", display: "flex" }}>
          {tabs.map(t => (
            <button key={t.id} onClick={() => !t.disabled && setTab(t.id)} style={{ flex: 1, padding: "11px 4px", border: "none", background: "transparent", borderBottom: "2.5px solid " + (tab === t.id ? user.color : "transparent"), color: tab === t.id ? user.color : t.disabled ? "#d1d5db" : "#9ca3af", fontSize: 12, fontWeight: tab === t.id ? 700 : 500, cursor: t.disabled ? "not-allowed" : "pointer" }}>{t.label}</button>
          ))}
        </div>
      </div>
      <div style={{ maxWidth: 640, margin: "0 auto" }}>
        {tab === "clockin" && <ClockIn user={user} apiKey={apiKey} onPlanLocked={handlePlanLocked} />}
        {tab === "clockout" && lockedGoals && <ClockOut user={user} lockedGoals={lockedGoals} apiKey={apiKey} onClockOutDone={handleClockOutDone} />}
        {tab === "stats" && <MyStats user={user} />}
        {tab === "scorecard" && <EmployeeScorecard user={user} scorecardApproved={scorecardApproved} />}
      </div>
    </div>
  );
}

// ─── MANAGER SHELL ────────────────────────────────────────────────────────────
function ManagerShell({ apiKey, onLogout, scorecardApproved, onApproveScorecard }) {
  return (
    <div style={{ minHeight: "100vh", background: "#f8f9fa" }}>
      <div style={{ background: "#111", padding: "0 1rem", position: "sticky", top: 0, zIndex: 100 }}>
        <div style={{ maxWidth: 720, margin: "0 auto", height: 54, display: "flex", alignItems: "center", gap: 10 }}>
          <div style={{ fontWeight: 800, fontSize: 16, color: "#fff" }}>⚡ TYHID</div>
          <Pill color="#fff" bg="#ffffff22">Manager</Pill>
          <div style={{ flex: 1 }} />
          <button onClick={onLogout} style={{ padding: "5px 12px", borderRadius: 7, border: "1px solid #ffffff30", background: "transparent", fontSize: 12, color: "#ffffff90", cursor: "pointer" }}>Sign out</button>
        </div>
      </div>
      <ManagerDashboard apiKey={apiKey} scorecardApproved={scorecardApproved} onApproveScorecard={onApproveScorecard} />
    </div>
  );
}

// ─── ROOT ─────────────────────────────────────────────────────────────────────
export default function App() {
  const [apiKey, setApiKey] = useState("");
  const [screen, setScreen] = useState("setup");
  const [user, setUser] = useState(null);
  const [scorecardApproved, setScorecardApproved] = useState(false);

  return (
    <>
      <style>{`
        @keyframes spin { to { transform: rotate(360deg); } }
        @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
        @keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
        * { box-sizing: border-box; }
        button, input, select, textarea { font-family: inherit; }
      `}</style>
      {screen === "setup" && <SetupScreen onDone={k => { setApiKey(k); setScreen("login"); }} />}
      {screen === "login" && <LoginScreen onLogin={u => { setUser(u); setScreen("app"); }} />}
      {screen === "app" && user?.role === "manager" && <ManagerShell apiKey={apiKey} onLogout={() => { setUser(null); setScreen("login"); }} scorecardApproved={scorecardApproved} onApproveScorecard={() => setScorecardApproved(true)} />}
      {screen === "app" && user?.role === "employee" && <EmployeeShell user={user} apiKey={apiKey} scorecardApproved={scorecardApproved} onLogout={() => { setUser(null); setScreen("login"); }} />}
    </>
  );
}