import { ChevronDown, Trash2, X, Plus, Sparkles } from "lucide-react";

const initialRows = [
  // Row 1 (2 cards)
  {
    id: "row-1",
    widgets: [
      { id: "w1", title: "TFM Requests · Monthly", type: "report.widget" },
      { id: "w2", title: "Recent Activity", type: "report.widget" },
    ],
  },
  // Row 2 (2 cards)
  {
    id: "row-2",
    widgets: [
      { id: "w3", title: "Schedule Performance", type: "report.widget" },
      { id: "w4", title: "Energy · Today", type: "report.widget" },
    ],
  },
  // Row 3 (3 cards)
  {
    id: "row-3",
    widgets: [
      { id: "w5", title: "Top 5 Requester", type: "report.widget" },
      { id: "w6", title: "Asset Register", type: "report.widget" },
      { id: "w7", title: "PM Plan vs Started", type: "report.widget" },
    ],
  },
];

// Note the 'export default' keyword here:
export default function DynamicDashboardPortal() {
  return (
    <div className="my-15 text-slate-100 font-sans">
      {/* --- HEADER SECTION --- */}
      <div className="flex flex-col md:flex-row md:items-start justify-between gap-4 mb-6">
        <div>
          <div className="flex items-center gap-2 text-[10px] font-bold tracking-widest uppercase font-mono text-slate-400 mb-1">
            <span>PLATFORM</span>
            <span>•</span>
            <span>DYNAMIC DASHBOARD</span>
          </div>
          <h1 className="text-2xl font-bold text-white tracking-tight">
            Dynamic dashboard
          </h1>
          <p className="text-sm font-medium text-slate-400 mt-1 max-w-2xl leading-relaxed">
            Design the dashboard each tenant's users land on in Operations. Arrange rows,
            drop in report widgets, then publish.
          </p>
        </div>

        {/* Action Buttons */}
        <div className="flex items-center gap-3 self-start md:self-auto">
          <span className="inline-flex items-center gap-1.5 bg-[#0C243B] border border-sky-800/50 text-sky-400 text-xs px-3 py-1.5 rounded-full font-mono font-medium">
            <span className="w-1.5 h-1.5 rounded-full bg-sky-400"></span>
            PUBLISHED
          </span>
          <button className="bg-[#0E1A2B] hover:bg-slate-800 text-slate-200 border border-slate-800 px-4 py-2 rounded-lg text-xs font-semibold transition-colors">
            Save draft
          </button>
          <button className="bg-[#1DE9B6] hover:bg-[#19d4a5] text-slate-950 font-semibold text-xs px-4 py-2 rounded-lg transition-colors shadow-lg shadow-teal-500/10">
            Publish
          </button>
        </div>
      </div>

      {/* --- CONTROL BAR: DESIGNING FOR TENANT --- */}
      <div className=" border border-slate-800/80 rounded-xl p-2 mb-2 flex flex-col sm:flex-row sm:items-center justify-between gap-4 backdrop-blur-sm">
        <div className="flex items-center gap-3">
          <span className="text-xs font-medium text-slate-300 shrink-0">
            Designing for
          </span>
          <div className="relative min-w-[200px]">
            <select
              defaultValue="Apple One"
              className="w-full appearance-none bg-[#060B14] border border-slate-800 rounded-lg pl-3.5 pr-8 py-1.5 text-xs text-slate-200 font-medium focus:outline-none focus:border-teal-500/50 cursor-pointer"
            >
              <option value="Apple One">Apple One</option>
              <option value="Tenant Two">Tenant Two</option>
            </select>
            <ChevronDown className="absolute right-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-400 pointer-events-none" />
          </div>
        </div>

        <div className="text-xs font-mono text-slate-400 bg-[#060B14] border border-slate-800 px-3 py-1.5 rounded-lg shrink-0">
          3 rows · 7 widgets
        </div>
      </div>

      {/* --- CANVAS GRID AREA --- */}
      <div className="border border-slate-800/80  rounded-2xl p-4 sm:p-6 mb-8 space-y-6 bg-[radial-gradient(#1e293b_1px,transparent_1px)] [background-size:16px_16px]">
        {initialRows.map((row) => (
          <div key={row.id} className="relative group/row">
            {/* Delete Row Button */}
            <button
              className="absolute -top-3 -right-2 z-10 p-1.5 text-slate-500 hover:text-rose-400 bg-[#060B14] border border-slate-800 rounded-md transition-colors opacity-80 group-hover/row:opacity-100"
              title="Delete row"
            >
              <Trash2 className="w-3.5 h-3.5" />
            </button>

            {/* Row Widgets Layout */}
            <div
              className={`grid gap-4 ${
                row.widgets.length === 1
                  ? "grid-cols-1"
                  : row.widgets.length === 2
                  ? "grid-cols-1 md:grid-cols-2"
                  : "grid-cols-1 md:grid-cols-3"
              }`}
            >
              {row.widgets.map((widget) => (
                <div
                  key={widget.id}
                  className="bg-[#0B132B]/80 border border-slate-800/90 rounded-xl p-4 backdrop-blur-sm flex flex-col justify-between h-36 relative group/widget hover:border-slate-700/80 transition-all"
                >
                  {/* Widget Top Header */}
                  <div className="flex items-start justify-between gap-2">
                    <div>
                      <h3 className="text-sm font-semibold text-white tracking-tight">
                        {widget.title}
                      </h3>
                      <p className="text-[11px] font-mono text-slate-400 mt-0.5">
                        {widget.type}
                      </p>
                    </div>
                    <button
                      className="p-1 rounded bg-slate-800/40 hover:bg-slate-700 text-slate-400 hover:text-white transition-colors"
                      title="Remove widget"
                    >
                      <X className="w-3.5 h-3.5" />
                    </button>
                  </div>

                  {/* Widget Placeholder Bar Chart */}
                  <div className="flex items-end justify-between gap-1.5 h-12 pt-2 px-1">
                    <div className="w-full bg-[#0E2433] rounded-t-sm h-[30%] border-t border-teal-500/50"></div>
                    <div className="w-full bg-[#0E2433] rounded-t-sm h-[45%] border-t border-teal-500/50"></div>
                    <div className="w-full bg-[#0E2433] rounded-t-sm h-[85%] border-t border-teal-500/50"></div>
                    <div className="w-full bg-[#0E2433] rounded-t-sm h-[60%] border-t border-teal-500/50"></div>
                    <div className="w-full bg-[#0E2433] rounded-t-sm h-[75%] border-t border-teal-500/50"></div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>

      {/* --- BOTTOM ADD ROW CONTROLS --- */}
      <div className="flex flex-wrap items-center gap-3">
        <span className="text-xs font-mono text-slate-400 uppercase tracking-wider">
          Add row:
        </span>
        <button className="flex items-center gap-1.5  hover:bg-slate-800 border border-slate-800/80 text-slate-200 text-xs px-3 py-1.5 rounded-lg transition-colors font-medium">
          <Plus className="w-3.5 h-3.5 text-teal-400" />
          <span>1 card</span>
        </button>
        <button className="flex items-center gap-1.5  hover:bg-slate-800 border border-slate-800/80 text-slate-200 text-xs px-3 py-1.5 rounded-lg transition-colors font-medium">
          <Plus className="w-3.5 h-3.5 text-teal-400" />
          <span>2 cards</span>
        </button>
        <button className="flex items-center gap-1.5 hover:bg-slate-800 border border-slate-800/80 text-slate-200 text-xs px-3 py-1.5 rounded-lg transition-colors font-medium">
          <Plus className="w-3.5 h-3.5 text-teal-400" />
          <span>3 cards</span>
        </button>
      </div>

     
    
    </div>
  );
}