import { StatTile } from "./StatTile";

function DotGridIcon() {
  return (
    <svg aria-hidden="true" viewBox="0 0 20 20">
      <circle cx="5" cy="5" r="2" />
      <circle cx="15" cy="5" r="2" />
      <circle cx="5" cy="15" r="2" />
      <circle cx="15" cy="15" r="2" />
    </svg>
  );
}

function ShieldIcon() {
  return (
    <svg aria-hidden="true" viewBox="0 0 20 20">
      <path d="M10 2.5 4.5 4.7v4.2c0 3.4 2.1 6.5 5.5 8.6 3.4-2.1 5.5-5.2 5.5-8.6V4.7Z" />
    </svg>
  );
}

function NetworkIcon() {
  return (
    <svg aria-hidden="true" viewBox="0 0 20 20">
      <path d="M10 3a3 3 0 1 0 0 6 3 3 0 0 0 0-6ZM4 14.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5Zm12 0a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5ZM6.1 14l2.2-3.1m5.6 3.1-2.2-3.1" />
    </svg>
  );
}

function ClockIcon() {
  return (
    <svg aria-hidden="true" viewBox="0 0 20 20">
      <path d="M10 3a7 7 0 1 0 0 14 7 7 0 0 0 0-14Zm0 3v4l2.8 1.7" />
    </svg>
  );
}

type StatusCardProps = {
  connected: boolean;
  assignedIp: string;
  gatewayEndpoint: string;
  accessLabel: string;
  lastSyncTime: string;
};

export function StatusCard({
  connected,
  assignedIp,
  gatewayEndpoint,
  accessLabel,
  lastSyncTime
}: StatusCardProps) {
  return (
    <section className="status-card">
      <div className="status-hero">
        <div>
          <p className="section-eyebrow">Status</p>
          <h2>{connected ? "Connected" : "Disconnected"}</h2>
          <p className="status-support">
            {connected ? "Secure tunnel established" : "Client is ready to establish a secure tunnel"}
          </p>
        </div>
        <div className={`status-pill ${connected ? "is-online" : ""}`}>
          <span className="status-pulse" />
          {connected ? "Tunnel active" : "Ready"}
        </div>
      </div>

      <div className="status-details">
        <div className="panel-head panel-head-compact">
          <div>
            <p className="section-eyebrow">Connection</p>
            <h3>Overview</h3>
          </div>
        </div>

        <div className="stat-grid">
          <StatTile icon={<ShieldIcon />} label="Assigned VPN IP" value={assignedIp} />
          <StatTile icon={<NetworkIcon />} label="Gateway endpoint" value={gatewayEndpoint} />
          <StatTile icon={<DotGridIcon />} label="Access mode" value={accessLabel} />
          <StatTile icon={<ClockIcon />} label="Last sync" value={lastSyncTime} />
        </div>
      </div>
    </section>
  );
}
