import { useState, useEffect } from "react";

const DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
const MONTHS = ["January","February","March","April","May","June","July","August","September","October","November","December"];
const CONTENT_TYPES = ["Reel", "Carousel", "Story", "Static Post", "Collab", "Live"];
const STATUS_OPTIONS = ["Idea", "Draft", "In Review", "Scheduled", "Posted"];
const PILLARS = ["Education", "Entertainment", "Promotion", "Community", "Behind the Scenes", "User Generated"];

const TYPE_COLORS = {
  "Reel": "#FF6B6B",
  "Carousel": "#FFD93D",
  "Story": "#6BCB77",
  "Static Post": "#4D96FF",
  "Collab": "#C77DFF",
  "Live": "#FF9F1C",
};

const STATUS_COLORS = {
  "Idea": "#666",
  "Draft": "#FF9F1C",
  "In Review": "#4D96FF",
  "Scheduled": "#C77DFF",
  "Posted": "#6BCB77",
};

const PILLAR_COLORS = {
  "Education": "#4D96FF",
  "Entertainment": "#FF6B6B",
  "Promotion": "#FFD93D",
  "Community": "#6BCB77",
  "Behind the Scenes": "#FF9F1C",
  "User Generated": "#C77DFF",
};

function getToday() {
  return new Date();
}

function getDaysInMonth(year, month) {
  return new Date(year, month + 1, 0).getDate();
}

function getFirstDayOfMonth(year, month) {
  return new Date(year, month, 1).getDay();
}

const initialPosts = [
  {
    id: 1,
    title: "Morning Routine Reel",
    caption: "Start your day right ✨ Here's my 5am morning routine...",
    type: "Reel",
    pillar: "Education",
    status: "Scheduled",
    date: "2026-05-05",
    time: "08:00",
    hashtags: "#morningroutine #wellness #selfcare",
    notes: "Record b-roll of coffee & journal",
    engagementGoal: "500 likes",
  },
  {
    id: 2,
    title: "Product Launch Carousel",
    caption: "Swipe to see what's dropping this week 👀",
    type: "Carousel",
    pillar: "Promotion",
    status: "Draft",
    date: "2026-05-08",
    time: "12:00",
    hashtags: "#newproduct #launch #shopnow",
    notes: "Need final images from designer",
    engagementGoal: "200 saves",
  },
  {
    id: 3,
    title: "Behind the Scenes Story",
    caption: "Ever wonder what goes into making content?",
    type: "Story",
    pillar: "Behind the Scenes",
    status: "Idea",
    date: "2026-05-12",
    time: "18:00",
    hashtags: "#bts #contentcreator",
    notes: "",
    engagementGoal: "100 replies",
  },
];

