/**
 * ┌──────────────────────────────────────────────────────────────────┐
 * │  EXAMPLE / PLACEHOLDER DASHBOARD WIDGETS — SAFE TO DELETE          │
 * └──────────────────────────────────────────────────────────────────┘
 *
 * Everything in this file is demo content to show what a Bloby workspace
 * can look like. NONE of it is connected to real data.
 *
 * To start fresh with the user's real widgets:
 *   1. Delete this entire file (deleteme_placeholders.tsx).
 *   2. In DashboardPage.tsx, remove the `PlaceholderWidgets` import and the
 *      <PlaceholderWidgets /> usage.
 * The dashboard will then be empty — ready for real apps/widgets.
 *
 * It is intentionally fully self-contained (own data, icons, styles, and the
 * dismissible "these are examples" banner) so removal is a one-file delete.
 */
import { useState } from 'react';
import { Search, TrendingUp, Sparkles, X as XIcon } from 'lucide-react';
import { AreaChart, Area, BarChart, Bar, ResponsiveContainer } from 'recharts';

const DISMISS_KEY = 'bloby_example_widgets_dismissed';

const CARD = 'relative rounded-xl overflow-hidden';
const BORDER = 'absolute inset-0 rounded-xl bg-gradient-to-b from-white/[0.08] via-white/[0.02] to-transparent pointer-events-none';
const INNER = 'relative rounded-xl bg-[#141414] m-px p-3.5 h-full';

const rev = [{ v: 82 }, { v: 89 }, { v: 94 }, { v: 101 }, { v: 108 }, { v: 112 }, { v: 125 }];
const fol = [{ v: 12 }, { v: 18 }, { v: 9 }, { v: 24 }, { v: 31 }, { v: 19 }, { v: 27 }];

function StripeSvg() {
  return <svg className="h-3.5 w-3.5 text-[#635BFF]" viewBox="0 0 24 24" fill="currentColor"><path d="M13.976 9.15c-2.172-.806-3.356-1.426-3.356-2.409 0-.831.683-1.305 1.901-1.305 2.227 0 4.515.858 6.09 1.631l.89-5.494C18.252.975 15.697 0 12.165 0 9.667 0 7.589.654 6.104 1.872 4.56 3.147 3.757 4.992 3.757 7.218c0 4.039 2.467 5.76 6.476 7.219 2.585.92 3.445 1.574 3.445 2.583 0 .98-.84 1.545-2.354 1.545-1.875 0-4.965-.921-6.99-2.109l-.9 5.555C5.175 22.99 8.385 24 11.714 24c2.641 0 4.843-.624 6.328-1.813 1.664-1.305 2.525-3.236 2.525-5.732 0-4.128-2.524-5.851-6.591-7.305z" /></svg>;
}
function GmailSvg() {
  return <svg className="h-3.5 w-3.5 text-[#EA4335]" viewBox="0 0 24 24" fill="currentColor"><path d="M24 5.457v13.909c0 .904-.732 1.636-1.636 1.636h-3.819V11.73L12 16.64l-6.545-4.91v9.273H1.636A1.636 1.636 0 0 1 0 19.366V5.457c0-2.023 2.309-3.178 3.927-1.964L5.455 4.64 12 9.548l6.545-4.91 1.528-1.145C21.69 2.28 24 3.434 24 5.457z" /></svg>;
}
function XSvg() {
  return <svg className="h-3.5 w-3.5 text-white" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" /></svg>;
}

/** Small "Example" tag shown on each placeholder card. */
function ExampleBadge() {
  return (
    <span className="inline-flex items-center text-[8.5px] font-bold uppercase tracking-wider text-muted-foreground/60 bg-white/[0.05] border border-white/[0.06] px-1.5 py-0.5 rounded">
      Example
    </span>
  );
}

