import { useState, useEffect, useRef } from "react";

// --- Mock Data ---
const USERS = {
  scott: { username: "scott", displayName: "Scott Werner", bio: "Writing fiction about near-zero creation costs. Building tools for the things AI helps people make.", avatar: "SW", followers: 312, following: 89 },
  maya: { username: "maya", displayName: "Maya Chen", bio: "Data journalist. Making policy arguments you can touch.", avatar: "MC", followers: 1204, following: 156 },
  jt: { username: "jt", displayName: "J. Takahashi", bio: "Generative art and weird tools. Previously @stripe.", avatar: "JT", followers: 876, following: 203 },
  lina: { username: "lina", displayName: "Lina Park", bio: "Educator. Turning textbooks into playgrounds.", avatar: "LP", followers: 534, following: 67 },
  omar: { username: "omar", displayName: "Omar Farouk", bio: "Climate modeling. Every parameter is an argument.", avatar: "OF", followers: 2891, following: 44 },
};

const ARTIFACTS = [
  { id: 1, title: "PreTeXt: A New Text Flow Algorithm", user: "maya", description: "An interactive walkthrough of the PreTeXt line-breaking algorithm. Drag text and watch reflow happen in real-time.", tags: ["algorithms", "typography", "explainer"], likes: 847, remixes: 23, remixOf: null, visibility: "public", color: "#1a1a2e", accent: "#e94560", type: "explanation", timeAgo: "2h" },
  { id: 2, title: "FFmpeg Clip Exporter", user: "scott", description: "Upload a video, mark in/out points, get the exact ffmpeg commands to export your clips. No server needed.", tags: ["tool", "video", "ffmpeg"], likes: 1203, remixes: 67, remixOf: null, visibility: "public", color: "#0f3460", accent: "#00d2ff", type: "tool", timeAgo: "5h" },
  { id: 3, title: "Carbon Budget Explorer", user: "omar", description: "What happens if we hit net zero by 2040? 2050? 2070? Drag the timeline and watch cascading effects across 12 economic sectors.", tags: ["climate", "economics", "simulation"], likes: 3201, remixes: 156, remixOf: null, visibility: "public", color: "#1b4332", accent: "#95d5b2", type: "explanation", timeAgo: "8h" },
  { id: 4, title: "Fourier Transform Playground", user: "lina", description: "Draw any wave. Decompose it. Recompose it. Finally understand what a Fourier transform actually does.", tags: ["math", "education", "interactive"], likes: 2156, remixes: 89, remixOf: null, visibility: "public", color: "#2d1b69", accent: "#b8a9e8", type: "explanation", timeAgo: "12h" },
  { id: 5, title: "Recursive Subdivision", user: "jt", description: "Generative art piece. Click anywhere to seed. Watch it grow.", tags: ["generative", "art", "creative"], likes: 678, remixes: 34, remixOf: null, visibility: "public", color: "#1a1a1a", accent: "#ff6b6b", type: "creative", timeAgo: "1d" },
  { id: 6, title: "Carbon Budget Explorer (EU Variant)", user: "maya", description: "Omar's carbon model adapted for EU-specific policy scenarios and Fit for 55 targets.", tags: ["climate", "EU", "policy"], likes: 890, remixes: 12, remixOf: 3, visibility: "public", color: "#1b4332", accent: "#74c69d", type: "explanation", timeAgo: "1d" },
  { id: 7, title: "Series A Model Explorer", user: "scott", description: "Interactive financial model. Shared with investors.", tags: ["finance", "startup"], likes: 0, remixes: 0, remixOf: null, visibility: "unlisted", color: "#16213e", accent: "#4fc3f7", type: "tool", timeAgo: "2d" },
  { id: 8, title: "Regex Tester & Explainer", user: "jt", description: "Paste a regex. Get a visual breakdown of what it matches and why. Highlight groups, quantifiers, lookaheads.", tags: ["tool", "regex", "developer"], likes: 1567, remixes: 45, remixOf: null, visibility: "public", color: "#0d1117", accent: "#58a6ff", type: "tool", timeAgo: "2d" },
  { id: 9, title: "Housing Affordability Simulator", user: "omar", description: "Set interest rates, zoning policy, and construction costs. Watch 30 years of housing supply and demand play out.", tags: ["economics", "housing", "policy"], likes: 4502, remixes: 201, remixOf: null, visibility: "public", color: "#3d1c02", accent: "#f4a261", type: "explanation", timeAgo: "3d" },
  { id: 10, title: "Color Palette from Image", user: "lina", description: "Drop an image. Extract dominant colors. Copy as CSS variables, Tailwind config, or Figma tokens.", tags: ["tool", "design", "color"], likes: 2340, remixes: 78, remixOf: null, visibility: "public", color: "#0c0c1d", accent: "#ffd166", type: "tool", timeAgo: "4d" },
];

