"use client";

import { Bot, Plus, FileText, Wrench, Plug } from "lucide-react";

export default function AgentsPage() {
  return (
    <div
      style={{
        padding: "32px 48px",
        fontFamily: '"Outfit", "Inter", sans-serif',
        color: "#18181b",
        maxWidth: 900,
      }}
    >
      <div style={{ marginBottom: 40 }}>
        <h1
          style={{ fontSize: "1.5rem", fontWeight: 600, margin: "0 0 4px 0" }}
        >
          Agents
        </h1>
        <p style={{ fontSize: "0.9rem", color: "#71717a", margin: 0 }}>
          Manage agents and users
        </p>
      </div>

      <div
        style={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          marginTop: 64,
        }}
      >
        <div
          style={{
            width: 48,
            height: 48,
            background: "#fafafa",
            border: "1px solid #e4e4e7",
            borderRadius: 12,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            marginBottom: 24,
          }}
        >
          <Bot size={24} color="#18181b" />
        </div>
        <h2
          style={{ fontSize: "1.25rem", fontWeight: 600, margin: "0 0 8px 0" }}
        >
          Create your first agent
        </h2>
        <p
          style={{
            fontSize: "0.9rem",
            color: "#71717a",
            textAlign: "center",
            maxWidth: 480,
            margin: "0 0 40px 0",
            lineHeight: 1.5,
          }}
        >
          Agents talk to your users, work with your data, and run on schedules –
          all guided by clear instructions you define in your own words.
        </p>

        <div
          style={{
            width: "100%",
            background: "#f4f4f5",
            borderRadius: 16,
            padding: "24px 32px",
          }}
        >
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
              marginBottom: 16,
            }}
          >
            <span
              style={{ fontSize: "0.85rem", fontWeight: 500, color: "#71717a" }}
            >
              Suggested for your app
            </span>
            <button
              style={{
                background: "none",
                border: "none",
                cursor: "pointer",
                color: "#a1a1aa",
              }}
            >
              <RefreshIcon />
            </button>
          </div>

          <div
            style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}
          >
            {/* Blurred out cards */}
            <div
              style={{
                background: "#fff",
                borderRadius: 12,
                padding: 20,
                height: 110,
                border: "1px solid #e4e4e7",
                filter: "blur(2px)",
                opacity: 0.5,
              }}
            >
              <div
                style={{
                  height: 12,
                  background: "#f4f4f5",
                  borderRadius: 6,
                  width: "60%",
                  marginBottom: 12,
                }}
              ></div>
              <div
                style={{
                  height: 8,
                  background: "#f4f4f5",
                  borderRadius: 4,
                  width: "100%",
                  marginBottom: 8,
                }}
              ></div>
              <div
                style={{
                  height: 8,
                  background: "#f4f4f5",
                  borderRadius: 4,
                  width: "80%",
                }}
              ></div>
            </div>
            <div
              style={{
                background: "#fff",
                borderRadius: 12,
                padding: 20,
                height: 110,
                border: "1px solid #e4e4e7",
                filter: "blur(2px)",
                opacity: 0.5,
              }}
            >
              <div
                style={{
                  height: 12,
                  background: "#f4f4f5",
                  borderRadius: 6,
                  width: "50%",
                  marginBottom: 12,
                }}
              ></div>
              <div
                style={{
                  height: 8,
                  background: "#f4f4f5",
                  borderRadius: 4,
                  width: "90%",
                  marginBottom: 8,
                }}
              ></div>
              <div
                style={{
                  height: 8,
                  background: "#f4f4f5",
                  borderRadius: 4,
                  width: "70%",
                }}
              ></div>
            </div>
            <div
              style={{
                background: "#fff",
                borderRadius: 12,
                padding: 20,
                height: 110,
                border: "1px solid #e4e4e7",
                filter: "blur(2px)",
                opacity: 0.5,
              }}
            >
              <div
                style={{
                  height: 12,
                  background: "#f4f4f5",
                  borderRadius: 6,
                  width: "70%",
                  marginBottom: 12,
                }}
              ></div>
              <div
                style={{
                  height: 8,
                  background: "#f4f4f5",
                  borderRadius: 4,
                  width: "100%",
                  marginBottom: 8,
                }}
              ></div>
              <div
                style={{
                  height: 8,
                  background: "#f4f4f5",
                  borderRadius: 4,
                  width: "60%",
                }}
              ></div>
            </div>

            {/* Create from scratch */}
            <div
              style={{
                background: "#fff",
                borderRadius: 12,
                padding: 20,
                height: 110,
                border: "1px solid #e4e4e7",
                cursor: "pointer",
                transition: "border-color 0.2s",
              }}
              className="hover:border-blue-500"
            >
              <div
                style={{
                  display: "flex",
                  justifyContent: "space-between",
                  alignItems: "flex-start",
                  marginBottom: 8,
                }}
              >
                <span style={{ fontWeight: 600, fontSize: "0.95rem" }}>
                  Create from scratch
                </span>
                <div
                  style={{ background: "#f4f4f5", borderRadius: 6, padding: 4 }}
                >
                  <Plus size={14} color="#71717a" />
                </div>
              </div>
              <p
                style={{
                  fontSize: "0.8rem",
                  color: "#71717a",
                  margin: 0,
                  lineHeight: 1.4,
                }}
              >
                Create your own agent, defining how it works, responds, and
                integrates with your data.
              </p>
            </div>
          </div>
        </div>

        <div style={{ width: "100%", marginTop: 48 }}>
          <h3
            style={{
              fontSize: "0.9rem",
              fontWeight: 500,
              color: "#71717a",
              marginBottom: 16,
            }}
          >
            How you can use agents
          </h3>
          <div
            style={{
              display: "grid",
              gridTemplateColumns: "1fr 1fr 1fr",
              gap: 16,
            }}
          >
            <div style={{ padding: "16px 0" }}>
              <div
                style={{
                  display: "flex",
                  alignItems: "center",
                  gap: 8,
                  marginBottom: 8,
                }}
              >
                <FileText size={16} color="#18181b" />
                <span style={{ fontWeight: 600, fontSize: "0.9rem" }}>
                  Guidelines
                </span>
              </div>
              <p
                style={{
                  fontSize: "0.8rem",
                  color: "#71717a",
                  lineHeight: 1.5,
                  margin: 0,
                }}
              >
                Define the agent's behavior, knowledge, and AI model.
              </p>
            </div>
            <div style={{ padding: "16px 0" }}>
              <div
                style={{
                  display: "flex",
                  alignItems: "center",
                  gap: 8,
                  marginBottom: 8,
                }}
              >
                <Wrench size={16} color="#18181b" />
                <span style={{ fontWeight: 600, fontSize: "0.9rem" }}>
                  Tools
                </span>
              </div>
              <p
                style={{
                  fontSize: "0.8rem",
                  color: "#71717a",
                  lineHeight: 1.5,
                  margin: 0,
                }}
              >
                Configure what tools and data the agent can access.
              </p>
            </div>
            <div style={{ padding: "16px 0" }}>
              <div
                style={{
                  display: "flex",
                  alignItems: "center",
                  gap: 8,
                  marginBottom: 8,
                }}
              >
                <Plug size={16} color="#18181b" />
                <span style={{ fontWeight: 600, fontSize: "0.9rem" }}>
                  Connectors
                </span>
              </div>
              <p
                style={{
                  fontSize: "0.8rem",
                  color: "#71717a",
                  lineHeight: 1.5,
                  margin: 0,
                }}
              >
                Connect the agent to Gmail, Calendar & more.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function RefreshIcon() {
  return (
    <svg
      width="14"
      height="14"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path>
      <path d="M3 3v5h5"></path>
      <path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"></path>
      <path d="M16 21v-5h5"></path>
    </svg>
  );
}