@extends('layouts.app')

@section('title', 'Dashboard — Financial OS')

@section('content')
@php $user = Auth::user(); @endphp

{{-- Welcome --}}
<div style="margin-bottom:32px">
    <h1 style="font-size:28px;font-weight:700;color:var(--text);letter-spacing:-.5px;margin-bottom:4px">
        Welcome back, {{ explode(' ', trim($user->full_name))[0] }}
    </h1>
    <p style="font-size:14px;color:var(--text-secondary)">Your Financial Command Center is ready.</p>
</div>

{{-- Quick Stats --}}
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:32px">
    <div style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px">
        <div style="display:flex;align-items:center;gap:12px;margin-bottom:12px">
            <span style="width:10px;height:10px;border-radius:50%;background:var(--brand);box-shadow:0 0 8px var(--brand)"></span>
            <span style="font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);font-weight:600">Base Currency</span>
        </div>
        <p style="font-size:32px;font-weight:700;color:var(--text);font-family:'DM Mono',monospace">{{ $user->base_currency }}</p>
    </div>
    
    <div style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px">
        <div style="display:flex;align-items:center;gap:12px;margin-bottom:12px">
            <span style="width:10px;height:10px;border-radius:50%;background:var(--brand);box-shadow:0 0 8px var(--brand)"></span>
            <span style="font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);font-weight:600">Account Status</span>
        </div>
        <p style="font-size:32px;font-weight:700;color:var(--brand);font-family:'DM Mono',monospace">Active</p>
    </div>
    
    <div style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px">
        <div style="display:flex;align-items:center;gap:12px;margin-bottom:12px">
            <span style="width:10px;height:10px;border-radius:50%;background:var(--brand);box-shadow:0 0 8px var(--brand)"></span>
            <span style="font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);font-weight:600">Member Since</span>
        </div>
        <p style="font-size:32px;font-weight:700;color:var(--text);font-family:'DM Mono',monospace">{{ $user->created_at->format('M Y') }}</p>
    </div>
    
    <div style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px">
        <div style="display:flex;align-items:center;gap:12px;margin-bottom:12px">
            <span style="width:10px;height:10px;border-radius:50%;background:var(--brand);box-shadow:0 0 8px var(--brand)"></span>
            <span style="font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);font-weight:600">Plan</span>
        </div>
        <p style="font-size:32px;font-weight:700;color:var(--text);font-family:'DM Mono',monospace">
            {{ optional($user->tenant)->subscription_status === 'active' ? 'Premium' : 'Free' }}
        </p>
    </div>
</div>

{{-- Quick Actions --}}
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:32px">
    <a href="{{ route('cashflow.index') }}" style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;text-decoration:none;transition:all var(--transition)"
       onmouseover="this.style.borderColor='var(--brand)';this.style.transform='translateY(-2px)'"
       onmouseout="this.style.borderColor='var(--border)';this.style.transform='none'">
        <svg viewBox="0 0 24 24" fill="none" stroke="var(--brand)" stroke-width="1.5" style="width:24px;height:24px;margin-bottom:8px"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></svg>
        <div style="font-size:14px;font-weight:600;color:var(--text)">Add Transaction</div>
    </a>
    
    <a href="{{ route('budgets') }}" style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;text-decoration:none;transition:all var(--transition)"
       onmouseover="this.style.borderColor='var(--brand)';this.style.transform='translateY(-2px)'"
       onmouseout="this.style.borderColor='var(--border)';this.style.transform='none'">
        <svg viewBox="0 0 24 24" fill="none" stroke="var(--brand)" stroke-width="1.5" style="width:24px;height:24px;margin-bottom:8px"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></svg>
        <div style="font-size:14px;font-weight:600;color:var(--text)">Budget Planner</div>
    </a>
    
    <a href="{{ route('aiassistant') }}" style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;text-decoration:none;transition:all var(--transition)"
       onmouseover="this.style.borderColor='var(--brand)';this.style.transform='translateY(-2px)'"
       onmouseout="this.style.borderColor='var(--border)';this.style.transform='none'">
        <svg viewBox="0 0 24 24" fill="none" stroke="var(--brand)" stroke-width="1.5" style="width:24px;height:24px;margin-bottom:8px"><path d="M12 2a7 7 0 0 1 7 7c0 2.38-1.19 4.47-3 5.74V17a2 2 0 0 1-2 2H10a2 2 0 0 1-2-2v-2.26C6.19 13.47 5 11.38 5 9a7 7 0 0 1 7-7z"/><path d="M10 21h4"/></svg>
        <div style="font-size:14px;font-weight:600;color:var(--text)">AI Copilot</div>
    </a>
    
    <a href="{{ route('reports') }}" style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;text-decoration:none;transition:all var(--transition)"
       onmouseover="this.style.borderColor='var(--brand)';this.style.transform='translateY(-2px)'"
       onmouseout="this.style.borderColor='var(--border)';this.style.transform='none'">
        <svg viewBox="0 0 24 24" fill="none" stroke="var(--brand)" stroke-width="1.5" style="width:24px;height:24px;margin-bottom:8px"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/></svg>
        <div style="font-size:14px;font-weight:600;color:var(--text)">Reports</div>
    </a>
</div>
@endsection