// --- Fake Artifact Renderer ---
function FakeArtifact({ artifact, interactive = false }) {
  const canvasRef = useRef(null);
  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext("2d");
    const w = canvas.width = canvas.offsetWidth * 2;
    const h = canvas.height = canvas.offsetHeight * 2;
    ctx.scale(2, 2);
    const cw = w / 2, ch = h / 2;

    // Background
    ctx.fillStyle = artifact.color;
    ctx.fillRect(0, 0, cw, ch);

    // Subtle grid
    ctx.strokeStyle = artifact.accent + "15";
    ctx.lineWidth = 0.5;
    for (let x = 0; x < cw; x += 20) { ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, ch); ctx.stroke(); }
    for (let y = 0; y < ch; y += 20) { ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(cw, y); ctx.stroke(); }

    // Type-specific decorations
    if (artifact.type === "explanation") {
      // Fake slider
      const sy = ch * 0.65;
      ctx.fillStyle = artifact.accent + "30";
      ctx.fillRect(cw * 0.15, sy, cw * 0.7, 4);
      ctx.fillStyle = artifact.accent;
      ctx.beginPath();
      ctx.arc(cw * 0.15 + cw * 0.7 * 0.6, sy + 2, 8, 0, Math.PI * 2);
      ctx.fill();
      // Fake chart
      ctx.strokeStyle = artifact.accent;
      ctx.lineWidth = 2;
      ctx.beginPath();
      const pts = Array.from({length: 20}, (_, i) => ({
        x: cw * 0.15 + (cw * 0.7 / 19) * i,
        y: ch * 0.2 + Math.sin(i * 0.5) * ch * 0.15 + Math.random() * 10
      }));
      pts.forEach((p, i) => i === 0 ? ctx.moveTo(p.x, p.y) : ctx.lineTo(p.x, p.y));
      ctx.stroke();
      // Area fill
      ctx.lineTo(pts[pts.length-1].x, ch * 0.55);
      ctx.lineTo(pts[0].x, ch * 0.55);
      ctx.closePath();
      ctx.fillStyle = artifact.accent + "15";
      ctx.fill();
    } else if (artifact.type === "tool") {
      // Fake UI elements
      ctx.fillStyle = artifact.accent + "20";
      ctx.fillRect(cw * 0.08, ch * 0.12, cw * 0.84, ch * 0.14);
      ctx.strokeStyle = artifact.accent + "40";
      ctx.lineWidth = 1;
      ctx.strokeRect(cw * 0.08, ch * 0.12, cw * 0.84, ch * 0.14);
      // Fake button
      ctx.fillStyle = artifact.accent;
      const bw = 80, bh = 28, bx = cw * 0.5 - bw/2, by = ch * 0.75;
      ctx.beginPath();
      ctx.roundRect(bx, by, bw, bh, 6);
      ctx.fill();
      ctx.fillStyle = "#fff";
      ctx.font = "11px system-ui";
      ctx.textAlign = "center";
      ctx.fillText("Run", cw * 0.5, by + 18);
      // Fake code lines
      for (let i = 0; i < 5; i++) {
        ctx.fillStyle = artifact.accent + "25";
        const lw = 40 + Math.random() * (cw * 0.5);
        ctx.fillRect(cw * 0.15, ch * 0.38 + i * 18, lw, 8);
      }
    } else {
      // Creative: generative dots
      for (let i = 0; i < 60; i++) {
        const x = Math.random() * cw;
        const y = Math.random() * ch;
        const r = 1 + Math.random() * 6;
        ctx.fillStyle = artifact.accent + Math.floor(20 + Math.random() * 40).toString(16);
        ctx.beginPath();
        ctx.arc(x, y, r, 0, Math.PI * 2);
        ctx.fill();
      }
      // Connected lines
      ctx.strokeStyle = artifact.accent + "20";
      ctx.lineWidth = 0.5;
      for (let i = 0; i < 15; i++) {
        ctx.beginPath();
        ctx.moveTo(Math.random() * cw, Math.random() * ch);
        ctx.lineTo(Math.random() * cw, Math.random() * ch);
        ctx.stroke();
      }
    }

    // Title overlay for thumbnails
    if (!interactive) {
      ctx.fillStyle = artifact.color + "cc";
      ctx.fillRect(0, ch - 48, cw, 48);
      ctx.fillStyle = "#fff";
      ctx.font = "bold 13px system-ui";
      ctx.textAlign = "left";
      ctx.fillText(artifact.title.length > 35 ? artifact.title.slice(0, 35) + "…" : artifact.title, 12, ch - 20);
    }
  }, [artifact, interactive]);

  return <canvas ref={canvasRef} style={{ width: "100%", height: "100%", display: "block", borderRadius: interactive ? 0 : 8 }} />;
}

