"use client";

import React from "react";
import { useParams } from "next/navigation";

// The client list is currently mocked, but in the future this would be fetched from the DB
const CLIENTS = {
  apex: { name: "Apex Plumbing" },
  barton: { name: "Barton Creek HVAC" },
};

export default function ClientViewPage() {
  const params = useParams();
  const clientId = params.clientId as keyof typeof CLIENTS;
  const client = CLIENTS[clientId] || { name: "Unknown Client" };

  return (
    <div style={{ padding: "40px 56px", maxWidth: 1100, margin: "0 auto" }}>
      {/* Header */}
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "flex-start",
          marginBottom: 32,
        }}
      >
        <div>
          <div
            style={{
              fontSize: "11px",
              fontWeight: 600,
              color: "#a09a90",
              textTransform: "uppercase",
              letterSpacing: "0.04em",
              marginBottom: 6,
            }}
          >
            Client
          </div>
          <h1
            style={{
              fontSize: "28px",
              fontWeight: 600,
              color: "#1a1a1a",
              letterSpacing: "-0.02em",
              margin: "0 0 8px",
            }}
          >
            {client.name}
          </h1>
          <p style={{ color: "#6b6560", fontSize: "15px", margin: 0 }}>
            Manage projects, infrastructure, and secrets for this client.
          </p>
        </div>
        <button
          style={{
            padding: "8px 16px",
            background: "var(--accent)",
            color: "#fff",
            borderRadius: 8,
            fontWeight: 500,
            fontSize: "13px",
            border: "none",
            cursor: "pointer",
            boxShadow: "0 2px 8px var(--accent-glow)",
            display: "flex",
            alignItems: "center",
            gap: 6,
          }}
        >
          <span style={{ fontSize: 16, lineHeight: 0 }}>+</span> New project
        </button>
      </div>

      {/* Tabs */}
      <div
        style={{
          display: "flex",
          gap: 24,
          borderBottom: "1px solid #eae6de",
          marginBottom: 24,
        }}
      >
        {["Projects", "Infrastructure", "Secrets Vault", "Contacts"].map(
          (tab, i) => (
            <div
              key={tab}
              style={{
                paddingBottom: 12,
                fontSize: "14px",
                fontWeight: i === 0 ? 600 : 500,
                color: i === 0 ? "#1a1a1a" : "#6b6560",
                borderBottom:
                  i === 0 ? "2px solid var(--accent)" : "2px solid transparent",
                cursor: "pointer",
              }}
            >
              {tab}
            </div>
          ),
        )}
      </div>

      {/* Projects Grid */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 16 }}>
        <div
          style={{
            background: "#fff",
            border: "1px solid #eae6de",
            borderRadius: 12,
            padding: "20px 24px",
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            boxShadow: "0 2px 8px rgba(0,0,0,0.02)",
          }}
        >
          <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
            <div
              style={{
                width: 40,
                height: 40,
                borderRadius: 8,
                background: "#f6f4f0",
                display: "grid",
                placeItems: "center",
                color: "#1a1a1a",
                fontWeight: 600,
                fontSize: 16,
              }}
            >
              {client.name.charAt(0)}
            </div>
            <div>
              <h3
                style={{
                  fontSize: "16px",
                  fontWeight: 600,
                  color: "#1a1a1a",
                  margin: "0 0 4px",
                }}
              >
                Customer Portal
              </h3>
              <div
                style={{
                  fontSize: "13px",
                  color: "#6b6560",
                  display: "flex",
                  alignItems: "center",
                  gap: 6,
                }}
              >
                <span
                  style={{
                    display: "inline-block",
                    width: 6,
                    height: 6,
                    borderRadius: "50%",
                    background: "#2e7d32",
                  }}
                />
                Live on {client.name.toLowerCase().replace(/[^a-z0-9]/g, "")}.vibn.app
              </div>
            </div>
          </div>
          <button
            style={{
              padding: "6px 12px",
              border: "1px solid #eae6de",
              background: "transparent",
              borderRadius: 6,
              fontSize: "13px",
              fontWeight: 500,
              color: "#1a1a1a",
              cursor: "pointer",
            }}
          >
            Open Builder
          </button>
        </div>
      </div>
    </div>
  );
}
