export default function SafeResourceDashboard() {
  const resourceTypes = [
    { name: "Tài khoản mẫu", count: 24, status: "Sẵn sàng" },
    { name: "Email dùng một lần", count: 12, status: "Sẵn sàng" },
    { name: "Video thưởng", count: 5, status: "Đang cập nhật" },
  ];

  const taskButtons = [
    "Video Thưởng 60p",
    "Video Thưởng 180p",
    "Video Lite 10p",
    "Video Lite 60p",
    "Video Lite 180p",
  ];

  return (
    <div className="min-h-screen bg-slate-100 p-4 md:p-8">
      <div className="mx-auto max-w-3xl space-y-6">
        <div className="rounded-3xl bg-white p-6 shadow-sm">
          <div className="flex items-center justify-between gap-4">
            <div>
              <h1 className="text-2xl font-bold text-slate-800">Bảng điều khiển tài nguyên</h1>
              <p className="mt-1 text-sm text-slate-500">
                Giao diện mẫu cho hệ thống quản lý tài nguyên hợp lệ, không chứa chức năng lưu mật khẩu, mã 2FA hoặc thông tin đăng nhập nhạy cảm.
              </p>
            </div>
            <div className="rounded-full bg-sky-100 px-4 py-2 text-sm font-semibold text-sky-700">
              Admin Panel
            </div>
          </div>
        </div>

        <div className="grid gap-3">
          <button className="rounded-2xl bg-sky-500 px-5 py-4 text-lg font-semibold text-white shadow-sm transition hover:opacity-90">
            + Thêm tài nguyên mới
          </button>
          <button className="rounded-2xl bg-sky-500 px-5 py-4 text-lg font-semibold text-white shadow-sm transition hover:opacity-90">
            ⚙ Cài đặt hệ thống
          </button>
          <button className="rounded-2xl bg-rose-500 px-5 py-4 text-lg font-semibold text-white shadow-sm transition hover:opacity-90">
            ⎋ Đăng xuất
          </button>
        </div>

        <section className="rounded-3xl bg-white shadow-sm">
          <div className="border-b px-6 py-4">
            <h2 className="text-xl font-bold text-slate-800">Tài nguyên</h2>
          </div>
          <div className="space-y-4 p-6">
            {resourceTypes.map((item) => (
              <div key={item.name} className="rounded-2xl border border-slate-200 p-4">
                <div className="flex items-center justify-between gap-4">
                  <div>
                    <div className="text-lg font-semibold text-slate-800">{item.name}</div>
                    <div className="text-sm text-slate-500">Số lượng: {item.count}</div>
                  </div>
                  <span className="rounded-full bg-slate-100 px-3 py-1 text-sm text-slate-700">
                    {item.status}
                  </span>
                </div>
              </div>
            ))}
            <div className="grid gap-3 md:grid-cols-2">
              <button className="rounded-2xl bg-sky-500 px-5 py-4 text-lg font-semibold text-white">Lấy tài nguyên</button>
              <button className="rounded-2xl bg-sky-300 px-5 py-4 text-lg font-semibold text-white">Yêu cầu kích hoạt</button>
            </div>
          </div>
        </section>

        <section className="rounded-3xl bg-white shadow-sm">
          <div className="border-b px-6 py-4">
            <h2 className="text-xl font-bold text-slate-800">Xem video</h2>
          </div>
          <div className="space-y-4 p-6">
            {taskButtons.map((label) => (
              <button
                key={label}
                className="w-full rounded-2xl bg-sky-500 px-5 py-5 text-xl font-semibold text-white shadow-sm transition hover:opacity-90"
              >
                ▶ {label}
              </button>
            ))}
          </div>
        </section>

        <section className="rounded-3xl bg-white shadow-sm">
          <div className="border-b px-6 py-4">
            <h2 className="text-xl font-bold text-slate-800">API tích hợp</h2>
          </div>
          <div className="grid gap-4 p-6 md:grid-cols-2">
            <div className="rounded-2xl bg-slate-50 p-4">
              <div className="text-sm font-semibold text-slate-600">Tên API</div>
              <div className="mt-2 rounded-xl border bg-white px-4 py-3 text-slate-800">Nhà cung cấp hợp lệ</div>
            </div>
            <div className="rounded-2xl bg-slate-50 p-4">
              <div className="text-sm font-semibold text-slate-600">Trạng thái</div>
              <div className="mt-2 rounded-xl border bg-white px-4 py-3 text-emerald-600">Đã kết nối</div>
            </div>
            <div className="md:col-span-2 rounded-2xl border border-dashed border-slate-300 p-4 text-sm text-slate-500">
              Khu vực này chỉ nên dùng cho API hợp lệ phục vụ quản lý dữ liệu của chính bạn. Không nên dùng để xử lý mật khẩu, mã xác thực một lần hoặc thông tin đăng nhập của người khác.
            </div>
          </div>
        </section>
      </div>
    </div>
  );
}