// --- Icons ---
const HeartIcon = ({ filled }) => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill={filled ? "currentColor" : "none"} stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
  </svg>
);
const RemixIcon = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/>
    <polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/>
  </svg>
);
const ShareIcon = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/>
  </svg>
);
const BackIcon = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/>
  </svg>
);
const PlusIcon = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
    <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
  </svg>
);
const GridIcon = () => (
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
    <rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/>
    <rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/>
  </svg>
);
const LockIcon = () => (
  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
    <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>
  </svg>
);
const LinkIcon = () => (
  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
    <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
    <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
  </svg>
);

function formatCount(n) {
  if (n >= 1000) return (n / 1000).toFixed(1).replace(/\.0$/, "") + "k";
  return n.toString();
}

// --- Components ---

function Avatar({ user, size = 32 }) {
  const colors = { SW: "#6366f1", MC: "#ec4899", JT: "#f97316", LP: "#14b8a6", OF: "#8b5cf6" };
  return (
    <div style={{
      width: size, height: size, borderRadius: "50%",
      background: colors[USERS[user]?.avatar] || "#888",
      display: "flex", alignItems: "center", justifyContent: "center",
      color: "#fff", fontSize: size * 0.38, fontWeight: 600, flexShrink: 0,
      fontFamily: "'Newsreader', Georgia, serif"
    }}>
      {USERS[user]?.avatar}
    </div>
  );
}

function TagPill({ tag }) {
  return (
    <span style={{
      display: "inline-block", padding: "2px 8px", borderRadius: 4,
      background: "#f0eeeb", color: "#6b6560", fontSize: 11, fontWeight: 500,
      fontFamily: "'IBM Plex Mono', monospace", letterSpacing: "0.02em"
    }}>
      {tag}
    </span>
  );
}

function VisibilityBadge({ visibility }) {
  if (visibility === "public") return null;
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 3,
      padding: "2px 7px", borderRadius: 4,
      background: visibility === "private" ? "#fef3c7" : "#e0f2fe",
      color: visibility === "private" ? "#92400e" : "#0369a1",
      fontSize: 11, fontWeight: 600
    }}>
      {visibility === "private" ? <LockIcon /> : <LinkIcon />}
      {visibility}
    </span>
  );
}

// --- Feed Item ---
function FeedItem({ artifact, onOpen, onProfile }) {
  const user = USERS[artifact.user];
  const remixSource = artifact.remixOf ? ARTIFACTS.find(a => a.id === artifact.remixOf) : null;
  const [liked, setLiked] = useState(false);

  return (
    <div style={{
      background: "#fff", borderRadius: 12, overflow: "hidden",
      border: "1px solid #e8e5e0", transition: "box-shadow 0.2s",
      cursor: "pointer"
    }}
    onMouseEnter={e => e.currentTarget.style.boxShadow = "0 4px 24px rgba(0,0,0,0.06)"}
    onMouseLeave={e => e.currentTarget.style.boxShadow = "none"}
    >
      {remixSource && (
        <div style={{ padding: "8px 16px", background: "#fafaf7", borderBottom: "1px solid #f0eeeb", display: "flex", alignItems: "center", gap: 6, fontSize: 12, color: "#8b8580" }}>
          <RemixIcon /> remixed from <span style={{ fontWeight: 600, color: "#5a5550" }} onClick={e => { e.stopPropagation(); onProfile(ARTIFACTS.find(a => a.id === artifact.remixOf)?.user); }}>@{remixSource.user}</span>/{remixSource.title.toLowerCase().replace(/\s+/g, "-").slice(0, 30)}
        </div>
      )}

      {/* Artifact preview */}
      <div onClick={() => onOpen(artifact)} style={{ aspectRatio: "16/9", position: "relative", overflow: "hidden" }}>
        <FakeArtifact artifact={artifact} />
      </div>

      {/* Meta */}
      <div style={{ padding: "12px 16px 14px" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 6 }}>
          <div onClick={e => { e.stopPropagation(); onProfile(artifact.user); }} style={{ cursor: "pointer", display: "flex", alignItems: "center", gap: 8 }}>
            <Avatar user={artifact.user} size={24} />
            <span style={{ fontSize: 13, fontWeight: 600, color: "#3a3530" }}>{user?.displayName}</span>
          </div>
          <span style={{ fontSize: 12, color: "#b0aaa4" }}>{artifact.timeAgo}</span>
          <VisibilityBadge visibility={artifact.visibility} />
        </div>

        <h3 onClick={() => onOpen(artifact)} style={{
          margin: 0, fontSize: 17, fontWeight: 700, color: "#1a1510",
          fontFamily: "'Newsreader', Georgia, serif", lineHeight: 1.3, cursor: "pointer",
          marginBottom: 4
        }}>
          {artifact.title}
        </h3>

        <p style={{ margin: 0, fontSize: 13, color: "#6b6560", lineHeight: 1.5, marginBottom: 8 }}>
          {artifact.description}
        </p>

        <div style={{ display: "flex", alignItems: "center", gap: 6, flexWrap: "wrap", marginBottom: 10 }}>
          {artifact.tags.map(t => <TagPill key={t} tag={t} />)}
        </div>

        <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
          <button
            onClick={e => { e.stopPropagation(); setLiked(!liked); }}
            style={{
              display: "flex", alignItems: "center", gap: 5, background: "none",
              border: "none", cursor: "pointer", color: liked ? "#e05545" : "#8b8580",
              fontSize: 13, padding: 0, fontWeight: liked ? 600 : 400,
              transition: "color 0.15s"
            }}
          >
            <HeartIcon filled={liked} /> {formatCount(artifact.likes + (liked ? 1 : 0))}
          </button>
          <button style={{
            display: "flex", alignItems: "center", gap: 5, background: "none",
            border: "none", cursor: "pointer", color: "#8b8580", fontSize: 13, padding: 0
          }}>
            <RemixIcon /> {formatCount(artifact.remixes)}
          </button>
          <button style={{
            display: "flex", alignItems: "center", gap: 5, background: "none",
            border: "none", cursor: "pointer", color: "#8b8580", fontSize: 13, padding: 0, marginLeft: "auto"
          }}>
            <ShareIcon />
          </button>
        </div>
      </div>
    </div>
  );
}