function PostModal({ post, onClose, onSave, onDelete, mode }) {
  const [form, setForm] = useState(post || {
    title: "", caption: "", type: "Reel", pillar: "Education",
    status: "Idea", date: "", time: "12:00", hashtags: "", notes: "", engagementGoal: ""
  });

  const update = (k, v) => setForm(f => ({ ...f, [k]: v }));

  return (
    <div style={{
      position: "fixed", inset: 0, background: "rgba(0,0,0,0.75)", backdropFilter: "blur(8px)",
      zIndex: 100, display: "flex", alignItems: "center", justifyContent: "center", padding: "20px"
    }}>
      <div style={{
        background: "#0F0F0F", border: "1px solid #2a2a2a", borderRadius: "20px",
        width: "100%", maxWidth: "600px", maxHeight: "90vh", overflowY: "auto",
        boxShadow: "0 0 60px rgba(255,107,107,0.15)"
      }}>
        {/* Modal Header */}
        <div style={{
          padding: "24px 28px 0", display: "flex", justifyContent: "space-between", alignItems: "center",
          borderBottom: "1px solid #1e1e1e", paddingBottom: "18px"
        }}>
          <div style={{ fontFamily: "'Playfair Display', serif", fontSize: "20px", color: "#fff" }}>
            {mode === "new" ? "✦ New Post" : "✦ Edit Post"}
          </div>
          <button onClick={onClose} style={{
            background: "none", border: "none", color: "#666", fontSize: "22px", cursor: "pointer"
          }}>✕</button>
        </div>

        <div style={{ padding: "24px 28px", display: "flex", flexDirection: "column", gap: "18px" }}>
          {/* Title */}
          <div>
            <label style={labelStyle}>Post Title</label>
            <input value={form.title} onChange={e => update("title", e.target.value)}
              placeholder="e.g. Morning Routine Reel"
              style={inputStyle} />
          </div>

          {/* Type + Pillar */}
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "14px" }}>
            <div>
              <label style={labelStyle}>Content Type</label>
              <select value={form.type} onChange={e => update("type", e.target.value)} style={inputStyle}>
                {CONTENT_TYPES.map(t => <option key={t}>{t}</option>)}
              </select>
            </div>
            <div>
              <label style={labelStyle}>Content Pillar</label>
              <select value={form.pillar} onChange={e => update("pillar", e.target.value)} style={inputStyle}>
                {PILLARS.map(p => <option key={p}>{p}</option>)}
              </select>
            </div>
          </div>

          {/* Date + Time + Status */}
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "14px" }}>
            <div>
              <label style={labelStyle}>Date</label>
              <input type="date" value={form.date} onChange={e => update("date", e.target.value)} style={inputStyle} />
            </div>
            <div>
              <label style={labelStyle}>Time</label>
              <input type="time" value={form.time} onChange={e => update("time", e.target.value)} style={inputStyle} />
            </div>
            <div>
              <label style={labelStyle}>Status</label>
              <select value={form.status} onChange={e => update("status", e.target.value)} style={inputStyle}>
                {STATUS_OPTIONS.map(s => <option key={s}>{s}</option>)}
              </select>
            </div>
          </div>

          {/* Caption */}
          <div>
            <label style={labelStyle}>Caption</label>
            <textarea value={form.caption} onChange={e => update("caption", e.target.value)}
              placeholder="Write your caption here..."
              rows={4} style={{ ...inputStyle, resize: "vertical", fontFamily: "inherit" }} />
          </div>

          {/* Hashtags */}
          <div>
            <label style={labelStyle}>Hashtags</label>
            <input value={form.hashtags} onChange={e => update("hashtags", e.target.value)}
              placeholder="#content #instagram #creator"
              style={inputStyle} />
          </div>

          {/* Engagement Goal */}
          <div>
            <label style={labelStyle}>Engagement Goal</label>
            <input value={form.engagementGoal} onChange={e => update("engagementGoal", e.target.value)}
              placeholder="e.g. 500 likes, 200 saves"
              style={inputStyle} />
          </div>

          {/* Notes */}
          <div>
            <label style={labelStyle}>Notes / To-Do</label>
            <textarea value={form.notes} onChange={e => update("notes", e.target.value)}
              placeholder="Reminders, assets needed, collab details..."
              rows={2} style={{ ...inputStyle, resize: "vertical", fontFamily: "inherit" }} />
          </div>

          {/* Actions */}
          <div style={{ display: "flex", gap: "12px", justifyContent: "flex-end", paddingTop: "8px" }}>
            {mode === "edit" && (
              <button onClick={() => onDelete(post.id)} style={{
                ...btnStyle, background: "transparent", border: "1px solid #FF6B6B", color: "#FF6B6B", marginRight: "auto"
              }}>Delete</button>
            )}
            <button onClick={onClose} style={{ ...btnStyle, background: "transparent", border: "1px solid #333", color: "#999" }}>
              Cancel
            </button>
            <button onClick={() => onSave(form)} style={{
              ...btnStyle,
              background: "linear-gradient(135deg, #FF6B6B, #FF9F1C)",
              color: "#fff", border: "none"
            }}>
              {mode === "new" ? "Add Post" : "Save Changes"}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

const labelStyle = {
  display: "block", marginBottom: "6px", fontSize: "11px", letterSpacing: "0.1em",
  textTransform: "uppercase", color: "#666", fontFamily: "monospace"
};

