import { Search, Mail, DollarSign, TrendingUp } from 'lucide-react';
import { AreaChart, Area, BarChart, Bar, ResponsiveContainer } from 'recharts';

const GRADIENT = 'linear-gradient(to right, #0166FF 10%, #009AFE 55%, #4AEEFF 100%)';
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>;
}

export default function DashboardPage() {
  return (
    <div className="flex flex-col h-full px-4 sm:px-6 pt-8 sm:pt-12 pb-6 max-w-4xl mx-auto w-full overflow-y-auto">
      <h1
        className="text-xl sm:text-2xl font-bold mb-1 tracking-tight w-fit"
        style={{ backgroundImage: GRADIENT, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}
      >
        Let's get started
      </h1>
      <p className="text-muted-foreground text-xs mb-6">Your workspace at a glance.</p>

      <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>
              </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>
            </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>
              <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>
              <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>
    </div>
  );
}