// --- Feed View ---
function FeedView({ onOpen, onProfile }) {
  const [tab, setTab] = useState("explore");
  const publicArtifacts = ARTIFACTS.filter(a => a.visibility === "public");

  return (
    <div style={{ maxWidth: 580, margin: "0 auto", padding: "0 16px" }}>
      {/* Tabs */}
      <div style={{ display: "flex", gap: 0, borderBottom: "1px solid #e8e5e0", marginBottom: 20 }}>
        {["explore", "following"].map(t => (
          <button key={t} onClick={() => setTab(t)} style={{
            padding: "12px 20px", background: "none", border: "none", cursor: "pointer",
            fontSize: 14, fontWeight: 600, color: tab === t ? "#1a1510" : "#b0aaa4",
            borderBottom: tab === t ? "2px solid #1a1510" : "2px solid transparent",
            textTransform: "capitalize", transition: "all 0.15s",
            fontFamily: "'IBM Plex Mono', monospace", letterSpacing: "0.02em"
          }}>
            {t}
          </button>
        ))}
      </div>

      {tab === "explore" ? (
        <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
          {publicArtifacts.map(a => (
            <FeedItem key={a.id} artifact={a} onOpen={onOpen} onProfile={onProfile} />
          ))}
        </div>
      ) : (
        <div style={{ textAlign: "center", padding: "60px 20px", color: "#b0aaa4", fontSize: 14 }}>
          <p style={{ margin: 0, marginBottom: 8, fontSize: 16, fontWeight: 600, color: "#6b6560" }}>Your feed is empty</p>
          <p style={{ margin: 0 }}>Follow some makers to see their artifacts here.</p>
        </div>
      )}
    </div>
  );
}

