Ghost Employer Tracking

import { useState } from "react";

type GhostClassification = "suspected" | "confirmed";

const GHOST_META = {
  suspected: {
    label:  "Suspected Ghost",
    detail: "This employer has gone silent on multiple applicants. Consider following up or deprioritising.",
    colorVar: "var(--status-warning)",
  },
  confirmed: {
    label:  "Confirmed Ghost",
    detail: "Community reports confirm this employer consistently stops responding after first-round interviews.",
    colorVar: "var(--status-danger)",
  },
};

// Compact capsule — overlay on job cards
export function GhostBadge({ cls }: { cls: GhostClassification }) {
  const m = GHOST_META[cls];
  return (
    <span
      role="status"
      aria-label={`Ghost employer warning: ${m.label}`}
      style={{
        display: "inline-flex", alignItems: "center", gap: 4,
        padding: "3px 8px", borderRadius: 99, fontSize: 11, fontWeight: 700,
        background: `rgb(${m.colorVar} / 0.12)`,
        color: `rgb(${m.colorVar})`,
        border: `0.5px solid rgb(${m.colorVar} / 0.3)`,
      }}
    >
      ⚠ {m.label}
    </span>
  );
}

// Expandable banner — detail screen
export function GhostBanner({
  cls,
  onSetDeadline,
}: {
  cls: GhostClassification;
  onSetDeadline?: () => void;
}) {
  const [expanded, setExpanded] = useState(false);
  const m = GHOST_META[cls];

  return (
    <div
      role="region"
      aria-label={`Ghost employer warning: ${m.label}`}
      style={{
        borderRadius: 12,
        border: `0.5px solid rgb(${m.colorVar} / 0.3)`,
        background: `rgb(${m.colorVar} / 0.06)`,
        overflow: "hidden",
      }}
    >
      <button
        aria-expanded={expanded}
        onClick={() => setExpanded(v => !v)}
        style={{
          width: "100%", display: "flex", alignItems: "center", gap: 8,
          padding: "10px 14px", background: "transparent", border: "none",
          cursor: "pointer", color: `rgb(${m.colorVar})`,
          fontSize: 12, fontWeight: 700,
        }}
      >
        ⚠ <span style={{ flex: 1, textAlign: "left" }}>{m.label}</span>
        <span style={{ fontSize: 10, opacity: 0.6 }}>{expanded ? "▲" : "▼"}</span>
      </button>

      {expanded && (
        <div style={{ padding: "0 14px 14px", borderTop: `0.5px solid rgb(${m.colorVar} / 0.3)` }}>
          <p style={{ fontSize: 12, color: "rgb(var(--text-secondary))", margin: "10px 0 10px", lineHeight: 1.6 }}>
            {m.detail}
          </p>
          {onSetDeadline && (
            <button onClick={onSetDeadline} style={{
              display: "flex", alignItems: "center", gap: 6, padding: "5px 12px",
              borderRadius: 8, border: "none",
              background: `rgb(${m.colorVar} / 0.1)`,
              color: `rgb(${m.colorVar})`,
              fontSize: 12, fontWeight: 600, cursor: "pointer",
            }}>
              📅 Set 14-day follow-up reminder
            </button>
          )}
        </div>
      )}
    </div>
  );
}

// Settings opt-in toggle
export function GhostContributionToggle({
  enabled,
  onChange,
}: {
  enabled: boolean;
  onChange: (v: boolean) => void;
}) {
  return (
    <div style={{ display: "flex", alignItems: "flex-start", gap: 12, padding: "14px 0" }}>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 14, fontWeight: 600, color: "rgb(var(--text-primary))", marginBottom: 4 }}>
          Contribute Anonymous Reports
        </div>
        <div style={{ fontSize: 12, color: "rgb(var(--text-secondary))", lineHeight: 1.6, marginBottom: 8 }}>
          Help other job-seekers by sharing anonymous signals when employers go silent.
          Only the employer's domain (e.g. acme.com) is ever sent.
        </div>
        <div style={{ fontSize: 11, color: "rgb(var(--text-tertiary))", display: "flex", alignItems: "center", gap: 4 }}>
          🔒 No personal data leaves your device.
        </div>
      </div>
      <input type="checkbox" checked={enabled} onChange={e => onChange(e.target.checked)}
        style={{ marginTop: 4, accentColor: "rgb(var(--accent))", width: 18, height: 18, cursor: "pointer" }}
        aria-label="Contribute anonymous ghost employer reports"
      />
    </div>
  );
}