import React, { useMemo, useState } from "react";
import { motion } from "framer-motion";
import {
  BarChart3,
  CalendarDays,
  CreditCard,
  LayoutDashboard,
  Search,
  Settings,
  Users,
  Bell,
  Plus,
  CheckCircle2,
  Clock3,
  FileText,
  ArrowUpRight,
  Sparkles,
  Menu,
} from "lucide-react";
import {
  Bar,
  BarChart,
  CartesianGrid,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts";

const stats = [
  { label: "Active Clients", value: "18", change: "+12%", icon: Users },
  { label: "Scheduled Posts", value: "74", change: "+28%", icon: CalendarDays },
  { label: "Engagement Rate", value: "8.4%", change: "+3.1%", icon: BarChart3 },
  { label: "Plan Usage", value: "68%", change: "Pro Plan", icon: CreditCard },
];

const clients = [
  { name: "BlueView Cafe", status: "Active", campaigns: 6, last: "Today" },
  { name: "Gaty Wear", status: "Active", campaigns: 11, last: "Yesterday" },
  { name: "Shutter Wave", status: "Review", campaigns: 4, last: "2 days ago" },
  { name: "FitCore Meals", status: "Paused", campaigns: 2, last: "Last week" },
];

const posts = [
  { title: "Ramadan offer reel", client: "BlueView Cafe", time: "10:30 AM", status: "Scheduled" },
  { title: "New collection carousel", client: "Gaty Wear", time: "01:00 PM", status: "Draft" },
  { title: "Agency proof post", client: "Shutter Wave", time: "06:45 PM", status: "Published" },
];

const chartData = [
  { day: "Sat", posts: 8, engagement: 32 },
  { day: "Sun", posts: 10, engagement: 44 },
  { day: "Mon", posts: 7, engagement: 39 },
  { day: "Tue", posts: 14, engagement: 58 },
  { day: "Wed", posts: 11, engagement: 51 },
  { day: "Thu", posts: 16, engagement: 68 },
  { day: "Fri", posts: 9, engagement: 42 },
];

const nav = [
  { id: "overview", label: "Overview", icon: LayoutDashboard },
  { id: "clients", label: "Clients", icon: Users },
  { id: "calendar", label: "Calendar", icon: CalendarDays },
  { id: "billing", label: "Billing", icon: CreditCard },
  { id: "settings", label: "Settings", icon: Settings },
];

function Badge({ children, tone = "default" }) {
  const styles = {
    default: "bg-slate-100 text-slate-700",
    green: "bg-emerald-100 text-emerald-700",
    amber: "bg-amber-100 text-amber-700",
    red: "bg-rose-100 text-rose-700",
    blue: "bg-blue-100 text-blue-700",
  };
  return <span className={`rounded-full px-3 py-1 text-xs font-semibold ${styles[tone]}`}>{children}</span>;
}

function Card({ children, className = "" }) {
  return <div className={`rounded-2xl border border-slate-200 bg-white p-5 shadow-sm ${className}`}>{children}</div>;
}

export default function ContentFlowDashboard() {
  const [active, setActive] = useState("overview");
  const [sidebarOpen, setSidebarOpen] = useState(false);

  const activeTitle = useMemo(() => nav.find((item) => item.id === active)?.label || "Overview", [active]);

  const renderMain = () => {
    if (active === "clients") return <ClientsSection />;
    if (active === "calendar") return <CalendarSection />;
    if (active === "billing") return <BillingSection />;
    if (active === "settings") return <SettingsSection />;
    return <OverviewSection />;
  };

  return (
    <div className="min-h-screen bg-slate-50 text-slate-950">
      <div className="flex min-h-screen">
        <aside className={`fixed inset-y-0 left-0 z-30 w-72 transform border-r border-slate-200 bg-white p-4 transition-transform lg:static lg:translate-x-0 ${sidebarOpen ? "translate-x-0" : "-translate-x-full"}`}>
          <div className="mb-8 flex items-center gap-3 px-2">
            <div className="grid h-11 w-11 place-items-center rounded-2xl bg-slate-950 text-white">
              <Sparkles size={20} />
            </div>
            <div>
              <h1 className="text-lg font-black tracking-tight">ContentFlow</h1>
              <p className="text-xs font-medium text-slate-500">SaaS dashboard demo</p>
            </div>
          </div>

          <nav className="space-y-2">
            {nav.map((item) => {
              const Icon = item.icon;
              const selected = active === item.id;
              return (
                <button
                  key={item.id}
                  onClick={() => {
                    setActive(item.id);
                    setSidebarOpen(false);
                  }}
                  className={`flex w-full items-center gap-3 rounded-2xl px-4 py-3 text-sm font-bold transition ${selected ? "bg-slate-950 text-white shadow-lg shadow-slate-200" : "text-slate-600 hover:bg-slate-100 hover:text-slate-950"}`}
                >
                  <Icon size={18} />
                  {item.label}
                </button>
              );
            })}
          </nav>

          <div className="mt-8 rounded-2xl bg-slate-950 p-4 text-white">
            <p className="mb-2 text-sm font-bold">Pro Plan</p>
            <p className="mb-4 text-xs text-slate-300">68% of monthly content credits used.</p>
            <div className="h-2 rounded-full bg-white/20">
              <div className="h-2 w-[68%] rounded-full bg-white" />
            </div>
          </div>
        </aside>

        {sidebarOpen && <div className="fixed inset-0 z-20 bg-black/30 lg:hidden" onClick={() => setSidebarOpen(false)} />}

        <main className="flex-1 p-4 lg:p-8">
          <header className="mb-6 flex flex-col gap-4 rounded-3xl border border-slate-200 bg-white p-4 shadow-sm lg:flex-row lg:items-center lg:justify-between">
            <div className="flex items-center gap-3">
              <button className="rounded-xl border border-slate-200 p-2 lg:hidden" onClick={() => setSidebarOpen(true)}>
                <Menu size={20} />
              </button>
              <div>
                <h2 className="text-2xl font-black tracking-tight">{activeTitle}</h2>
                <p className="text-sm font-medium text-slate-500">Manage clients, posts, billing, and workspace activity.</p>
              </div>
            </div>

            <div className="flex items-center gap-3">
              <div className="hidden items-center gap-2 rounded-2xl border border-slate-200 px-3 py-2 md:flex">
                <Search size={16} className="text-slate-400" />
                <input className="w-44 border-none bg-transparent text-sm outline-none" placeholder="Search..." />
              </div>
              <button className="rounded-2xl border border-slate-200 p-3 hover:bg-slate-50">
                <Bell size={18} />
              </button>
              <button className="flex items-center gap-2 rounded-2xl bg-slate-950 px-4 py-3 text-sm font-bold text-white hover:bg-slate-800">
                <Plus size={17} /> New
              </button>
            </div>
          </header>

          <motion.div
            key={active}
            initial={{ opacity: 0, y: 12 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.25 }}
          >
            {renderMain()}
          </motion.div>
        </main>
      </div>
    </div>
  );
}

function OverviewSection() {
  return (
    <div className="space-y-6">
      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        {stats.map((stat) => {
          const Icon = stat.icon;
          return (
            <Card key={stat.label}>
              <div className="mb-4 flex items-center justify-between">
                <div className="grid h-11 w-11 place-items-center rounded-2xl bg-slate-100">
                  <Icon size={20} />
                </div>
                <Badge tone="green">{stat.change}</Badge>
              </div>
              <p className="text-sm font-bold text-slate-500">{stat.label}</p>
              <p className="mt-1 text-3xl font-black">{stat.value}</p>
            </Card>
          );
        })}
      </div>

      <div className="grid gap-6 xl:grid-cols-3">
        <Card className="xl:col-span-2">
          <div className="mb-5 flex items-center justify-between">
            <div>
              <h3 className="text-lg font-black">Weekly Performance</h3>
              <p className="text-sm text-slate-500">Posts and engagement overview</p>
            </div>
            <Badge tone="blue">Live Demo</Badge>
          </div>
          <div className="h-80">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart data={chartData}>
                <CartesianGrid strokeDasharray="3 3" vertical={false} />
                <XAxis dataKey="day" />
                <YAxis />
                <Tooltip />
                <Bar dataKey="engagement" radius={[10, 10, 0, 0]} />
              </BarChart>
            </ResponsiveContainer>
          </div>
        </Card>

        <Card>
          <h3 className="mb-4 text-lg font-black">Today’s Queue</h3>
          <div className="space-y-3">
            {posts.map((post) => (
              <div key={post.title} className="rounded-2xl border border-slate-200 p-4">
                <div className="mb-3 flex items-start justify-between gap-3">
                  <div>
                    <p className="font-black">{post.title}</p>
                    <p className="text-sm text-slate-500">{post.client}</p>
                  </div>
                  <Clock3 size={17} className="text-slate-400" />
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm font-bold text-slate-500">{post.time}</span>
                  <Badge tone={post.status === "Published" ? "green" : post.status === "Draft" ? "amber" : "blue"}>{post.status}</Badge>
                </div>
              </div>
            ))}
          </div>
        </Card>
      </div>
    </div>
  );
}

function ClientsSection() {
  return (
    <Card>
      <div className="mb-5 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
        <div>
          <h3 className="text-lg font-black">Clients</h3>
          <p className="text-sm text-slate-500">Simple SaaS table with statuses and campaigns.</p>
        </div>
        <button className="rounded-2xl bg-slate-950 px-4 py-3 text-sm font-bold text-white">Add Client</button>
      </div>
      <div className="overflow-hidden rounded-2xl border border-slate-200">
        <table className="w-full text-left text-sm">
          <thead className="bg-slate-100 text-slate-600">
            <tr>
              <th className="p-4">Client</th>
              <th className="p-4">Status</th>
              <th className="p-4">Campaigns</th>
              <th className="p-4">Last Activity</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-slate-200 bg-white">
            {clients.map((client) => (
              <tr key={client.name} className="hover:bg-slate-50">
                <td className="p-4 font-black">{client.name}</td>
                <td className="p-4"><Badge tone={client.status === "Active" ? "green" : client.status === "Review" ? "amber" : "red"}>{client.status}</Badge></td>
                <td className="p-4 font-bold">{client.campaigns}</td>
                <td className="p-4 text-slate-500">{client.last}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </Card>
  );
}

function CalendarSection() {
  return (
    <div className="grid gap-5 lg:grid-cols-3">
      {posts.map((post) => (
        <Card key={post.title}>
          <FileText className="mb-4 text-slate-400" />
          <h3 className="text-lg font-black">{post.title}</h3>
          <p className="mb-4 text-sm text-slate-500">{post.client} • {post.time}</p>
          <Badge tone={post.status === "Published" ? "green" : post.status === "Draft" ? "amber" : "blue"}>{post.status}</Badge>
        </Card>
      ))}
    </div>
  );
}

function BillingSection() {
  return (
    <div className="grid gap-6 lg:grid-cols-2">
      <Card>
        <h3 className="text-lg font-black">Current Plan</h3>
        <p className="mt-2 text-sm text-slate-500">You are using the Pro workspace plan.</p>
        <div className="my-6 rounded-3xl bg-slate-950 p-6 text-white">
          <p className="text-sm font-bold text-slate-300">Pro Plan</p>
          <p className="mt-2 text-4xl font-black">$29<span className="text-base text-slate-300">/mo</span></p>
        </div>
        <button className="flex w-full items-center justify-center gap-2 rounded-2xl bg-slate-950 px-4 py-3 font-bold text-white">
          Upgrade Plan <ArrowUpRight size={18} />
        </button>
      </Card>
      <Card>
        <h3 className="mb-4 text-lg font-black">Usage</h3>
        {["AI captions", "Scheduled posts", "Client seats"].map((item, index) => (
          <div key={item} className="mb-5">
            <div className="mb-2 flex justify-between text-sm font-bold">
              <span>{item}</span>
              <span>{[68, 42, 80][index]}%</span>
            </div>
            <div className="h-3 rounded-full bg-slate-100">
              <div className="h-3 rounded-full bg-slate-950" style={{ width: `${[68, 42, 80][index]}%` }} />
            </div>
          </div>
        ))}
      </Card>
    </div>
  );
}

function SettingsSection() {
  return (
    <Card>
      <h3 className="text-lg font-black">Workspace Settings</h3>
      <div className="mt-5 grid gap-4 md:grid-cols-2">
        <label className="space-y-2">
          <span className="text-sm font-bold text-slate-600">Workspace name</span>
          <input className="w-full rounded-2xl border border-slate-200 px-4 py-3 outline-none focus:border-slate-950" defaultValue="ContentFlow Agency" />
        </label>
        <label className="space-y-2">
          <span className="text-sm font-bold text-slate-600">Role</span>
          <input className="w-full rounded-2xl border border-slate-200 px-4 py-3 outline-none focus:border-slate-950" defaultValue="Owner" />
        </label>
      </div>
      <div className="mt-6 rounded-2xl border border-slate-200 p-4">
        <div className="flex items-center gap-3">
          <CheckCircle2 className="text-emerald-600" />
          <div>
            <p className="font-black">Demo mode enabled</p>
            <p className="text-sm text-slate-500">No backend, database, or payment integration attached.</p>
          </div>
        </div>
      </div>
    </Card>
  );
}