<?php
session_start();
include_once($_SERVER["DOCUMENT_ROOT"].'/includes/db.php');
if (!isset($_SESSION['user_id'])) { header('Location: /login'); exit; }
$user_id = (int)$_SESSION['user_id'];

$stmt = $conn->prepare("SELECT passport_status, passport_contract FROM users WHERE id=? LIMIT 1");
$stmt->bind_param("i",$user_id); $stmt->execute();
$userRow = $stmt->get_result()->fetch_assoc(); $stmt->close();
$passportStatus    = (int)($userRow['passport_status'] ?? 0);
$passportContract  = trim((string)($userRow['passport_contract'] ?? ''));

function passportText(int $s): string  { return match($s){
    0=>"Tasdiqlash kerak",
    1=>"Tekshirilmoqda",
    2=>"Rad etilgan",
    5=>"Tasdiqlangan",
    default=>"Noma'lum"
}; }
function passportHint(int $s): string  { return match($s){
    0 => "Pasportingizni 2-3 daqiqada tasdiqlang.",
    1 => "Hujjatlaringiz 24 soat ichida tekshiriladi.",
    2 => "Pasport rad etildi — qayta yuklang.",
    5 => "Hisobingiz to'liq identifikatsiyadan o'tgan. Barcha xizmatlar yoqildi.",
    default => "—"
}; }

$statusText = passportText($passportStatus);
$hint       = passportHint($passportStatus);
$clickable  = in_array($passportStatus, [0,2], true);
$verified   = $passportStatus === 5;
$variant    = $verified ? 'success' : ($passportStatus===1 ? 'warning' : ($passportStatus===2 ? 'danger' : 'neutral'));
$btnLabel   = $passportStatus === 2 ? "Qayta yuklash" : "Boshlash";

$progressMap = [0 => 0, 2 => 25, 1 => 75, 5 => 100];
$progress    = $progressMap[$passportStatus] ?? 0;
$ringCap     = match($passportStatus) {
    0 => "Boshlash kerak",
    1 => "Tekshiruvda",
    2 => "Qayta yuklash",
    5 => "Bajarildi",
    default => "—",
};
$ringOffset  = 534 * (1 - $progress / 100);

include_once($_SERVER["DOCUMENT_ROOT"].'/business/includes/head.php');
?>
<style>
.kyc-min {
  max-width: 520px;
  margin: 0 auto;
  padding: 56px 24px 80px;
  text-align: center;
}
.kyc-min h1 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text);
  margin: 0 0 8px;
}
.kyc-min .lead {
  font-size: .92rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 32px;
}

