"use client";
import React, { useState } from "react";
import { useRouter } from "next/navigation";

const wrap: React.CSSProperties = {
  minHeight: "100vh",
  background: "linear-gradient(160deg,#EAF1F2,#F7F9FA)",
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  padding: 30,
};

const cardStyle = (wide: boolean): React.CSSProperties => ({
  background: "var(--card)",
  borderRadius: 20,
  boxShadow: "0 30px 60px -25px rgba(46,58,63,.25)",
  width: "100%",
  maxWidth: wide ? 480 : 420,
  padding: "36px 34px",
});

const Brand = () => (
  <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 26 }}>
    <div style={{ width: 38, height: 38, borderRadius: 10, background: "linear-gradient(135deg,var(--navy),var(--navy-2))", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 800 }}>RB</div>
    <b style={{ fontSize: 16 }}>ReadyBroker Agent</b>
  </div>
);

const ProgressBar = (pct: string) => (
  <div style={{ height: 5, background: "var(--line)", borderRadius: 10, overflow: "hidden", marginBottom: 20 }}>
    <div style={{ height: "100%", background: "var(--navy)", borderRadius: 10, width: pct }} />
  </div>
);

export default function AgentLoginPage() {
  const router = useRouter();
  const [view, setView] = useState<"login" | "otp" | "signup" | "kyc" | "bank" | "pending">("login");

  return (
    <div style={wrap}>
      <div style={cardStyle(view === "kyc")}>
        <Brand />

        {view === "login" && (
          <>
            <h1 style={{ fontSize: 21, fontWeight: 800, marginBottom: 6 }}>Log in</h1>
            <div className="sub" style={{ marginBottom: 24 }}>Enter your mobile number — we&apos;ll send you an OTP.</div>
            <div className="field"><label>Mobile Number</label><input placeholder="+91 98765 43210" /></div>
            <button className="btn btn-primary btn-full" onClick={() => setView("otp")}>Send OTP</button>
            <div className="auth-foot" style={{ textAlign: "center", fontSize: 12.5, color: "var(--sub)", marginTop: 18 }}>
              New agent? <a href="#" onClick={(e) => { e.preventDefault(); setView("signup"); }} style={{ color: "var(--navy)", fontWeight: 700 }}>Register here</a>
            </div>
          </>
        )}

        {view === "otp" && (
          <>
            <h1 style={{ fontSize: 21, fontWeight: 800, marginBottom: 6 }}>Enter OTP</h1>
            <div className="sub" style={{ marginBottom: 20 }}>Sent to +91 98230 11223</div>
            <div style={{ display: "flex", gap: 10, marginBottom: 20 }}>
              {[0, 1, 2, 3, 4, 5].map((i) => (
                <input key={i} maxLength={1} style={{ width: 48, height: 52, textAlign: "center", fontSize: 20, fontWeight: 800, border: "1.5px solid var(--line)", borderRadius: 10 }} />
              ))}
            </div>
            <button className="btn btn-primary btn-full" onClick={() => router.push("/")}>Verify &amp; Continue</button>
            <div style={{ textAlign: "center", fontSize: 12.5, color: "var(--sub)", marginTop: 18 }}>
              <a href="#" onClick={(e) => { e.preventDefault(); setView("login"); }}>← Back</a>
            </div>
          </>
        )}

        {view === "signup" && (
          <>
            <h1 style={{ fontSize: 21, fontWeight: 800, marginBottom: 6 }}>Agent registration</h1>
            <div className="sub" style={{ marginBottom: 10 }}>Step 1 of 3</div>
            {ProgressBar("33%")}
            <div className="grid2">
              <div className="field"><label>Full Name</label><input placeholder="e.g. Rajesh Kumar" /></div>
              <div className="field"><label>Mobile Number</label><input placeholder="+91 98765 43210" /></div>
            </div>
            <div className="field"><label>Email</label><input placeholder="you@email.com" /></div>
            <div className="field"><label>Address</label><textarea /></div>
            <div className="field"><label>PAN Number</label><input placeholder="ABCPS8912K" /></div>
            <button className="btn btn-primary btn-full" onClick={() => setView("kyc")}>Continue to KYC</button>
            <div style={{ textAlign: "center", fontSize: 12.5, color: "var(--sub)", marginTop: 18 }}>
              <a href="#" onClick={(e) => { e.preventDefault(); setView("login"); }}>← Back to log in</a>
            </div>
          </>
        )}

        {view === "kyc" && (
          <>
            <h1 style={{ fontSize: 21, fontWeight: 800, marginBottom: 6 }}>Upload documents</h1>
            <div className="sub" style={{ marginBottom: 10 }}>Step 2 of 3</div>
            {ProgressBar("66%")}
            <div className="card" style={{ padding: "4px 16px", marginBottom: 16 }}>
              {[
                ["PAN Card", "Clear photo or PDF", true],
                ["Aadhaar / other KYC", "Front and back", true],
                ["Address Proof", "Utility bill, rent agreement, etc.", false],
                ["License / Certificate", "IRDAI POSP certificate", false],
                ["Other documents", "Optional", false],
              ].map(([t, d, uploaded]) => (
                <div key={t as string} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "13px 0", borderBottom: "1px solid var(--line)" }}>
                  <div><div style={{ fontSize: 13.3, fontWeight: 700 }}>{t as string}</div><div style={{ fontSize: 11.5, color: "var(--sub)" }}>{d as string}</div></div>
                  <span className={"tag " + (uploaded ? "tag-ok" : "tag-warn")}>{uploaded ? "Uploaded" : "Not uploaded"}</span>
                </div>
              ))}
            </div>
            <div className="field"><label>IRDAI Registration Number</label><input placeholder="e.g. POSP-IRDAI-2024-9912" /></div>
            <div className="field"><label>Training Hours Completed</label><input placeholder="e.g. 15" /></div>
            <div className="hint" style={{ marginBottom: 16 }}>Fill these in from your IRDAI training certificate — the back office will verify them against the document you uploaded.</div>
            <button className="btn btn-primary btn-full" onClick={() => setView("bank")}>Continue to Bank Details</button>
          </>
        )}

        {view === "bank" && (
          <>
            <h1 style={{ fontSize: 21, fontWeight: 800, marginBottom: 6 }}>Bank details</h1>
            <div className="sub" style={{ marginBottom: 10 }}>Step 3 of 3 — for commission payouts</div>
            {ProgressBar("100%")}
            <div className="field"><label>Account Holder Name</label><input placeholder="As per bank records" /></div>
            <div className="grid2">
              <div className="field"><label>Account Number</label><input placeholder="XXXXXXXXXXXX" /></div>
              <div className="field"><label>IFSC Code</label><input placeholder="e.g. HDFC0001234" /></div>
            </div>
            <button className="btn btn-primary btn-full" onClick={() => setView("pending")}>Submit Application</button>
          </>
        )}

        {view === "pending" && (
          <div style={{ textAlign: "center" }}>
            <div style={{ width: 70, height: 70, borderRadius: "50%", background: "var(--tint)", color: "var(--navy)", display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 20px" }}>
              <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></svg>
            </div>
            <h1 style={{ fontSize: 21, fontWeight: 800, marginBottom: 6 }}>Application submitted</h1>
            <div className="sub" style={{ marginBottom: 24 }}>Your KYC is under review. This usually takes 24–48 hours. You&apos;ll get an SMS once approved.</div>
            <button className="btn btn-secondary btn-full" onClick={() => setView("login")}>Back to Log In</button>
            <div style={{ textAlign: "center", fontSize: 12.5, color: "var(--sub)", marginTop: 18 }}>
              <a href="#" onClick={(e) => { e.preventDefault(); router.push("/"); }}>View app as approved agent (demo) →</a>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}