import React, { useState } from "react";
import { Search, LayoutDashboard, Inbox, PenLine, FileText, Grid2X2, Settings, UserCircle, ChevronLeft, ChevronRight } from "lucide-react";
import { motion } from "framer-motion";

export default function AdminLoginDashboard() {
  const [loggedIn, setLoggedIn] = useState(false);
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");

  const handleLogin = (e) => {
    e.preventDefault();
    if (email.trim() && password.trim()) {
      setLoggedIn(true);
      setError("");
    } else {
      setError("Bitte E-Mail und Passwort eingeben.");
    }
  };

  if (!loggedIn) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-[#4f74b3] p-6">
        <motion.div
          initial={{ opacity: 0, y: 25 }}
          animate={{ opacity: 1, y: 0 }}
          className="w-full max-w-md bg-white rounded-2xl shadow-2xl overflow-hidden"
        >
          <div className="bg-gradient-to-r from-[#061183] to-[#2a397f] p-7 text-white">
            <h1 className="text-3xl font-bold">Admin Login</h1>
            <p className="text-sm text-cyan-300 mt-1">Welcome back, boss.</p>
          </div>

          <form onSubmit={handleLogin} className="p-7 space-y-5">
            <div>
              <label className="block text-sm font-semibold text-[#061183] mb-2">E-Mail</label>
              <input
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                type="email"
                className="w-full rounded-xl border border-slate-200 px-4 py-3 outline-none focus:ring-2 focus:ring-cyan-400"
                placeholder="admin@example.com"
              />
            </div>

            <div>
              <label className="block text-sm font-semibold text-[#061183] mb-2">Passwort</label>
              <input
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                type="password"
                className="w-full rounded-xl border border-slate-200 px-4 py-3 outline-none focus:ring-2 focus:ring-cyan-400"
                placeholder="••••••••"
              />
            </div>

            {error && <p className="text-sm text-red-500">{error}</p>}

            <button className="w-full rounded-xl bg-[#061183] text-white py-3 font-bold hover:bg-[#111c95] transition shadow-lg">
              Einloggen
            </button>

            <p className="text-xs text-slate-400 text-center">
              Demo: beliebige E-Mail und Passwort eingeben.
            </p>
          </form>
        </motion.div>
      </div>
    );
  }

  const devices = [
    ["30%", "Computer"],
    ["75%", "Smartphone"],
    ["50%", "Tablet"],
    ["15%", "E-Reader"],
    ["25%", "Smart TV"],
    ["10%", "Others"],
  ];

  const menu = [
    [LayoutDashboard, "Dashboard", true],
    [Inbox, "Inbox"],
    [PenLine, "Posts"],
    [FileText, "Pages"],
    [Grid2X2, "Widgets"],
    [Settings, "Settings"],
  ];

  const bars = [82, 58, 28, 45, 66, 58, 40];

  return (
    <div className="min-h-screen bg-[#4f74b3] p-8 md:p-14 flex items-center justify-center">
      <motion.div
        initial={{ opacity: 0, scale: 0.98 }}
        animate={{ opacity: 1, scale: 1 }}
        className="w-full max-w-7xl min-h-[860px] bg-white shadow-2xl flex overflow-hidden"
      >
        <aside className="w-64 bg-gradient-to-b from-[#303b82] to-[#061183] text-white p-6">
          <div className="relative mb-32">
            <Search className="absolute left-3 top-3 h-5 w-5 text-cyan-400" />
            <input
              className="w-full bg-transparent border border-cyan-500/70 py-3 pl-10 pr-3 text-sm outline-none placeholder:text-cyan-400 text-cyan-300"
              placeholder="Search"
            />
          </div>

          <nav className="space-y-2">
            {menu.map(([Icon, label, active]) => (
              <div key={label} className="border-b border-white/10 py-3">
                <button className="flex items-center gap-3 w-full text-left group">
                  {active && <span className="w-2 h-2 rounded-full bg-cyan-400" />}
                  {!active && <span className="w-2" />}
                  <Icon className="h-6 w-6 text-cyan-400" />
                  <span className="font-medium group-hover:text-cyan-300 transition">{label}</span>
                </button>
              </div>
            ))}
          </nav>
        </aside>

        <main className="flex-1 bg-white">
          <header className="h-20 bg-[#ededf5] flex items-center justify-end px-8">
            <div className="text-right mr-3">
              <div className="font-bold text-[#061183] text-lg">User Name</div>
              <button onClick={() => setLoggedIn(false)} className="text-[10px] text-cyan-400 hover:underline">
                Sign out
              </button>
            </div>
            <div className="w-12 h-12 rounded-full border border-cyan-400 flex items-center justify-center bg-slate-100">
              <UserCircle className="w-9 h-9 text-slate-300" />
            </div>
          </header>

          <section className="p-10 space-y-9">
            <Panel title="Devices">
              <div className="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-6 gap-6 py-4">
                {devices.map(([percent, label], index) => (
                  <div key={label} className="flex flex-col items-center">
                    <div
                      className="w-24 h-24 rounded-full flex items-center justify-center"
                      style={{
                        background: `conic-gradient(#30c7e8 ${parseInt(percent)}%, #111a80 ${parseInt(percent)}%)`,
                      }}
                    >
                      <div className="w-20 h-20 rounded-full bg-[#eeeef7] flex items-center justify-center text-2xl font-bold text-[#061183]">
                        {percent}
                      </div>
                    </div>
                    <div className="text-xs text-[#061183] font-bold mt-3">{label}</div>
                  </div>
                ))}
              </div>
            </Panel>

            <div className="grid lg:grid-cols-2 gap-9">
              <Panel title="Countries">
                <div className="relative h-48 bg-[#eeeef7] overflow-hidden flex items-center justify-center">
                  <div className="absolute inset-0 opacity-25 text-[130px] font-black text-slate-400 flex items-center justify-center tracking-tight">
                    MAP
                  </div>
                  {[[18,38],[33,48],[45,30],[53,24],[50,56],[67,38],[74,31],[84,29],[88,58],[23,66],[30,56],[57,58]].map(([x,y],i)=>(
                    <span key={i} className="absolute w-4 h-4 rounded-full bg-cyan-400 border-4 border-[#111a80]" style={{left:`${x}%`, top:`${y}%`}} />
                  ))}
                </div>
              </Panel>

              <Panel title="Countries Graphic">
                <div className="space-y-5 py-3 px-2">
                  {[['United States',67],['Brazil',57],['United Kingdom',34],['France',48],['Australia',20]].map(([name, value])=>(
                    <div key={name} className="grid grid-cols-[120px_1fr] gap-5 items-center">
                      <div className="text-xs font-bold text-[#061183] text-right">{name}</div>
                      <div className="h-3 bg-slate-300 relative">
                        <div className="absolute right-0 top-0 h-full bg-[#111a80]" style={{width:`${value}%`}} />
                      </div>
                    </div>
                  ))}
                  <div className="flex justify-between text-[10px] text-cyan-400 pl-[140px] pr-1">
                    <span>50%</span><span>40%</span><span>30%</span><span>20%</span><span>10%</span><span>0%</span>
                  </div>
                </div>
              </Panel>
            </div>

            <div className="grid lg:grid-cols-[0.8fr_1.4fr] gap-9">
              <Panel title="Calendar">
                <div className="p-4 text-[#061183]">
                  <div className="flex items-center justify-center gap-5 font-bold mb-5">
                    <ChevronLeft className="w-4 h-4 text-cyan-400" /> January <ChevronRight className="w-4 h-4 text-cyan-400" />
                  </div>
                  <div className="grid grid-cols-7 gap-3 text-center text-sm">
                    {['S','M','T','W','T','F','S'].map((d,i)=><div key={i} className="font-bold">{d}</div>)}
                    {Array.from({length:31},(_,i)=>i+1).map(day=>(
                      <div key={day} className={`text-cyan-400 ${day===10?'ring-2 ring-[#111a80] text-[#111a80]':''}`}>{day}</div>
                    ))}
                  </div>
                </div>
              </Panel>

              <Panel title="Weekly Access">
                <div className="h-52 flex items-end justify-around px-8 pt-8 pb-5">
                  {bars.map((height, i)=>(
                    <div key={i} className="flex flex-col items-center gap-2">
                      <div className="w-9 h-36 bg-slate-300 flex items-end">
                        <div className="w-full bg-[#111a80]" style={{height:`${height}%`}} />
                      </div>
                      <span className="h-4 border-l border-cyan-400" />
                      <span className="text-[9px] text-cyan-400">week 01</span>
                    </div>
                  ))}
                </div>
              </Panel>
            </div>
          </section>
        </main>
      </motion.div>
    </div>
  );
}

function Panel({ title, children }) {
  return (
    <section className="bg-[#eeeef7]">
      <div className="h-9 bg-gradient-to-r from-[#061183] to-[#2a397f] border-b-2 border-cyan-400 px-4 flex items-center text-white font-bold">
        {title}
      </div>
      {children}
    </section>
  );
}