.kyc-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  margin-bottom: 24px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-muted);
}
.kyc-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-soft); }
.kyc-status.var-success { background: var(--success-bg); border-color: var(--accent-line); color: var(--accent-strong); }
.kyc-status.var-success .dot { background: var(--accent); box-shadow: 0 0 0 3px rgba(0,0,0,.04); }
.kyc-status.var-warning { background: var(--warning-bg); border-color: #ecdcc0; color: var(--warning); }
.kyc-status.var-warning .dot { background: var(--warning); animation: kycPulse 1.6s ease-in-out infinite; }
.kyc-status.var-danger  { background: var(--danger-bg);  border-color: #f0d4d4; color: var(--danger); }
.kyc-status.var-danger  .dot { background: var(--danger); }

@keyframes kycPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ───── New ring (verified) ───── */
.kyc-ring-stage {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 8px auto 28px;
  display: grid;
  place-items: center;
}
.kyc-ring-stage::before {
  content: '';
  position: absolute;
  inset: -22px;
  background: radial-gradient(circle at center, var(--accent-bg) 0%, transparent 65%);
  filter: blur(6px);
  opacity: .85;
  pointer-events: none;
  animation: kycHalo 3.2s ease-in-out infinite;
}
@keyframes kycHalo {
  0%,100% { opacity: .85; transform: scale(1); }
  50%     { opacity: .55; transform: scale(1.06); }
}

.kyc-ring-svg {
  width: 100%; height: 100%;
  position: relative; z-index: 1;
  transform: rotate(-90deg);
}
.kyc-ring-track {
  fill: none;
  stroke: var(--surface-2);
  stroke-width: 10;
}
.kyc-ring-fill {
  fill: none;
  stroke: url(#kycGrad);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 534;     /* 2 * π * 85 */
  stroke-dashoffset: 534;
  --kyc-target: 0;
  filter: drop-shadow(0 4px 10px rgba(15,158,116,.35));
  animation: kycDraw 1.4s cubic-bezier(.4,0,.2,1) .15s forwards;
}
@keyframes kycDraw {
  to { stroke-dashoffset: var(--kyc-target); }
}

/* Variant tints for the ring */
.kyc-ring-stage.var-warning .kyc-ring-fill {
  stroke: var(--warning);
  filter: drop-shadow(0 4px 10px rgba(217,154,46,.32));
}
.kyc-ring-stage.var-danger .kyc-ring-fill {
  stroke: var(--danger);
  filter: drop-shadow(0 4px 10px rgba(220,53,69,.28));
}
.kyc-ring-stage.var-neutral .kyc-ring-fill {
  stroke: var(--text-soft);
  filter: none;
}
.kyc-ring-stage.var-warning .kyc-ring-num {
  background: linear-gradient(180deg, var(--warning) 0%, var(--warning) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kyc-ring-stage.var-danger .kyc-ring-num {
  background: linear-gradient(180deg, var(--danger) 0%, var(--danger) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kyc-ring-stage.var-neutral .kyc-ring-num {
  background: none;
  -webkit-background-clip: initial; background-clip: initial;
  color: var(--text-soft);
}
.kyc-ring-stage:not(.var-success)::before { display: none; }

.kyc-ring-core {
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow:
    inset 0 0 0 1px var(--line),
    0 4px 16px rgba(15,23,42,.06);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 2;
}
.kyc-ring-num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.kyc-ring-cap {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 700;
  color: var(--text-soft);
  margin-top: 6px;
}
.kyc-ring-check {
  position: absolute;
  top: 8px; right: 8px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid; place-items: center;
  font-size: 16px;
  z-index: 3;
  box-shadow: 0 4px 12px rgba(15,158,116,.45), inset 0 1px 0 rgba(255,255,255,.3);
  animation: kycPop .5s cubic-bezier(.34, 1.56, .64, 1) 1.2s both;
}
@keyframes kycPop {
  from { transform: scale(0) rotate(-30deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}

/* ───── 4D Button ───── */
.kyc-4d-wrap { display: inline-block; margin-top: 8px; perspective: 800px; }
.kyc-4d {
  --btn-bg: var(--accent);
  --btn-bg-2: var(--accent-strong);
  --btn-shadow: rgba(15, 23, 42, .18);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 34px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, var(--btn-bg) 0%, var(--btn-bg-2) 100%);
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  text-decoration: none;
  transform-style: preserve-3d;
  transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s cubic-bezier(.4,0,.2,1), filter .18s ease;
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,.28),
    inset 0 -2px 0 rgba(0,0,0,.18),
    0 1px 0 var(--btn-bg-2),
    0 2px 0 var(--btn-bg-2),
    0 3px 0 var(--btn-bg-2),
    0 4px 0 var(--btn-bg-2),
    0 5px 0 var(--btn-bg-2),
    0 6px 0 var(--btn-bg-2),
    0 8px 14px var(--btn-shadow),
    0 14px 28px rgba(15,23,42,.10);
}
.kyc-4d::before {
  content: '';
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 45%;
  border-radius: 13px 13px 60% 60% / 13px 13px 100% 100%;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0));
  pointer-events: none;
}
.kyc-4d:hover {
  transform: translateY(-2px) rotateX(2deg);
  filter: brightness(1.04);
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,.32),
    inset 0 -2px 0 rgba(0,0,0,.18),
    0 1px 0 var(--btn-bg-2),
    0 2px 0 var(--btn-bg-2),
    0 3px 0 var(--btn-bg-2),
    0 4px 0 var(--btn-bg-2),
    0 5px 0 var(--btn-bg-2),
    0 6px 0 var(--btn-bg-2),
    0 7px 0 var(--btn-bg-2),
    0 8px 0 var(--btn-bg-2),
    0 12px 22px var(--btn-shadow),
    0 22px 36px rgba(15,23,42,.14);
}
.kyc-4d:active {
  transform: translateY(4px) rotateX(0);
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 1px 0 var(--btn-bg-2),
    0 2px 0 var(--btn-bg-2),
    0 4px 8px var(--btn-shadow);
}
.kyc-4d:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.kyc-4d i { font-size: 1.05rem; }

/* Ghost variant for "read contract" */
.kyc-4d.ghost {
  --btn-bg: var(--surface);
  --btn-bg-2: var(--surface-2);
  color: var(--text);
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,.6),
    inset 0 -1px 0 rgba(0,0,0,.06),
    0 1px 0 var(--line),
    0 2px 0 var(--line),
    0 3px 0 var(--line),
    0 4px 0 var(--line),
    0 6px 12px rgba(15,23,42,.08),
    0 12px 24px rgba(15,23,42,.06);
}
.kyc-4d.ghost:hover {
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,.6),
    inset 0 -1px 0 rgba(0,0,0,.06),
    0 1px 0 var(--line),
    0 2px 0 var(--line),
    0 3px 0 var(--line),
    0 4px 0 var(--line),
    0 5px 0 var(--line),
    0 6px 0 var(--line),
    0 10px 20px rgba(15,23,42,.10),
    0 18px 32px rgba(15,23,42,.08);
}

/* ───── Contract modal ───── */
.kyc-modal {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  align-items: center; justify-content: center;
  z-index: 9999;
  padding: 24px;
  animation: kycFadeIn .22s ease;
}
.kyc-modal.open { display: flex; }
@keyframes kycFadeIn { from { opacity: 0; } to { opacity: 1; } }

.kyc-modal-box {
  width: 100%;
  max-width: 860px;
  max-height: 92vh;
  background: var(--surface);
  border-radius: var(--radius-xl, 18px);
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(15, 23, 42, .35);
  animation: kycSlideUp .3s cubic-bezier(.4,0,.2,1);
}
@keyframes kycSlideUp {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.kyc-modal-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  padding-top: max(14px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  flex-shrink: 0;
}
.kyc-modal-head .ic {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--accent-bg);
  color: var(--accent-strong);
  display: grid; place-items: center;
  font-size: 18px;
  flex-shrink: 0;
}
.kyc-modal-head .meta { flex: 1; min-width: 0; }
.kyc-modal-head .tt {
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 700;
  color: var(--text);
  letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kyc-modal-head .st {
  font-size: .78rem; color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kyc-modal-close {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 0;
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: all var(--t-base);
}
.kyc-modal-close:hover { background: var(--danger-bg); color: var(--danger); }

.kyc-modal-body {
  flex: 1;
  overflow: hidden;
  background: var(--surface-2);
  position: relative;
  -webkit-overflow-scrolling: touch;
}
.kyc-modal-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #fff;
}
.kyc-modal-loader {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: var(--surface-2);
  color: var(--text-soft);
  font-size: .85rem;
  z-index: 1;
  transition: opacity .25s ease;
}
.kyc-modal-loader.hidden { opacity: 0; pointer-events: none; }
.kyc-modal-loader .sp {
  width: 28px; height: 28px;
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: kycSpin .85s linear infinite;
  margin: 0 auto 10px;
}
@keyframes kycSpin { to { transform: rotate(360deg); } }

.kyc-modal-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  padding-bottom: max(11px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--surface);
  flex-shrink: 0;
  font-size: .8rem;
  color: var(--text-muted);
}
.kyc-modal-foot i { color: var(--accent); }

/* Desktop sizing */
@media (min-width: 481px) {
  .kyc-modal-frame { height: 70vh; }
}

/* Mobile — full screen sheet */
@media (max-width: 480px) {
  .kyc-min { padding: 40px 20px 60px; }
  .kyc-min h1 { font-size: 1.35rem; }
  .kyc-4d { padding: 14px 26px; font-size: .92rem; }
  .kyc-ring-stage { width: 170px; height: 170px; }
  .kyc-ring-num { font-size: 2rem; }

  .kyc-modal {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }
  .kyc-modal-box {
    max-width: 100%;
    max-height: none;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    box-shadow: none;
    animation: kycSheetUp .32s cubic-bezier(.4,0,.2,1);
  }
  @keyframes kycSheetUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .kyc-modal-head { padding: 12px 14px; padding-top: max(12px, env(safe-area-inset-top)); gap: 10px; }
  .kyc-modal-head .ic { width: 34px; height: 34px; font-size: 16px; }
  .kyc-modal-head .tt { font-size: .92rem; }
  .kyc-modal-head .st { font-size: .72rem; }
  .kyc-modal-close { width: 38px; height: 38px; }
  .kyc-modal-foot {
    padding: 10px 14px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    font-size: .76rem;
    justify-content: center;
    text-align: center;
  }
}
</style>

<body>
<?php include_once($_SERVER["DOCUMENT_ROOT"].'/business/includes/nav.php'); ?>

<div class="kyc-min">
  <div class="kyc-status var-<?= $variant ?>">
    <span class="dot"></span>
    <span><?= htmlspecialchars($statusText) ?></span>
  </div>

  <div class="kyc-ring-stage var-<?= $variant ?>" aria-hidden="true">
    <svg class="kyc-ring-svg" viewBox="0 0 200 200">
      <defs>
        <linearGradient id="kycGrad" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%"   stop-color="var(--accent)" />
          <stop offset="100%" stop-color="var(--accent-strong)" />
        </linearGradient>
      </defs>
      <circle class="kyc-ring-track" cx="100" cy="100" r="85" />
      <circle class="kyc-ring-fill"  cx="100" cy="100" r="85" style="--kyc-target: <?= number_format($ringOffset, 2, '.', '') ?>;" />
    </svg>
    <div class="kyc-ring-core">
      <div class="kyc-ring-num"><?= $progress ?>%</div>
      <div class="kyc-ring-cap"><?= htmlspecialchars($ringCap) ?></div>
    </div>
    <?php if ($verified): ?>
    <div class="kyc-ring-check"><i class="bi bi-check-lg"></i></div>
    <?php endif; ?>
  </div>

  <?php if ($verified): ?>
    <h1>Identifikatsiya tasdiqlangan</h1>
    <p class="lead"><?= htmlspecialchars($hint) ?></p>

    <?php if ($passportContract !== ''): ?>
    <div class="kyc-4d-wrap">
      <button type="button" class="kyc-4d ghost" id="kycContractBtn">
        <i class="bi bi-file-earmark-text"></i>
        Shartnomani o'qish
      </button>
    </div>
    <?php endif; ?>
  <?php else: ?>
    <h1>Identifikatsiya</h1>
    <p class="lead"><?= htmlspecialchars($hint) ?></p>

    <?php if ($clickable): ?>
    <div class="kyc-4d-wrap">
      <a href="/identification/start" class="kyc-4d">
        <i class="bi bi-shield-check"></i>
        <?= $btnLabel ?>
      </a>
    </div>
    <?php endif; ?>
  <?php endif; ?>
</div>

<?php if ($verified && $passportContract !== ''): ?>
<div class="kyc-modal" id="kycContractModal" role="dialog" aria-modal="true" aria-labelledby="kycContractTitle">
  <div class="kyc-modal-box">
    <div class="kyc-modal-head">
      <div class="ic"><i class="bi bi-file-earmark-text"></i></div>
      <div class="meta">
        <div class="tt" id="kycContractTitle">Pasport identifikatsiyasi shartnomasi</div>
        <div class="st">Tasdiqlangan shaxsiy hujjatingiz</div>
      </div>
      <button type="button" class="kyc-modal-close" id="kycContractClose" aria-label="Yopish">
        <i class="bi bi-x-lg"></i>
      </button>
    </div>
    <div class="kyc-modal-body">
      <div class="kyc-modal-loader" id="kycContractLoader">
        <div style="text-align:center;">
          <div class="sp"></div>
          Yuklanmoqda…
        </div>
      </div>
      <iframe class="kyc-modal-frame" id="kycContractFrame" src="about:blank" title="Shartnoma"></iframe>
    </div>
    <div class="kyc-modal-foot">
      <i class="bi bi-shield-check"></i>
      <span>Hujjat raqamli imzo bilan saqlanadi</span>
    </div>
  </div>
</div>

<script>
(function(){
  var btn    = document.getElementById('kycContractBtn');
  var modal  = document.getElementById('kycContractModal');
  var closer = document.getElementById('kycContractClose');
  var frame  = document.getElementById('kycContractFrame');
  var loader = document.getElementById('kycContractLoader');
  var url    = <?= json_encode($passportContract, JSON_UNESCAPED_SLASHES) ?>;

  function open() {
    modal.classList.add('open');
    document.body.style.overflow = 'hidden';
    if (frame.src === 'about:blank' || frame.dataset.loaded !== '1') {
      loader.classList.remove('hidden');
      frame.src = url;
      frame.dataset.loaded = '1';
    }
  }
  function close() {
    modal.classList.remove('open');
    document.body.style.overflow = '';
  }

  if (btn) btn.addEventListener('click', open);
  if (closer) closer.addEventListener('click', close);
  if (modal) modal.addEventListener('click', function(e){ if (e.target === modal) close(); });
  document.addEventListener('keydown', function(e){ if (e.key === 'Escape' && modal.classList.contains('open')) close(); });
  if (frame) frame.addEventListener('load', function(){
    if (frame.src !== 'about:blank' && frame.dataset.loaded === '1') loader.classList.add('hidden');
  });
})();
</script>
<?php endif; ?>

<?php include_once($_SERVER["DOCUMENT_ROOT"]."/business/includes/footer.php"); ?>
</body>
</html>