const inputStyle = {
  width: "100%", background: "#1a1a1a", border: "1px solid #2a2a2a", borderRadius: "10px",
  color: "#fff", padding: "10px 14px", fontSize: "14px", outline: "none",
  boxSizing: "border-box", fontFamily: "inherit",
  transition: "border-color 0.2s"
};

const btnStyle = {
  padding: "10px 22px", borderRadius: "10px", fontSize: "13px",
  cursor: "pointer", fontFamily: "inherit", fontWeight: "600", letterSpacing: "0.03em"
};

function PostCard({ post, onClick }) {
  const typeColor = TYPE_COLORS[post.type] || "#888";
  const statusColor = STATUS_COLORS[post.status] || "#888";

  return (
    <div onClick={() => onClick(post)} style={{
      background: "#111", border: "1px solid #1e1e1e", borderRadius: "14px",
      padding: "16px", cursor: "pointer", transition: "all 0.2s",
      borderLeft: `3px solid ${typeColor}`,
      marginBottom: "10px",
    }}
      onMouseEnter={e => { e.currentTarget.style.borderColor = typeColor; e.currentTarget.style.background = "#161616"; }}
      onMouseLeave={e => { e.currentTarget.style.borderColor = "#1e1e1e"; e.currentTarget.style.borderLeftColor = typeColor; e.currentTarget.style.background = "#111"; }}
    >
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: "8px" }}>
        <div style={{ fontWeight: "600", fontSize: "14px", color: "#f0f0f0", flex: 1, marginRight: "10px" }}>
          {post.title || "Untitled Post"}
        </div>
        <span style={{
          background: statusColor + "22", color: statusColor, fontSize: "10px",
          padding: "2px 8px", borderRadius: "20px", fontWeight: "700",
          letterSpacing: "0.08em", textTransform: "uppercase", whiteSpace: "nowrap"
        }}>{post.status}</span>
      </div>
      <div style={{ display: "flex", gap: "8px", flexWrap: "wrap", marginBottom: "8px" }}>
        <span style={{
          background: typeColor + "22", color: typeColor, fontSize: "10px",
          padding: "2px 8px", borderRadius: "20px", fontWeight: "600"
        }}>{post.type}</span>
        {post.pillar && (
          <span style={{
            background: (PILLAR_COLORS[post.pillar] || "#888") + "18", color: PILLAR_COLORS[post.pillar] || "#888",
            fontSize: "10px", padding: "2px 8px", borderRadius: "20px"
          }}>{post.pillar}</span>
        )}
      </div>
      <div style={{ fontSize: "12px", color: "#555", display: "flex", gap: "12px" }}>
        {post.date && <span>📅 {post.date}</span>}
        {post.time && <span>⏰ {post.time}</span>}
      </div>
      {post.caption && (
        <div style={{ fontSize: "12px", color: "#444", marginTop: "8px", lineHeight: "1.5",
          overflow: "hidden", textOverflow: "ellipsis", display: "-webkit-box",
          WebkitLineClamp: 2, WebkitBoxOrient: "vertical" }}>
          {post.caption}
        </div>
      )}
    </div>
  );
}

