@extends('layouts.app')

@section('title', '연구개발 대시보드')

@section('content')
<!-- 페이지 헤더 -->
<div class="flex justify-between items-center mb-6">
    <h1 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
        <i class="ri-flask-line text-purple-600"></i>
        연구개발 대시보드
    </h1>
    <div class="flex gap-2">
        <a href="{{ route('rd.ai-quotation.index') }}" class="bg-white hover:bg-gray-100 text-gray-700 px-4 py-2 rounded-lg border transition">
            견적 목록
        </a>
        <a href="{{ route('rd.ai-quotation.create') }}" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg transition">
            + AI 견적 생성
        </a>
    </div>
</div>

<!-- 통계 카드 -->
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
    <!-- 전체 -->
    <div class="bg-white rounded-lg shadow-sm p-5">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm text-gray-500 mb-1">전체 견적</p>
                <p class="text-3xl font-bold text-gray-800">{{ $dashboard['stats']['total'] }}</p>
            </div>
            <div class="w-11 h-11 bg-purple-100 rounded-full flex items-center justify-center text-purple-600">
                <i class="ri-file-list-3-line text-xl"></i>
            </div>
        </div>
    </div>

    <!-- 완료 -->
    <div class="bg-white rounded-lg shadow-sm p-5">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm text-gray-500 mb-1">분석 완료</p>
                <p class="text-3xl font-bold text-green-600">{{ $dashboard['stats']['completed'] }}</p>
            </div>
            <div class="w-11 h-11 bg-green-100 rounded-full flex items-center justify-center text-green-600">
                <i class="ri-check-double-line text-xl"></i>
            </div>
        </div>
    </div>

    <!-- 분석중 -->
    <div class="bg-white rounded-lg shadow-sm p-5">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm text-gray-500 mb-1">분석중</p>
                <p class="text-3xl font-bold text-blue-600">{{ $dashboard['stats']['processing'] }}</p>
            </div>
            <div class="w-11 h-11 bg-blue-100 rounded-full flex items-center justify-center text-blue-600">
                <i class="ri-loader-4-line text-xl"></i>
            </div>
        </div>
    </div>

    <!-- 실패 -->
    <div class="bg-white rounded-lg shadow-sm p-5">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm text-gray-500 mb-1">실패</p>
                <p class="text-3xl font-bold text-red-600">{{ $dashboard['stats']['failed'] }}</p>
            </div>
            <div class="w-11 h-11 bg-red-100 rounded-full flex items-center justify-center text-red-600">
                <i class="ri-error-warning-line text-xl"></i>
            </div>
        </div>
    </div>
</div>

<!-- R&D 메뉴 카드 -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
    <!-- AI 견적 엔진 -->
    <a href="{{ route('rd.ai-quotation.index') }}" class="bg-white rounded-lg shadow-sm p-6 hover:shadow-md transition group">
        <div class="flex items-start gap-4">
            <div class="w-14 h-14 bg-gradient-to-br from-purple-500 to-indigo-600 rounded-xl flex items-center justify-center text-white shrink-0">
                <i class="ri-robot-line text-2xl"></i>
            </div>
            <div>
                <h3 class="text-lg font-semibold text-gray-800 group-hover:text-purple-600 transition">AI 견적 엔진</h3>
                <p class="text-sm text-gray-500 mt-1">인터뷰 내용을 AI가 분석하여 SAM 표준 견적서를 자동 생성합니다.</p>
                <div class="flex gap-2 mt-3">
                    <span class="px-2 py-0.5 bg-purple-50 text-purple-600 text-xs rounded-full">Gemini</span>
                    <span class="px-2 py-0.5 bg-blue-50 text-blue-600 text-xs rounded-full">Claude</span>
                    <span class="px-2 py-0.5 bg-green-50 text-green-600 text-xs rounded-full">Phase 1</span>
                </div>
            </div>
        </div>
    </a>

    <!-- AI 나레이션 제작 -->
    <a href="{{ route('rd.cm-song.index') }}" class="bg-white rounded-lg shadow-sm p-6 hover:shadow-md transition group">
        <div class="flex items-start gap-4">
            <div class="w-14 h-14 bg-gradient-to-br from-indigo-500 to-violet-600 rounded-xl flex items-center justify-center text-white shrink-0">
                <i class="ri-music-2-line text-2xl"></i>
            </div>
            <div>
                <h3 class="text-lg font-semibold text-gray-800 group-hover:text-indigo-600 transition">AI 나레이션 제작</h3>
                <p class="text-sm text-gray-500 mt-1">회사명과 업종을 입력하면 AI가 나레이션을 작성하고 목소리를 입혀줍니다.</p>
                <div class="flex gap-2 mt-3">
                    <span class="px-2 py-0.5 bg-purple-50 text-purple-600 text-xs rounded-full">Gemini TTS</span>
                    <span class="px-2 py-0.5 bg-indigo-50 text-indigo-600 text-xs rounded-full">음성 생성</span>
                </div>
            </div>
        </div>
    </a>

    <!-- 모듈 카탈로그 (Phase 2) -->
    <div class="bg-white rounded-lg shadow-sm p-6 opacity-60">
        <div class="flex items-start gap-4">
            <div class="w-14 h-14 bg-gradient-to-br from-gray-400 to-gray-500 rounded-xl flex items-center justify-center text-white shrink-0">
                <i class="ri-apps-2-line text-2xl"></i>
            </div>
            <div>
                <h3 class="text-lg font-semibold text-gray-800">모듈 카탈로그 관리</h3>
                <p class="text-sm text-gray-500 mt-1">SAM 모듈 카탈로그를 관리하고 AI 프롬프트에 반영합니다.</p>
                <div class="flex gap-2 mt-3">
                    <span class="px-2 py-0.5 bg-gray-100 text-gray-500 text-xs rounded-full">Phase 3 예정</span>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 최근 견적 요청 -->
<div class="bg-white rounded-lg shadow-sm">
    <div class="px-6 py-4 border-b border-gray-100 flex justify-between items-center">
        <h2 class="text-lg font-semibold text-gray-800">최근 AI 견적 요청</h2>
        <a href="{{ route('rd.ai-quotation.index') }}" class="text-sm text-purple-600 hover:text-purple-800">전체 보기 →</a>
    </div>
    <div class="divide-y divide-gray-50">
        @forelse($dashboard['recent'] as $quotation)
            <a href="{{ route('rd.ai-quotation.show', $quotation->id) }}" class="block px-6 py-4 hover:bg-gray-50 transition">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-3">
                        <span class="badge {{ $quotation->status_color }} badge-sm">{{ $quotation->status_label }}</span>
                        <span class="font-medium text-gray-800">{{ $quotation->title }}</span>
                    </div>
                    <div class="flex items-center gap-4 text-sm text-gray-500">
                        <span>{{ $quotation->ai_provider }}</span>
                        <span>{{ $quotation->creator?->name ?? '-' }}</span>
                        <span>{{ $quotation->created_at->format('m/d H:i') }}</span>
                    </div>
                </div>
            </a>
        @empty
            <div class="px-6 py-12 text-center text-gray-400">
                <i class="ri-robot-line text-4xl mb-2 block"></i>
                <p>아직 AI 견적 요청이 없습니다.</p>
                <a href="{{ route('rd.ai-quotation.create') }}" class="text-purple-600 hover:text-purple-800 text-sm mt-2 inline-block">
                    첫 번째 AI 견적을 생성해보세요 →
                </a>
            </div>
        @endforelse
    </div>
</div>
@endsection