export function PlaceholderWidgets() {
  const [dismissed, setDismissed] = useState(() => {
    try { return localStorage.getItem(DISMISS_KEY) === '1'; } catch { return false; }
  });

  function dismissBanner() {
    setDismissed(true);
    try { localStorage.setItem(DISMISS_KEY, '1'); } catch {}
  }

  return (
    <>
      {/* "These are examples" banner — dismissible, remembers via localStorage */}
      {!dismissed && (
        <div className="relative flex items-start gap-3 mb-4 rounded-xl bg-[#141414] border border-white/[0.07] p-3.5">
          <div
            className="h-7 w-7 rounded-lg flex items-center justify-center shrink-0"
            style={{ background: 'linear-gradient(135deg, #0166FF, #4AEEFF)' }}
          >
            <Sparkles className="h-4 w-4 text-white" />
          </div>
          <div className="flex-1 min-w-0">
            <p className="text-xs font-bold">These are example widgets</p>
            <p className="text-[11px] text-muted-foreground/70 mt-0.5 leading-snug">
              Just a preview of what your workspace can look like — none of it is real data.
              Ask Bloby to replace them with your own apps.
            </p>
          </div>
          <button
            type="button"
            onClick={dismissBanner}
            aria-label="Dismiss"
            className="text-muted-foreground/50 hover:text-foreground transition-colors shrink-0 -mr-1 -mt-1 p-1"
          >
            <XIcon className="h-4 w-4" />
          </button>
        </div>
      )}

      <div className="grid grid-cols-3 gap-2.5">

        {/* Stripe — 2 cols */}
        <div className={`${CARD} col-span-2`}>
          <div className={BORDER} />
          <div className={INNER}>
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-2">
                <div className="h-7 w-7 rounded-lg bg-[#635BFF]/10 flex items-center justify-center"><StripeSvg /></div>
                <span className="text-xs font-bold">Stripe</span>
                <ExampleBadge />
              </div>
              <div className="flex items-center gap-1 text-emerald-500">
                <TrendingUp className="h-3 w-3" />
                <span className="text-[10px] font-bold">+12.5%</span>
              </div>
            </div>
            <p className="text-2xl font-bold tracking-tight mt-2">$12,480</p>
            <p className="text-[10px] text-muted-foreground/50 mb-1">MRR</p>
            <div className="h-12 overflow-hidden">
              <ResponsiveContainer width="100%" height={48}>
                <AreaChart data={rev}>
                  <defs>
                    <linearGradient id="sg" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stopColor="#0166FF" /><stop offset="50%" stopColor="#009AFE" /><stop offset="100%" stopColor="#4AEEFF" /></linearGradient>
                    <linearGradient id="sf" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor="#009AFE" stopOpacity={0.12} /><stop offset="100%" stopColor="#009AFE" stopOpacity={0} /></linearGradient>
                  </defs>
                  <Area type="monotone" dataKey="v" stroke="url(#sg)" strokeWidth={1.5} fill="url(#sf)" />
                </AreaChart>
              </ResponsiveContainer>
            </div>
          </div>
        </div>

        {/* X — 1 col */}
        <div className={`${CARD} col-span-1`}>
          <div className={BORDER} />
          <div className={INNER}>
            <div className="flex items-center gap-2 mb-2">
              <div className="h-7 w-7 rounded-lg bg-white/[0.06] flex items-center justify-center"><XSvg /></div>
              <span className="text-xs font-bold">X</span>
              <ExampleBadge />
            </div>
            <p className="text-2xl font-bold tracking-tight">24.8K</p>
            <div className="flex items-center gap-1 text-emerald-500 mb-1">
              <TrendingUp className="h-2.5 w-2.5" />
              <span className="text-[10px] font-bold">+1.4K</span>
            </div>
            <div className="h-10 overflow-hidden">
              <ResponsiveContainer width="100%" height={40}>
                <BarChart data={fol} barCategoryGap="25%">
                  <defs>
                    <linearGradient id="xg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor="#009AFE" stopOpacity={0.3} /><stop offset="100%" stopColor="#0166FF" stopOpacity={0.05} /></linearGradient>
                  </defs>
                  <Bar dataKey="v" fill="url(#xg)" radius={[2, 2, 0, 0]} />
                </BarChart>
              </ResponsiveContainer>
            </div>
          </div>
        </div>

        {/* Gmail — 1 col */}
        <div className={`${CARD} col-span-1`}>
          <div className={BORDER} />
          <div className={INNER}>
            <div className="flex items-center gap-2 mb-2.5">
              <div className="h-7 w-7 rounded-lg bg-[#EA4335]/10 flex items-center justify-center"><GmailSvg /></div>
              <span className="text-xs font-bold">Gmail</span>
              <ExampleBadge />
              <span className="ml-auto text-[10px] text-muted-foreground/50">3 new</span>
            </div>
            {['Sarah Chen', 'Stripe', 'Alex R.'].map((n) => (
              <div key={n} className="flex items-center gap-2 py-1.5">
                <div className="h-5 w-5 rounded-full bg-white/[0.06] text-[9px] font-bold flex items-center justify-center shrink-0">{n[0]}</div>
                <span className="text-[11px] truncate">{n}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Research — 2 cols */}
        <div className={`${CARD} col-span-2`}>
          <div className={BORDER} />
          <div className={INNER}>
            <div className="flex items-center gap-2 mb-2.5">
              <div className="h-7 w-7 rounded-lg bg-[#9235F9]/10 flex items-center justify-center"><Search className="h-3.5 w-3.5 text-[#9235F9]" /></div>
              <span className="text-xs font-bold">Research</span>
              <ExampleBadge />
              <span className="ml-auto text-[10px] font-bold text-muted-foreground bg-white/[0.06] px-2 py-0.5 rounded-full">3</span>
            </div>
            {[
              { t: 'Competitor pricing', s: 'Done', c: 'text-emerald-500 bg-emerald-500/10' },
              { t: 'Market trends Q1', s: 'Done', c: 'text-emerald-500 bg-emerald-500/10' },
              { t: 'User feedback', s: 'Review', c: 'text-orange-400 bg-orange-400/10' },
            ].map((r) => (
              <div key={r.t} className="flex items-center justify-between py-1.5">
                <span className="text-[11px]">{r.t}</span>
                <span className={`text-[9px] font-bold px-1.5 py-0.5 rounded-full ${r.c}`}>{r.s}</span>
              </div>
            ))}
          </div>
        </div>

      </div>
    </>
  );
}