export default function InstagramPlanner() {
  const [posts, setPosts] = useState(initialPosts);
  const [view, setView] = useState("calendar"); // "calendar" | "list" | "analytics"
  const [modal, setModal] = useState(null); // null | { mode: "new"|"edit", post }
  const [filterType, setFilterType] = useState("All");
  const [filterStatus, setFilterStatus] = useState("All");
  const [calDate, setCalDate] = useState(getToday());
  const [selectedDay, setSelectedDay] = useState(null);

  const year = calDate.getFullYear();
  const month = calDate.getMonth();
  const daysInMonth = getDaysInMonth(year, month);
  const firstDay = getFirstDayOfMonth(year, month);

  const savePost = (form) => {
    if (modal.mode === "new") {
      setPosts(p => [...p, { ...form, id: Date.now() }]);
    } else {
      setPosts(p => p.map(x => x.id === form.id ? form : x));
    }
    setModal(null);
  };

  const deletePost = (id) => {
    setPosts(p => p.filter(x => x.id !== id));
    setModal(null);
  };

  const openNew = (date = "") => setModal({ mode: "new", post: { date, time: "12:00", type: "Reel", pillar: "Education", status: "Idea", title: "", caption: "", hashtags: "", notes: "", engagementGoal: "" } });
  const openEdit = (post) => setModal({ mode: "edit", post });

  const filteredPosts = posts.filter(p => {
    const typeOk = filterType === "All" || p.type === filterType;
    const statusOk = filterStatus === "All" || p.status === filterStatus;
    return typeOk && statusOk;
  }).sort((a, b) => (a.date + a.time).localeCompare(b.date + b.time));

  const getPostsForDay = (d) => {
    const dateStr = `${year}-${String(month + 1).padStart(2, "0")}-${String(d).padStart(2, "0")}`;
    return posts.filter(p => p.date === dateStr);
  };

  // Analytics
  const totalPosts = posts.length;
  const postedCount = posts.filter(p => p.status === "Posted").length;
  const scheduledCount = posts.filter(p => p.status === "Scheduled").length;
  const typeCounts = CONTENT_TYPES.map(t => ({ type: t, count: posts.filter(p => p.type === t).length }));
  const pillarCounts = PILLARS.map(pi => ({ pillar: pi, count: posts.filter(p => p.pillar === pi).length }));

  return (
    <div style={{
      minHeight: "100vh", background: "#080808", color: "#e0e0e0",
      fontFamily: "'DM Sans', 'Helvetica Neue', sans-serif",
    }}>
      {/* Ambient BG */}
      <div style={{
        position: "fixed", top: "-200px", left: "-200px", width: "600px", height: "600px",
        background: "radial-gradient(circle, rgba(255,107,107,0.06) 0%, transparent 70%)",
        pointerEvents: "none", zIndex: 0
      }} />
      <div style={{
        position: "fixed", bottom: "-200px", right: "-200px", width: "600px", height: "600px",
        background: "radial-gradient(circle, rgba(77,150,255,0.05) 0%, transparent 70%)",
        pointerEvents: "none", zIndex: 0
      }} />

      <div style={{ position: "relative", zIndex: 1, maxWidth: "1100px", margin: "0 auto", padding: "32px 20px" }}>

        {/* Header */}
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: "36px", flexWrap: "wrap", gap: "16px" }}>
          <div>
            <div style={{
              fontFamily: "'Playfair Display', serif", fontSize: "clamp(28px, 5vw, 42px)",
              fontWeight: "700", letterSpacing: "-0.02em",
              background: "linear-gradient(135deg, #fff 40%, #FF6B6B)",
              WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent"
            }}>
              Content Studio
            </div>
            <div style={{ color: "#555", fontSize: "13px", marginTop: "4px", letterSpacing: "0.05em" }}>
              INSTAGRAM PLANNER — {totalPosts} posts planned
            </div>
          </div>
          <button onClick={() => openNew()} style={{
            background: "linear-gradient(135deg, #FF6B6B, #FF9F1C)",
            border: "none", borderRadius: "12px", color: "#fff",
            padding: "12px 24px", fontSize: "14px", fontWeight: "700",
            cursor: "pointer", letterSpacing: "0.03em",
            boxShadow: "0 4px 20px rgba(255,107,107,0.3)"
          }}>+ New Post</button>
        </div>

        {/* Nav Tabs */}
        <div style={{ display: "flex", gap: "6px", marginBottom: "28px", background: "#111", padding: "5px", borderRadius: "12px", width: "fit-content" }}>
          {["calendar", "list", "analytics"].map(v => (
            <button key={v} onClick={() => setView(v)} style={{
              padding: "8px 20px", borderRadius: "9px", border: "none",
              background: view === v ? "#1e1e1e" : "transparent",
              color: view === v ? "#fff" : "#555",
              fontSize: "13px", fontWeight: "600", cursor: "pointer",
              textTransform: "capitalize", letterSpacing: "0.02em",
              boxShadow: view === v ? "0 2px 8px rgba(0,0,0,0.5)" : "none",
              transition: "all 0.2s"
            }}>{v === "analytics" ? "📊 Analytics" : v === "calendar" ? "📅 Calendar" : "📋 List"}</button>
          ))}
        </div>

        {/* CALENDAR VIEW */}
        {view === "calendar" && (
          <div style={{ display: "grid", gridTemplateColumns: "1fr 320px", gap: "24px", alignItems: "start" }}>
            <div>
              {/* Month nav */}
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "20px" }}>
                <button onClick={() => setCalDate(new Date(year, month - 1, 1))} style={navBtn}>←</button>
                <div style={{ fontFamily: "'Playfair Display', serif", fontSize: "22px", color: "#fff" }}>
                  {MONTHS[month]} {year}
                </div>
                <button onClick={() => setCalDate(new Date(year, month + 1, 1))} style={navBtn}>→</button>
              </div>

              {/* Day headers */}
              <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: "4px", marginBottom: "4px" }}>
                {DAYS.map(d => (
                  <div key={d} style={{ textAlign: "center", fontSize: "11px", color: "#444", padding: "6px 0", letterSpacing: "0.08em" }}>{d}</div>
                ))}
              </div>

              {/* Calendar cells */}
              <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: "4px" }}>
                {Array.from({ length: firstDay }).map((_, i) => <div key={`e${i}`} />)}
                {Array.from({ length: daysInMonth }).map((_, i) => {
                  const d = i + 1;
                  const dayPosts = getPostsForDay(d);
                  const isToday = getToday().getDate() === d && getToday().getMonth() === month && getToday().getFullYear() === year;
                  const isSelected = selectedDay === d;
                  return (
                    <div key={d} onClick={() => setSelectedDay(isSelected ? null : d)}
                      style={{
                        minHeight: "70px", background: isSelected ? "#1a1a1a" : "#0e0e0e",
                        border: isToday ? "1px solid #FF6B6B" : "1px solid #1a1a1a",
                        borderRadius: "10px", padding: "6px", cursor: "pointer",
                        transition: "all 0.15s",
                        position: "relative"
                      }}
                      onMouseEnter={e => e.currentTarget.style.background = "#161616"}
                      onMouseLeave={e => e.currentTarget.style.background = isSelected ? "#1a1a1a" : "#0e0e0e"}
                    >
                      <div style={{
                        fontSize: "12px", fontWeight: isToday ? "800" : "500",
                        color: isToday ? "#FF6B6B" : "#555", marginBottom: "4px"
                      }}>{d}</div>
                      {dayPosts.slice(0, 3).map(p => (
                        <div key={p.id} onClick={(e) => { e.stopPropagation(); openEdit(p); }} style={{
                          background: (TYPE_COLORS[p.type] || "#888") + "28",
                          borderLeft: `2px solid ${TYPE_COLORS[p.type] || "#888"}`,
                          borderRadius: "4px", padding: "2px 5px", marginBottom: "2px",
                          fontSize: "10px", color: TYPE_COLORS[p.type] || "#aaa",
                          overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap"
                        }}>{p.title || p.type}</div>
                      ))}
                      {dayPosts.length > 3 && (
                        <div style={{ fontSize: "10px", color: "#444" }}>+{dayPosts.length - 3} more</div>
                      )}
                    </div>
                  );
                })}
              </div>
            </div>

            {/* Day Panel */}
            <div style={{ background: "#0e0e0e", border: "1px solid #1a1a1a", borderRadius: "16px", padding: "20px", minHeight: "400px" }}>
              {selectedDay ? (
                <>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "16px" }}>
                    <div style={{ fontFamily: "'Playfair Display', serif", fontSize: "18px" }}>
                      {MONTHS[month]} {selectedDay}
                    </div>
                    <button onClick={() => openNew(`${year}-${String(month + 1).padStart(2, "0")}-${String(selectedDay).padStart(2, "0")}`)}
                      style={{ background: "#1a1a1a", border: "1px solid #2a2a2a", borderRadius: "8px", color: "#FF6B6B", padding: "6px 14px", fontSize: "12px", cursor: "pointer" }}>
                      + Add
                    </button>
                  </div>
                  {getPostsForDay(selectedDay).length === 0 ? (
                    <div style={{ color: "#333", fontSize: "13px", textAlign: "center", marginTop: "40px" }}>No posts scheduled</div>
                  ) : (
                    getPostsForDay(selectedDay).map(p => <PostCard key={p.id} post={p} onClick={openEdit} />)
                  )}
                </>
              ) : (
                <div style={{ color: "#333", fontSize: "13px", textAlign: "center", marginTop: "60px" }}>
                  Select a day to view<br />or add posts
                </div>
              )}
            </div>
          </div>
        )}

        {/* LIST VIEW */}
        {view === "list" && (
          <div>
            {/* Filters */}
            <div style={{ display: "flex", gap: "12px", marginBottom: "24px", flexWrap: "wrap" }}>
              <div>
                <label style={{ ...labelStyle, color: "#444" }}>Type</label>
                <select value={filterType} onChange={e => setFilterType(e.target.value)} style={{ ...inputStyle, width: "auto", padding: "8px 12px" }}>
                  <option>All</option>
                  {CONTENT_TYPES.map(t => <option key={t}>{t}</option>)}
                </select>
              </div>
              <div>
                <label style={{ ...labelStyle, color: "#444" }}>Status</label>
                <select value={filterStatus} onChange={e => setFilterStatus(e.target.value)} style={{ ...inputStyle, width: "auto", padding: "8px 12px" }}>
                  <option>All</option>
                  {STATUS_OPTIONS.map(s => <option key={s}>{s}</option>)}
                </select>
              </div>
              <div style={{ marginLeft: "auto", display: "flex", alignItems: "flex-end" }}>
                <span style={{ color: "#444", fontSize: "13px" }}>{filteredPosts.length} post{filteredPosts.length !== 1 ? "s" : ""}</span>
              </div>
            </div>

            {filteredPosts.length === 0 ? (
              <div style={{ textAlign: "center", color: "#333", padding: "80px 0" }}>
                <div style={{ fontSize: "40px", marginBottom: "16px" }}>✦</div>
                No posts found
              </div>
            ) : (
              <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))", gap: "10px" }}>
                {filteredPosts.map(p => <PostCard key={p.id} post={p} onClick={openEdit} />)}
              </div>
            )}
          </div>
        )}

        {/* ANALYTICS VIEW */}
        {view === "analytics" && (
          <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
            {/* KPI Row */}
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(160px, 1fr))", gap: "14px" }}>
              {[
                { label: "Total Posts", value: totalPosts, color: "#fff" },
                { label: "Posted", value: postedCount, color: "#6BCB77" },
                { label: "Scheduled", value: scheduledCount, color: "#C77DFF" },
                { label: "In Draft", value: posts.filter(p => p.status === "Draft").length, color: "#FF9F1C" },
              ].map(k => (
                <div key={k.label} style={{
                  background: "#0e0e0e", border: "1px solid #1a1a1a", borderRadius: "14px",
                  padding: "20px", textAlign: "center"
                }}>
                  <div style={{ fontSize: "36px", fontFamily: "'Playfair Display', serif", color: k.color, fontWeight: "700" }}>{k.value}</div>
                  <div style={{ fontSize: "11px", color: "#444", marginTop: "4px", textTransform: "uppercase", letterSpacing: "0.1em" }}>{k.label}</div>
                </div>
              ))}
            </div>

            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "20px" }}>
              {/* Content Types */}
              <div style={{ background: "#0e0e0e", border: "1px solid #1a1a1a", borderRadius: "16px", padding: "24px" }}>
                <div style={{ fontFamily: "'Playfair Display', serif", fontSize: "16px", marginBottom: "20px" }}>Content Mix</div>
                {typeCounts.map(({ type, count }) => (
                  <div key={type} style={{ marginBottom: "12px" }}>
                    <div style={{ display: "flex", justifyContent: "space-between", marginBottom: "5px" }}>
                      <span style={{ fontSize: "12px", color: TYPE_COLORS[type] }}>{type}</span>
                      <span style={{ fontSize: "12px", color: "#555" }}>{count}</span>
                    </div>
                    <div style={{ background: "#1a1a1a", borderRadius: "4px", height: "6px", overflow: "hidden" }}>
                      <div style={{
                        width: totalPosts > 0 ? `${(count / totalPosts) * 100}%` : "0%",
                        height: "100%", background: TYPE_COLORS[type], borderRadius: "4px",
                        transition: "width 0.6s"
                      }} />
                    </div>
                  </div>
                ))}
              </div>

              {/* Content Pillars */}
              <div style={{ background: "#0e0e0e", border: "1px solid #1a1a1a", borderRadius: "16px", padding: "24px" }}>
                <div style={{ fontFamily: "'Playfair Display', serif", fontSize: "16px", marginBottom: "20px" }}>Content Pillars</div>
                {pillarCounts.map(({ pillar, count }) => (
                  <div key={pillar} style={{ marginBottom: "12px" }}>
                    <div style={{ display: "flex", justifyContent: "space-between", marginBottom: "5px" }}>
                      <span style={{ fontSize: "12px", color: PILLAR_COLORS[pillar] || "#888" }}>{pillar}</span>
                      <span style={{ fontSize: "12px", color: "#555" }}>{count}</span>
                    </div>
                    <div style={{ background: "#1a1a1a", borderRadius: "4px", height: "6px", overflow: "hidden" }}>
                      <div style={{
                        width: totalPosts > 0 ? `${(count / totalPosts) * 100}%` : "0%",
                        height: "100%", background: PILLAR_COLORS[pillar] || "#888", borderRadius: "4px",
                        transition: "width 0.6s"
                      }} />
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Upcoming */}
            <div style={{ background: "#0e0e0e", border: "1px solid #1a1a1a", borderRadius: "16px", padding: "24px" }}>
              <div style={{ fontFamily: "'Playfair Display', serif", fontSize: "16px", marginBottom: "20px" }}>All Posts Timeline</div>
              {posts.sort((a, b) => (a.date + a.time).localeCompare(b.date + b.time)).map(p => (
                <div key={p.id} onClick={() => openEdit(p)} style={{
                  display: "flex", alignItems: "center", gap: "16px", padding: "12px 0",
                  borderBottom: "1px solid #111", cursor: "pointer"
                }}>
                  <div style={{
                    width: "8px", height: "8px", borderRadius: "50%", flexShrink: 0,
                    background: TYPE_COLORS[p.type] || "#888"
                  }} />
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: "13px", fontWeight: "600", color: "#ddd" }}>{p.title || "Untitled"}</div>
                    <div style={{ fontSize: "11px", color: "#444" }}>{p.date} • {p.time}</div>
                  </div>
                  <span style={{
                    fontSize: "10px", padding: "2px 8px", borderRadius: "20px",
                    background: (STATUS_COLORS[p.status] || "#888") + "22",
                    color: STATUS_COLORS[p.status] || "#888",
                    textTransform: "uppercase", letterSpacing: "0.08em", fontWeight: "700"
                  }}>{p.status}</span>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>

      {/* Modal */}
      {modal && (
        <PostModal
          post={modal.post}
          mode={modal.mode}
          onClose={() => setModal(null)}
          onSave={savePost}
          onDelete={deletePost}
        />
      )}

      {/* Google Fonts */}
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=DM+Sans:wght@400;500;600;700&display=swap');
        * { box-sizing: border-box; }
        select option { background: #1a1a1a; }
        ::-webkit-scrollbar { width: 6px; } 
        ::-webkit-scrollbar-track { background: #0a0a0a; }
        ::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 3px; }
        input[type="date"]::-webkit-calendar-picker-indicator,
        input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(0.4); }
      `}</style>
    </div>
  );
}

const navBtn = {
  background: "#111", border: "1px solid #1e1e1e", borderRadius: "8px",
  color: "#888", padding: "8px 14px", cursor: "pointer", fontSize: "16px"
};