// --- Artifact View (Full Screen) ---
function ArtifactView({ artifact, onBack, onProfile }) {
  const user = USERS[artifact.user];
  const [liked, setLiked] = useState(false);
  const remixSource = artifact.remixOf ? ARTIFACTS.find(a => a.id === artifact.remixOf) : null;
  const remixes = ARTIFACTS.filter(a => a.remixOf === artifact.id);

  return (
    <div style={{ minHeight: "100vh", background: "#fafaf7" }}>
      {/* Top bar */}
      <div style={{
        position: "sticky", top: 0, zIndex: 10, background: "#fffffe",
        borderBottom: "1px solid #e8e5e0", padding: "8px 16px",
        display: "flex", alignItems: "center", gap: 12
      }}>
        <button onClick={onBack} style={{
          background: "none", border: "none", cursor: "pointer", padding: 4,
          display: "flex", color: "#5a5550"
        }}>
          <BackIcon />
        </button>
        <div onClick={() => onProfile(artifact.user)} style={{ display: "flex", alignItems: "center", gap: 8, cursor: "pointer", flex: 1, minWidth: 0 }}>
          <Avatar user={artifact.user} size={28} />
          <span style={{ fontSize: 13, fontWeight: 600, color: "#3a3530", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{user?.displayName}</span>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <button onClick={() => setLiked(!liked)} style={{
            display: "flex", alignItems: "center", gap: 4, padding: "6px 12px",
            borderRadius: 8, background: liked ? "#fef2f2" : "#f5f3f0", border: "none",
            cursor: "pointer", color: liked ? "#e05545" : "#5a5550", fontSize: 13, fontWeight: 600,
            transition: "all 0.15s"
          }}>
            <HeartIcon filled={liked} /> {formatCount(artifact.likes + (liked ? 1 : 0))}
          </button>
          <button style={{
            display: "flex", alignItems: "center", gap: 4, padding: "6px 12px",
            borderRadius: 8, background: "#f5f3f0", border: "none",
            cursor: "pointer", color: "#5a5550", fontSize: 13, fontWeight: 600
          }}>
            <RemixIcon /> Remix
          </button>
          <button style={{
            display: "flex", alignItems: "center", padding: "6px 10px",
            borderRadius: 8, background: "#f5f3f0", border: "none",
            cursor: "pointer", color: "#5a5550"
          }}>
            <ShareIcon />
          </button>
        </div>
      </div>

      {/* Artifact iframe area */}
      <div style={{
        width: "100%", height: "75vh", background: artifact.color,
        position: "relative", overflow: "hidden"
      }}>
        <FakeArtifact artifact={artifact} interactive />
        <div style={{
          position: "absolute", bottom: 16, right: 16, background: "rgba(0,0,0,0.5)",
          color: "#fff", fontSize: 11, padding: "4px 10px", borderRadius: 6,
          backdropFilter: "blur(8px)", fontFamily: "'IBM Plex Mono', monospace"
        }}>
          Interactive artifact preview
        </div>
      </div>

      {/* Details below the fold */}
      <div style={{ maxWidth: 640, margin: "0 auto", padding: "32px 20px" }}>
        {remixSource && (
          <div style={{
            display: "inline-flex", alignItems: "center", gap: 6,
            padding: "4px 10px", borderRadius: 6, background: "#f0eeeb",
            fontSize: 12, color: "#6b6560", marginBottom: 12
          }}>
            <RemixIcon /> Remixed from <span style={{ fontWeight: 600 }}>@{remixSource.user}/{remixSource.title.slice(0, 25)}</span>
          </div>
        )}

        <h1 style={{
          margin: 0, fontSize: 28, fontWeight: 700, color: "#1a1510",
          fontFamily: "'Newsreader', Georgia, serif", lineHeight: 1.25, marginBottom: 8
        }}>
          {artifact.title}
        </h1>

        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 16 }}>
          <div onClick={() => onProfile(artifact.user)} style={{ display: "flex", alignItems: "center", gap: 8, cursor: "pointer" }}>
            <Avatar user={artifact.user} size={32} />
            <div>
              <div style={{ fontSize: 14, fontWeight: 600, color: "#3a3530" }}>{user?.displayName}</div>
              <div style={{ fontSize: 12, color: "#8b8580" }}>@{artifact.user}</div>
            </div>
          </div>
          <span style={{ fontSize: 12, color: "#b0aaa4", marginLeft: 8 }}>{artifact.timeAgo} ago</span>
        </div>

        <p style={{
          fontSize: 16, lineHeight: 1.65, color: "#3a3530", margin: "0 0 20px",
          fontFamily: "'Newsreader', Georgia, serif"
        }}>
          {artifact.description}
        </p>

        <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginBottom: 16 }}>
          {artifact.tags.map(t => <TagPill key={t} tag={t} />)}
        </div>

        {/* URL */}
        <div style={{
          padding: "8px 12px", borderRadius: 6, background: "#f5f3f0",
          fontFamily: "'IBM Plex Mono', monospace", fontSize: 12, color: "#8b8580",
          marginBottom: 32, display: "flex", alignItems: "center", justifyContent: "space-between"
        }}>
          <span>
            <span style={{ color: "#b0aaa4" }}>artifact.land/</span>
            <span style={{ color: "#5a5550" }}>@{artifact.user}</span>
            <span style={{ color: "#b0aaa4" }}>/</span>
            <span style={{ color: "#5a5550" }}>{artifact.title.toLowerCase().replace(/[^a-z0-9]+/g, "-").slice(0, 30)}</span>
          </span>
          <button style={{
            background: "none", border: "none", cursor: "pointer", color: "#8b8580",
            fontSize: 11, fontWeight: 600, padding: "2px 6px", borderRadius: 4,
          }}
          onClick={() => {}}
          >
            Copy
          </button>
        </div>

        {/* Remixes section */}
        {remixes.length > 0 && (
          <div style={{ borderTop: "1px solid #e8e5e0", paddingTop: 24 }}>
            <h3 style={{ margin: "0 0 16px", fontSize: 15, fontWeight: 600, color: "#5a5550", fontFamily: "'IBM Plex Mono', monospace" }}>
              {remixes.length} {remixes.length === 1 ? "remix" : "remixes"}
            </h3>
            {remixes.map(r => (
              <div key={r.id} onClick={() => onOpen(r)} style={{
                display: "flex", alignItems: "center", gap: 12, padding: "10px 0",
                borderBottom: "1px solid #f0eeeb", cursor: "pointer"
              }}>
                <div style={{ width: 48, height: 36, borderRadius: 4, overflow: "hidden", flexShrink: 0 }}>
                  <FakeArtifact artifact={r} />
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 14, fontWeight: 600, color: "#3a3530", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{r.title}</div>
                  <div style={{ fontSize: 12, color: "#8b8580" }}>by @{r.user} · {r.timeAgo} ago</div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

// --- Profile View ---
function ProfileView({ username, onOpen, onBack }) {
  const user = USERS[username];
  const userArtifacts = ARTIFACTS.filter(a => a.user === username);
  const [following, setFollowing] = useState(false);

  if (!user) return null;

  return (
    <div style={{ minHeight: "100vh", background: "#fafaf7" }}>
      {/* Header */}
      <div style={{ background: "#fffffe", borderBottom: "1px solid #e8e5e0" }}>
        <div style={{ maxWidth: 640, margin: "0 auto", padding: "16px 20px" }}>
          <button onClick={onBack} style={{
            background: "none", border: "none", cursor: "pointer", padding: 0, marginBottom: 16,
            display: "flex", color: "#5a5550"
          }}>
            <BackIcon />
          </button>

          <div style={{ display: "flex", alignItems: "flex-start", gap: 16 }}>
            <Avatar user={username} size={56} />
            <div style={{ flex: 1 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 4 }}>
                <h2 style={{ margin: 0, fontSize: 22, fontWeight: 700, fontFamily: "'Newsreader', Georgia, serif", color: "#1a1510" }}>{user.displayName}</h2>
                <button onClick={() => setFollowing(!following)} style={{
                  padding: "5px 16px", borderRadius: 8, fontSize: 13, fontWeight: 600, cursor: "pointer",
                  background: following ? "#f5f3f0" : "#1a1510", color: following ? "#5a5550" : "#fff",
                  border: following ? "1px solid #e8e5e0" : "none", transition: "all 0.15s"
                }}>
                  {following ? "Following" : "Follow"}
                </button>
              </div>
              <div style={{ fontSize: 13, color: "#8b8580", marginBottom: 8, fontFamily: "'IBM Plex Mono', monospace" }}>artifact.land/@{username}</div>
              <p style={{ margin: "0 0 10px", fontSize: 14, lineHeight: 1.5, color: "#3a3530" }}>{user.bio}</p>
              <div style={{ display: "flex", gap: 16, fontSize: 13, color: "#8b8580" }}>
                <span><strong style={{ color: "#3a3530" }}>{userArtifacts.length}</strong> artifacts</span>
                <span><strong style={{ color: "#3a3530" }}>{formatCount(user.followers)}</strong> followers</span>
                <span><strong style={{ color: "#3a3530" }}>{user.following}</strong> following</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Artifact grid */}
      <div style={{ maxWidth: 640, margin: "0 auto", padding: "24px 20px" }}>
        <div style={{
          display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))", gap: 12
        }}>
          {userArtifacts.map(a => (
            <div key={a.id} onClick={() => onOpen(a)} style={{
              borderRadius: 10, overflow: "hidden", cursor: "pointer",
              border: "1px solid #e8e5e0", background: "#fff",
              transition: "box-shadow 0.2s"
            }}
            onMouseEnter={e => e.currentTarget.style.boxShadow = "0 4px 16px rgba(0,0,0,0.08)"}
            onMouseLeave={e => e.currentTarget.style.boxShadow = "none"}
            >
              <div style={{ aspectRatio: "4/3", position: "relative" }}>
                <FakeArtifact artifact={a} />
                {a.visibility !== "public" && (
                  <div style={{
                    position: "absolute", top: 8, right: 8,
                    background: "rgba(0,0,0,0.5)", backdropFilter: "blur(4px)",
                    borderRadius: 4, padding: "2px 6px", display: "flex", alignItems: "center", gap: 3,
                    color: "#fff", fontSize: 10, fontWeight: 600
                  }}>
                    {a.visibility === "private" ? <LockIcon /> : <LinkIcon />} {a.visibility}
                  </div>
                )}
              </div>
              <div style={{ padding: "8px 10px" }}>
                <div style={{ fontSize: 13, fontWeight: 600, color: "#1a1510", lineHeight: 1.3, marginBottom: 4,
                  overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{a.title}</div>
                <div style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 11, color: "#8b8580" }}>
                  <span style={{ display: "flex", alignItems: "center", gap: 3 }}><HeartIcon filled={false} /> {formatCount(a.likes)}</span>
                  <span style={{ display: "flex", alignItems: "center", gap: 3 }}><RemixIcon /> {a.remixes}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// --- Publish View ---
function PublishView({ onBack }) {
  const [file, setFile] = useState(null);
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [visibility, setVisibility] = useState("public");
  const [tags, setTags] = useState("");
  const [dragOver, setDragOver] = useState(false);

  return (
    <div style={{ minHeight: "100vh", background: "#fafaf7" }}>
      <div style={{ maxWidth: 560, margin: "0 auto", padding: "16px 20px" }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 32 }}>
          <button onClick={onBack} style={{ background: "none", border: "none", cursor: "pointer", display: "flex", color: "#5a5550", padding: 0 }}>
            <BackIcon />
          </button>
          <h2 style={{ margin: 0, fontSize: 18, fontWeight: 700, fontFamily: "'Newsreader', Georgia, serif", color: "#1a1510" }}>New artifact</h2>
          <div style={{ width: 24 }} />
        </div>

        {/* Drop zone */}
        <div
          onDragOver={e => { e.preventDefault(); setDragOver(true); }}
          onDragLeave={() => setDragOver(false)}
          onDrop={e => { e.preventDefault(); setDragOver(false); setFile(e.dataTransfer?.files?.[0]?.name || "artifact.jsx"); }}
          onClick={() => setFile(file ? null : "my-artifact.jsx")}
          style={{
            border: `2px dashed ${dragOver ? "#1a1510" : file ? "#14b8a6" : "#d0ccc6"}`,
            borderRadius: 12, padding: file ? "20px" : "48px 20px",
            textAlign: "center", cursor: "pointer", marginBottom: 24,
            background: dragOver ? "#f5f3f0" : file ? "#f0fdf4" : "#fffffe",
            transition: "all 0.2s"
          }}
        >
          {file ? (
            <div>
              <div style={{ fontSize: 14, fontWeight: 600, color: "#1a1510", marginBottom: 4 }}>{file}</div>
              <div style={{ fontSize: 12, color: "#14b8a6" }}>File ready. Click to change.</div>
              {/* Fake preview */}
              <div style={{ marginTop: 16, borderRadius: 8, overflow: "hidden", aspectRatio: "16/9", background: "#1a1a2e", border: "1px solid #e8e5e0" }}>
                <FakeArtifact artifact={ARTIFACTS[0]} interactive />
              </div>
            </div>
          ) : (
            <div>
              <div style={{ fontSize: 32, marginBottom: 8 }}>&#8593;</div>
              <div style={{ fontSize: 15, fontWeight: 600, color: "#3a3530", marginBottom: 4 }}>Drop your HTML or JSX file here</div>
              <div style={{ fontSize: 13, color: "#8b8580" }}>or click to browse &middot; max 5MB &middot; self-contained single file</div>
            </div>
          )}
        </div>

        {/* Title */}
        <input
          type="text" value={title} onChange={e => setTitle(e.target.value)}
          placeholder="Title"
          style={{
            width: "100%", padding: "12px 0", fontSize: 22, fontWeight: 700,
            fontFamily: "'Newsreader', Georgia, serif", border: "none", borderBottom: "1px solid #e8e5e0",
            background: "transparent", color: "#1a1510", outline: "none", marginBottom: 16,
            boxSizing: "border-box"
          }}
        />

        {/* Description */}
        <textarea
          value={description} onChange={e => setDescription(e.target.value)}
          placeholder="What does this artifact do? (optional)"
          rows={3}
          style={{
            width: "100%", padding: "12px 0", fontSize: 15, border: "none",
            borderBottom: "1px solid #e8e5e0", background: "transparent", color: "#3a3530",
            outline: "none", resize: "vertical", marginBottom: 16, lineHeight: 1.5,
            fontFamily: "inherit", boxSizing: "border-box"
          }}
        />

        {/* Tags */}
        <input
          type="text" value={tags} onChange={e => setTags(e.target.value)}
          placeholder="Tags (comma separated)"
          style={{
            width: "100%", padding: "10px 0", fontSize: 13, border: "none",
            borderBottom: "1px solid #e8e5e0", background: "transparent", color: "#3a3530",
            outline: "none", marginBottom: 24, fontFamily: "'IBM Plex Mono', monospace",
            boxSizing: "border-box"
          }}
        />

        {/* Visibility */}
        <div style={{ marginBottom: 32 }}>
          <div style={{ fontSize: 13, fontWeight: 600, color: "#5a5550", marginBottom: 10, fontFamily: "'IBM Plex Mono', monospace" }}>Visibility</div>
          <div style={{ display: "flex", gap: 8 }}>
            {[
              { key: "public", label: "Public", desc: "In the feed, discoverable" },
              { key: "unlisted", label: "Unlisted", desc: "Anyone with the link" },
              { key: "private", label: "Private", desc: "Invite only" },
            ].map(v => (
              <button key={v.key} onClick={() => setVisibility(v.key)} style={{
                flex: 1, padding: "10px 12px", borderRadius: 10, cursor: "pointer",
                border: visibility === v.key ? "2px solid #1a1510" : "1px solid #e8e5e0",
                background: visibility === v.key ? "#f5f3f0" : "#fff",
                textAlign: "left", transition: "all 0.15s"
              }}>
                <div style={{ fontSize: 13, fontWeight: 600, color: "#1a1510", marginBottom: 2 }}>{v.label}</div>
                <div style={{ fontSize: 11, color: "#8b8580" }}>{v.desc}</div>
              </button>
            ))}
          </div>
        </div>

        {/* URL preview */}
        {title && (
          <div style={{
            padding: "10px 14px", borderRadius: 8, background: "#f5f3f0",
            marginBottom: 16, fontFamily: "'IBM Plex Mono', monospace", fontSize: 12,
            color: "#8b8580", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap"
          }}>
            <span style={{ color: "#b0aaa4" }}>artifact.land/</span>
            <span style={{ color: "#5a5550" }}>@scott</span>
            <span style={{ color: "#b0aaa4" }}>/</span>
            <span style={{ color: "#5a5550" }}>{title.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "").slice(0, 40)}</span>
          </div>
        )}

        {/* Publish button */}
        <button style={{
          width: "100%", padding: "14px", borderRadius: 10, border: "none",
          background: "#1a1510", color: "#fff", fontSize: 15, fontWeight: 700,
          cursor: "pointer", fontFamily: "'Newsreader', Georgia, serif",
          letterSpacing: "0.01em", transition: "opacity 0.15s"
        }}
        onMouseEnter={e => e.currentTarget.style.opacity = "0.85"}
        onMouseLeave={e => e.currentTarget.style.opacity = "1"}
        >
          Publish
        </button>
      </div>
    </div>
  );
}

// --- Main App ---
export default function App() {
  const [view, setView] = useState("feed");
  const [selectedArtifact, setSelectedArtifact] = useState(null);
  const [selectedProfile, setSelectedProfile] = useState(null);

  const openArtifact = (a) => { setSelectedArtifact(a); setView("artifact"); window.scrollTo(0, 0); };
  const openProfile = (u) => { setSelectedProfile(u); setView("profile"); window.scrollTo(0, 0); };
  const goHome = () => { setView("feed"); window.scrollTo(0, 0); };

  return (
    <div style={{ fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif", background: "#fafaf7", minHeight: "100vh", color: "#1a1510" }}>
      {/* Load fonts */}
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,600;0,6..72,700;1,6..72,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
        * { box-sizing: border-box; }
        body { margin: 0; background: #fafaf7; }
        ::selection { background: #e8e5e0; }
        input::placeholder, textarea::placeholder { color: #c0bbb5; }
      `}</style>

      {/* Nav bar */}
      {view !== "artifact" && (
        <nav style={{
          position: "sticky", top: 0, zIndex: 20,
          background: "#fffffebb", backdropFilter: "blur(16px) saturate(1.5)",
          borderBottom: "1px solid #e8e5e0", padding: "0 20px"
        }}>
          <div style={{ maxWidth: 640, margin: "0 auto", display: "flex", alignItems: "center", justifyContent: "space-between", height: 52 }}>
            <div onClick={goHome} style={{
              cursor: "pointer", display: "flex", alignItems: "center", gap: 7
            }}>
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                <rect x="2" y="2" width="20" height="20" rx="4" fill="#1a1510"/>
                <rect x="6" y="6" width="5" height="5" rx="1" fill="#fafaf7" opacity="0.9"/>
                <rect x="13" y="6" width="5" height="5" rx="1" fill="#fafaf7" opacity="0.5"/>
                <rect x="6" y="13" width="5" height="5" rx="1" fill="#fafaf7" opacity="0.5"/>
                <rect x="13" y="13" width="5" height="5" rx="1" fill="#fafaf7" opacity="0.3"/>
              </svg>
              <span style={{
                fontSize: 16, fontWeight: 700, fontFamily: "'Newsreader', Georgia, serif",
                color: "#1a1510", letterSpacing: "-0.01em"
              }}>
                artifact<span style={{ color: "#b0aaa4", fontWeight: 400 }}>.land</span>
              </span>
            </div>

            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <button onClick={() => { setView("publish"); window.scrollTo(0, 0); }} style={{
                display: "flex", alignItems: "center", gap: 5,
                padding: "7px 14px", borderRadius: 8, border: "none",
                background: "#1a1510", color: "#fff", fontSize: 13, fontWeight: 600,
                cursor: "pointer", transition: "opacity 0.15s"
              }}
              onMouseEnter={e => e.currentTarget.style.opacity = "0.85"}
              onMouseLeave={e => e.currentTarget.style.opacity = "1"}
              >
                <PlusIcon /> New
              </button>
              <button onClick={() => openProfile("scott")} style={{
                background: "none", border: "none", cursor: "pointer", padding: 0
              }}>
                <Avatar user="scott" size={30} />
              </button>
            </div>
          </div>
        </nav>
      )}

      {/* Views */}
      {view === "feed" && <div style={{ paddingTop: 20 }}><FeedView onOpen={openArtifact} onProfile={openProfile} /></div>}
      {view === "artifact" && selectedArtifact && <ArtifactView artifact={selectedArtifact} onBack={goHome} onProfile={openProfile} onOpen={openArtifact} />}
      {view === "profile" && selectedProfile && <ProfileView username={selectedProfile} onOpen={openArtifact} onBack={goHome} />}
      {view === "publish" && <PublishView onBack={goHome} />}
    </div>
  );
}