@extends('layout.user')

@section('title', $copy['page_title'] ?? 'টাইপিং জব')

@section('content')
@php
  $themeFrom = (string) ($settings->icon_color ?? '#0f766e');
  $themeTo = (string) ($settings->hover_color ?? '#14b8a6');
  $rewardFormatted = number_format((float) ($progress['task_reward'] ?? 1), 2);
  $earnedFormatted = number_format((float) ($progress['earned'] ?? 0), 2);
  $remainingDisplay = (int) ($progress['remaining_display'] ?? 0);
  $taskQuotaDisplay = (int) (($progress['max_tasks'] ?? 0) > 0 ? ($progress['max_tasks'] ?? 0) : ($progress['tasks_per_verified_referral'] ?? 5));
@endphp

<style>
  .tj-shell{
    --tj-pri: {{ $themeFrom }};
    --tj-pri-2: {{ $themeTo }};
    --tj-soft: color-mix(in srgb, var(--tj-pri) 10%, white);
    --tj-soft-2: color-mix(in srgb, var(--tj-pri-2) 12%, white);
    --tj-ring: color-mix(in srgb, var(--tj-pri) 20%, white);
    --tj-shadow: color-mix(in srgb, var(--tj-pri) 18%, transparent);
    max-width:980px;
    margin:0 auto;
    padding:12px 4px 96px;
  }
  .tj-stack{display:grid;gap:16px}
  .tj-flash{
    border-radius:18px;
    padding:14px 16px;
    border:1px solid;
    font-size:13px;
    font-weight:800;
  }
  .tj-flash-success{background:#ecfdf5;border-color:#a7f3d0;color:#047857}
  .tj-flash-error{background:#fff1f2;border-color:#fecdd3;color:#be123c}
  .tj-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}
  .tj-card{
    position:relative;
    overflow:hidden;
    background:#fff;
    border-radius:24px;
    border:1px solid var(--tj-ring);
    box-shadow:0 18px 38px rgba(15,23,42,.06);
  }
  .tj-card--hero{
    padding:22px 18px;
    background:
      radial-gradient(circle at top left, rgba(255,255,255,.24), transparent 30%),
      linear-gradient(135deg, var(--tj-pri) 0%, var(--tj-pri-2) 100%);
    color:#fff;
    box-shadow:0 22px 44px var(--tj-shadow);
    text-align:center;
  }
  .tj-card--muted{
    padding:20px 18px;
    background:linear-gradient(135deg, var(--tj-soft) 0%, #fff 100%);
    text-align:center;
  }
  .tj-top-badge{
    position:absolute;
    top:14px;
    right:14px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:9px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:900;
    background:rgba(15,23,42,.16);
    border:1px solid rgba(255,255,255,.18);
    color:#fff;
  }
  .tj-card--muted .tj-top-badge{
    background:#fff;
    color:var(--tj-pri);
    border-color:var(--tj-ring);
  }
  .tj-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.2);
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em;
  }
  .tj-title{margin:16px 0 0;font-size:27px;line-height:1.14;font-weight:900}
  .tj-copy{margin:10px 0 0;font-size:14px;line-height:1.7;font-weight:700;color:rgba(255,255,255,.92);max-width:520px}
  .tj-metrics{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;justify-content:center}
  .tj-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:900;
  }
  .tj-pill--soft{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.18);color:#fff}
  .tj-pill--outline{background:#fff;border:1px solid var(--tj-ring);color:#334155}
  .tj-label{font-size:12px;font-weight:900;color:#64748b;text-transform:uppercase;letter-spacing:.08em}
  .tj-amount{margin-top:10px;font-size:34px;line-height:1;font-weight:900;color:#0f172a}
  .tj-note{margin-top:8px;font-size:13px;line-height:1.7;font-weight:700;color:#475569}
  .tj-main-grid{display:grid;grid-template-columns:minmax(0,1.12fr) 320px;gap:16px}
  .tj-panel{padding:20px 18px}
  .tj-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
  .tj-panel-title{margin:0;font-size:20px;font-weight:900;color:#0f172a}
  .tj-panel-copy{margin:8px 0 0;font-size:13px;line-height:1.7;font-weight:700;color:#64748b}
  .tj-expression{
    margin-top:18px;
    display:grid;
    place-items:center;
    min-height:108px;
    border-radius:24px;
    background:linear-gradient(135deg, var(--tj-soft) 0%, var(--tj-soft-2) 100%);
    border:1px solid var(--tj-ring);
    color:#0f172a;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.66);
  }
  .tj-expression-label{font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#64748b}
  .tj-expression-value{margin-top:10px;font-size:42px;line-height:1;font-weight:900;letter-spacing:-.04em}
  .tj-form{margin-top:18px;display:grid;gap:12px}
  .tj-input-wrap{display:grid;gap:8px}
  .tj-input-label{font-size:13px;font-weight:900;color:#334155}
  .tj-answer-input{
    width:100%;
    min-height:54px;
    border-radius:18px;
    border:1.5px solid #cbd5e1;
    background:#fff;
    padding:0 16px;
    font-size:18px;
    font-weight:900;
    color:#0f172a;
    transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
  }
  .tj-answer-input:focus{outline:none;border-color:var(--tj-pri);box-shadow:0 0 0 4px color-mix(in srgb, var(--tj-pri) 16%, white)}
  .tj-submit{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:52px;
    border:0;
    border-radius:18px;
    background:linear-gradient(135deg, var(--tj-pri) 0%, var(--tj-pri-2) 100%);
    color:#fff;
    font-size:14px;
    font-weight:900;
    box-shadow:0 16px 28px var(--tj-shadow);
  }
  .tj-state{
    margin-top:18px;
    padding:18px;
    border-radius:22px;
    border:1px dashed var(--tj-ring);
    background:linear-gradient(135deg, color-mix(in srgb, var(--tj-pri) 7%, white), #fff);
  }
  .tj-state-title{margin:0;font-size:18px;font-weight:900;color:#0f172a}
  .tj-state-copy{margin:8px 0 0;font-size:14px;line-height:1.7;font-weight:700;color:#475569}
  .tj-history-card{
    padding:20px 18px;
    display:grid;
    gap:14px;
    text-align:center;
    justify-items:center;
  }
  .tj-history-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
  .tj-history-title{margin:0;font-size:18px;font-weight:900;color:#0f172a}
  .tj-history-copy{margin:6px 0 0;font-size:13px;line-height:1.7;font-weight:700;color:#64748b}
  .tj-history-metric{
    border-radius:18px;
    border:1px solid #e2e8f0;
    background:linear-gradient(135deg, color-mix(in srgb, var(--tj-pri) 7%, white), #fff);
    padding:15px;
  }
  .tj-history-metric-label{font-size:11px;font-weight:900;color:#64748b;text-transform:uppercase;letter-spacing:.08em}
  .tj-history-metric-value{margin-top:8px;font-size:24px;font-weight:900;color:#0f172a;line-height:1}
  .tj-history-list{display:grid;gap:10px}
  .tj-history-item{
    border-radius:16px;
    border:1px solid #e2e8f0;
    background:#fff;
    padding:12px 13px;
  }
  .tj-history-item-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .tj-history-expression{font-size:14px;font-weight:900;color:#0f172a}
  .tj-history-reward{font-size:12px;font-weight:900;color:var(--tj-pri)}
  .tj-history-meta{margin-top:6px;font-size:12px;line-height:1.6;font-weight:700;color:#64748b}
  .tj-history-empty{
    padding:18px;
    border-radius:18px;
    border:1px dashed #cbd5e1;
    background:#f8fafc;
    text-align:center;
    font-size:13px;
    font-weight:800;
    color:#64748b;
  }
  .tj-history-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:auto;
    min-width:220px;
    border-radius:16px;
    border:1px solid #cbd5e1;
    background:#fff;
    padding:13px 14px;
    font-size:13px;
    font-weight:900;
    color:#334155;
    text-decoration:none !important;
  }

  @media (max-width:860px){
    .tj-grid,.tj-main-grid{grid-template-columns:1fr}
  }
  @media (max-width:520px){
    .tj-shell{padding:10px 2px 92px}
    .tj-card--hero,.tj-card--muted,.tj-panel,.tj-history-card{padding:18px 14px}
    .tj-top-badge{position:static;display:inline-flex;margin-bottom:14px}
    .tj-title{font-size:24px}
    .tj-amount{font-size:30px}
    .tj-expression-value{font-size:36px}
  }
</style>

<div class="tj-shell">
  <div class="tj-stack">
    @if(session('success'))
      <div class="tj-flash tj-flash-success">{{ session('success') }}</div>
    @endif

    @if($errors->has('answer'))
      <div class="tj-flash tj-flash-error">{{ $errors->first('answer') }}</div>
    @endif

    <div class="tj-grid">
      <div class="tj-card tj-card--hero">
        <div class="tj-top-badge">
          <i class="fa-solid fa-layer-group"></i>
          <span>{{ $remainingDisplay }} টি বাকি</span>
        </div>
        <div class="tj-kicker">
          <i class="fa-solid fa-keyboard"></i>
          <span>Typing Job</span>
        </div>
        <h1 class="tj-title">{{ $copy['page_title'] ?? 'টাইপিং জব' }}</h1>
        <div class="tj-metrics">
          <div class="tj-pill tj-pill--soft">
            <i class="fa-solid fa-circle-check"></i>
            <span>{{ $progress['completed'] }}/{{ $taskQuotaDisplay }} complete</span>
          </div>
          <div class="tj-pill tj-pill--soft">
            <i class="fa-solid fa-user-check"></i>
            <span>{{ $progress['verified_referrals_count'] }} verified referral</span>
          </div>
        </div>
      </div>

      <div class="tj-card tj-card--muted">
        <div class="tj-top-badge">
          <i class="fa-solid fa-bangladeshi-taka-sign"></i>
          <span>৳{{ $rewardFormatted }} প্রতি টাস্ক</span>
        </div>
        <div class="tj-label">{{ $copy['income_title'] ?? 'Typing Job Income' }}</div>
        <div class="tj-amount">৳{{ $earnedFormatted }}</div>
        <p class="tj-note">{{ $copy['income_note'] ?? '' }}</p>
        <div class="tj-metrics">
          <div class="tj-pill tj-pill--outline">
            <i class="fa-solid fa-users"></i>
            <span>{{ $progress['total_unlocked_tasks'] }} task unlocked</span>
          </div>
          <div class="tj-pill tj-pill--outline">
            <i class="fa-solid fa-sack-dollar"></i>
            <span>Total earned ৳{{ $earnedFormatted }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="tj-main-grid">
      <div class="tj-card">
        <div class="tj-panel">
          <div class="tj-panel-head">
            <div>
              <h2 class="tj-panel-title">{{ $copy['task_panel_title'] ?? 'আজকের টাইপিং টাস্ক' }}</h2>
            </div>
            <div class="tj-pill tj-pill--outline">
              <i class="fa-solid fa-bars-progress"></i>
              <span>{{ $progress['completed'] }}/{{ $taskQuotaDisplay }}</span>
            </div>
          </div>

          @if(!$progress['is_ready'])
            <div class="tj-state">
              <h3 class="tj-state-title">{{ $copy['state_table_not_ready_title'] ?? 'Typing Job table এখনো ready না' }}</h3>
              <p class="tj-state-copy">{{ $copy['state_table_not_ready_copy'] ?? '' }}</p>
            </div>
          @elseif(!$progress['has_verified_referral_task'])
            <div class="tj-state">
              <h3 class="tj-state-title">{{ $copy['state_no_referral_title'] ?? 'Verified referral এলে task আসবে' }}</h3>
            </div>
          @elseif($progress['is_complete'])
            <div class="tj-state">
              <h3 class="tj-state-title">{{ $copy['state_complete_title'] ?? 'Unlocked task সম্পন্ন হয়েছে' }}</h3>
              <p class="tj-state-copy">{{ $copy['state_complete_copy'] ?? '' }}</p>
            </div>
          @elseif($pendingTask)
            <div data-typing-task data-answer="{{ $pendingTask['correct_answer'] }}">
              <div class="tj-expression">
                <div>
                  <div class="tj-expression-label">Solve this math</div>
                  <div class="tj-expression-value">{{ $pendingTask['expression'] }}</div>
                </div>
              </div>

              <form method="POST" action="{{ route('typing-job.submit') }}" class="tj-form" novalidate>
                @csrf
                <input type="hidden" name="task_token" value="{{ $pendingTask['token'] }}">

                <div class="tj-input-wrap">
                  <label class="tj-input-label" for="typing_job_answer">{{ $copy['answer_label'] ?? 'সঠিক উত্তর লিখুন' }}</label>
                  <input
                    id="typing_job_answer"
                    type="number"
                    step="1"
                    name="answer"
                    class="tj-answer-input"
                    inputmode="numeric"
                    autocomplete="off"
                    value="{{ old('answer') }}"
                    placeholder="{{ $copy['answer_placeholder'] ?? 'উত্তর লিখুন' }}"
                    required
                  >
                </div>

                <button type="submit" class="tj-submit">
                  <i class="fa-solid fa-check"></i>
                  <span>{{ $copy['submit_button_label'] ?? 'উত্তর submit করুন' }}</span>
                </button>
              </form>
            </div>
          @endif
        </div>
      </div>

      <div class="tj-card">
        <div class="tj-history-card">
          <a href="{{ route('typing-job.history') }}" class="tj-history-link">
            <i class="fa-solid fa-table-list"></i>
            <span>{{ $copy['history_link_label'] ?? 'Full History দেখুন' }}</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

@endsection
