import React from 'react';
import { Proposal, LPPMAnnouncement, UserRole } from '../types';
import { formatRupiah, getProposalStatusBadge } from '../data/storage';
import {
  FileSpreadsheet,
  TrendingUp,
  Award,
  Users,
  BookOpen,
  DollarSign,
  CheckCircle2,
  Clock,
  Sparkles,
  ArrowUpRight,
  ShieldCheck,
  ChevronRight,
  Layers,
  FileCheck2,
  ExternalLink,
  CalendarDays
} from 'lucide-react';

interface DashboardViewProps {
  proposals: Proposal[];
  announcements: LPPMAnnouncement[];
  userRole: UserRole;
  onSelectProposal: (proposal: Proposal) => void;
  onOpenNewProposal: () => void;
  onGoToTab: (tab: 'penelitian' | 'pengabdian' | 'review' | 'monev' | 'documents') => void;
}

export const DashboardView: React.FC<DashboardViewProps> = ({
  proposals,
  announcements,
  userRole,
  onSelectProposal,
  onOpenNewProposal,
  onGoToTab,
}) => {
  // Compute Key Metrics
  const totalCount = proposals.length;
  const researchCount = proposals.filter((p) => p.type === 'penelitian').length;
  const communityCount = proposals.filter((p) => p.type === 'pengabdian').length;
  
  const approvedProposals = proposals.filter(
    (p) => p.status === 'APPROVED' || p.status === 'PROGRESS_REPORTED' || p.status === 'FINAL_REPORTED' || p.status === 'COMPLETED'
  );
  
  const inReviewCount = proposals.filter((p) => p.status === 'IN_REVIEW' || p.status === 'SUBMITTED').length;
  
  const totalApprovedBudget = approvedProposals.reduce((sum, p) => sum + (p.approvedBudget || p.requestedBudget), 0);
  const totalRequestedBudget = proposals.reduce((sum, p) => sum + p.requestedBudget, 0);

  // Compute all documented outputs
  const allOutputs = proposals.flatMap((p) => p.actualOutputs);
  const scopusCount = allOutputs.filter((o) => o.type.includes('Scopus')).length;
  const sintaCount = allOutputs.filter((o) => o.type.includes('SINTA')).length;
  const hkiCount = allOutputs.filter((o) => o.type.includes('HKI') || o.type.includes('Paten')).length;
  const bookCount = allOutputs.filter((o) => o.type.includes('Buku')).length;
  const ttgCount = allOutputs.filter((o) => o.type.includes('Prototipe') || o.type.includes('TTG')).length;

  // Faculty distribution
  const facultyCounts: { [faculty: string]: number } = {};
  proposals.forEach((p) => {
    const fac = p.leader.faculty;
    facultyCounts[fac] = (facultyCounts[fac] || 0) + 1;
  });

  // Recent submitted or updated proposals
  const recentProposals = [...proposals].slice(0, 4);

  return (
    <div className="space-y-6">
      {/* Welcome & Role context greeting banner */}
      <div className="bg-gradient-to-r from-blue-900 via-indigo-900 to-slate-900 text-white rounded-2xl p-6 sm:p-8 shadow-sm relative overflow-hidden">
        <div className="relative z-10 max-w-3xl">
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-800/60 border border-blue-700/50 text-blue-200 text-xs font-medium mb-3">
            <Sparkles className="w-3.5 h-3.5 text-blue-300" />
            Lembaga Penelitian dan Pengabdian kepada Masyarakat (LPPM)
          </div>
          <h1 className="text-2xl sm:text-3xl font-bold tracking-tight text-white mb-2">
            Sistem Informasi Manajemen Penelitian & Pengabdian
          </h1>
          <p className="text-slate-300 text-sm leading-relaxed mb-6">
            Pengelolaan end-to-end usulan proposal hibah internal dan eksternal, penugasan reviewer, monitoring evaluasi berkala (Monev 70% & 100%), pencatatan luaran publikasi SINTA/Scopus, sertifikat HKI, dan teknologi tepat guna kampus.
          </p>

          <div className="flex flex-wrap items-center gap-3">
            <button
              onClick={onOpenNewProposal}
              className="bg-blue-500 hover:bg-blue-400 text-white text-sm font-semibold px-4 py-2.5 rounded-xl flex items-center gap-2 transition-all cursor-pointer shadow-md"
            >
              <ArrowUpRight className="w-4 h-4" />
              Ajukan Usulan Baru TA 2025/2026
            </button>
            <button
              onClick={() => onGoToTab('review')}
              className="bg-white/10 hover:bg-white/20 text-white text-sm font-medium px-4 py-2.5 rounded-xl flex items-center gap-2 transition-all cursor-pointer border border-white/20 backdrop-blur-xs"
            >
              <CheckCircle2 className="w-4 h-4 text-emerald-400" />
              Periksa Desk Evaluasi Usulan ({inReviewCount})
            </button>
          </div>
        </div>

        {/* Decorative background elements */}
        <div className="absolute right-0 bottom-0 translate-x-12 translate-y-12 opacity-10 pointer-events-none">
          <Award className="w-96 h-96 text-white" />
        </div>
      </div>

      {/* Primary KPI Statistics Grid */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        {/* Card 1: Total Usulan */}
        <div className="bg-white p-5 rounded-xl border border-slate-200 shadow-xs flex flex-col justify-between">
          <div className="flex items-center justify-between">
            <span className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Total Usulan Masuk</span>
            <div className="w-9 h-9 rounded-lg bg-blue-50 text-blue-600 flex items-center justify-center">
              <FileSpreadsheet className="w-5 h-5" />
            </div>
          </div>
          <div className="my-3">
            <div className="text-3xl font-extrabold text-slate-900">{totalCount}</div>
            <div className="text-xs text-slate-500 mt-1 flex items-center gap-2">
              <span className="font-semibold text-blue-600">{researchCount} Penelitian</span>
              <span>•</span>
              <span className="font-semibold text-emerald-600">{communityCount} Pengabdian</span>
            </div>
          </div>
          <div className="w-full bg-slate-100 rounded-full h-1.5 overflow-hidden flex">
            <div
              className="bg-blue-600 h-1.5"
              style={{ width: `${totalCount ? (researchCount / totalCount) * 100 : 50}%` }}
              title="Penelitian"
            ></div>
            <div
              className="bg-emerald-500 h-1.5"
              style={{ width: `${totalCount ? (communityCount / totalCount) * 100 : 50}%` }}
              title="Pengabdian"
            ></div>
          </div>
        </div>

        {/* Card 2: Didanai / Lolos */}
        <div className="bg-white p-5 rounded-xl border border-slate-200 shadow-xs flex flex-col justify-between">
          <div className="flex items-center justify-between">
            <span className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Usulan Didanai / Lolos</span>
            <div className="w-9 h-9 rounded-lg bg-emerald-50 text-emerald-600 flex items-center justify-center">
              <CheckCircle2 className="w-5 h-5" />
            </div>
          </div>
          <div className="my-3">
            <div className="text-3xl font-extrabold text-slate-900">{approvedProposals.length}</div>
            <div className="text-xs text-slate-500 mt-1">
              Rasio Lolos Seleksi: <span className="font-semibold text-emerald-700">{totalCount ? Math.round((approvedProposals.length / totalCount) * 100) : 0}%</span>
            </div>
          </div>
          <div className="text-xs text-emerald-700 bg-emerald-50 px-2 py-1 rounded-md flex items-center gap-1 font-medium">
            <TrendingUp className="w-3.5 h-3.5" />
            Dalam fase pelaksanaan & monev
          </div>
        </div>

        {/* Card 3: Serapan Dana LPPM */}
        <div className="bg-white p-5 rounded-xl border border-slate-200 shadow-xs flex flex-col justify-between">
          <div className="flex items-center justify-between">
            <span className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Pagu Dana Disetujui</span>
            <div className="w-9 h-9 rounded-lg bg-amber-50 text-amber-600 flex items-center justify-center">
              <DollarSign className="w-5 h-5" />
            </div>
          </div>
          <div className="my-3">
            <div className="text-2xl font-extrabold text-slate-900 tracking-tight">{formatRupiah(totalApprovedBudget)}</div>
            <div className="text-xs text-slate-500 mt-1">
              Dari usulan awal: <span className="text-slate-700 font-medium">{formatRupiah(totalRequestedBudget)}</span>
            </div>
          </div>
          <div className="text-xs text-slate-500 flex items-center justify-between">
            <span>Efisiensi Anggaran:</span>
            <span className="font-semibold text-slate-800">
              {totalRequestedBudget > 0 ? `${Math.round((totalApprovedBudget / totalRequestedBudget) * 100)}% Realisasi` : '100%'}
            </span>
          </div>
        </div>

        {/* Card 4: Capaian Luaran */}
        <div className="bg-white p-5 rounded-xl border border-slate-200 shadow-xs flex flex-col justify-between">
          <div className="flex items-center justify-between">
            <span className="text-xs font-semibold text-slate-500 uppercase tracking-wider">Luaran Tervalidasi</span>
            <div className="w-9 h-9 rounded-lg bg-indigo-50 text-indigo-600 flex items-center justify-center">
              <Award className="w-5 h-5" />
            </div>
          </div>
          <div className="my-3">
            <div className="text-3xl font-extrabold text-slate-900">{allOutputs.length}</div>
            <div className="text-xs text-slate-500 mt-1 flex flex-wrap gap-1">
              <span className="bg-slate-100 px-1.5 py-0.5 rounded text-slate-700">{scopusCount} Scopus</span>
              <span className="bg-slate-100 px-1.5 py-0.5 rounded text-slate-700">{sintaCount} SINTA</span>
              <span className="bg-slate-100 px-1.5 py-0.5 rounded text-slate-700">{hkiCount} HKI</span>
            </div>
          </div>
          <button
            onClick={() => onGoToTab('monev')}
            className="text-xs text-indigo-700 font-semibold flex items-center justify-between hover:underline cursor-pointer"
          >
            <span>Lihat Galeri Luaran</span>
            <ChevronRight className="w-3.5 h-3.5" />
          </button>
        </div>
      </div>

      {/* Middle Section: Workflow Stages & Distribution */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Left 2 Cols: LPPM Lifecycle Tracker & Recent Proposals */}
        <div className="lg:col-span-2 space-y-6">
          {/* Institutional Lifecycle steps */}
          <div className="bg-white p-5 rounded-xl border border-slate-200 shadow-xs">
            <div className="flex items-center justify-between mb-4">
              <div>
                <h2 className="text-base font-bold text-slate-900">Siklus Manajemen Hibah LPPM</h2>
                <p className="text-xs text-slate-500">Alur standar pengusulan, seleksi, hingga pelaporan luaran</p>
              </div>
              <span className="text-xs bg-blue-50 text-blue-700 font-semibold px-2.5 py-1 rounded-full border border-blue-200">
                TA 2025/2026 Ganjil
              </span>
            </div>

            <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 text-xs">
              <div className="bg-slate-50 p-3 rounded-lg border border-slate-200">
                <div className="font-semibold text-blue-900 mb-1 flex items-center gap-1.5">
                  <span className="w-5 h-5 rounded-full bg-blue-600 text-white flex items-center justify-center text-[10px]">1</span>
                  Call for Proposals
                </div>
                <p className="text-slate-500 text-[11px] leading-relaxed">Pengunggahan proposal online, pengisian RAB & susunan tim peneliti.</p>
                <div className="mt-2 text-emerald-700 font-medium text-[11px] flex items-center gap-1">
                  <CheckCircle2 className="w-3 h-3" /> Sedang Aktif
                </div>
              </div>

              <div className="bg-slate-50 p-3 rounded-lg border border-slate-200">
                <div className="font-semibold text-slate-900 mb-1 flex items-center gap-1.5">
                  <span className="w-5 h-5 rounded-full bg-slate-700 text-white flex items-center justify-center text-[10px]">2</span>
                  Desk Evaluation
                </div>
                <p className="text-slate-500 text-[11px] leading-relaxed">Penilaian oleh 2 reviewer independen menggunakan rubrik standar LPPM.</p>
                <div className="mt-2 text-amber-700 font-medium text-[11px] flex items-center gap-1">
                  <Clock className="w-3 h-3" /> {inReviewCount} Usulan Menunggu
                </div>
              </div>

              <div className="bg-slate-50 p-3 rounded-lg border border-slate-200">
                <div className="font-semibold text-slate-900 mb-1 flex items-center gap-1.5">
                  <span className="w-5 h-5 rounded-full bg-slate-700 text-white flex items-center justify-center text-[10px]">3</span>
                  Penetapan & Kontrak
                </div>
                <p className="text-slate-500 text-[11px] leading-relaxed">Penerbitan SK Rektor, penandatanganan SPK, pencairan dana tahap I (70%).</p>
                <div className="mt-2 text-slate-600 font-medium text-[11px] flex items-center gap-1">
                  <FileCheck2 className="w-3 h-3" /> {approvedProposals.length} Berkontrak
                </div>
              </div>

              <div className="bg-slate-50 p-3 rounded-lg border border-slate-200">
                <div className="font-semibold text-slate-900 mb-1 flex items-center gap-1.5">
                  <span className="w-5 h-5 rounded-full bg-slate-700 text-white flex items-center justify-center text-[10px]">4</span>
                  Monev & Laporan Akhir
                </div>
                <p className="text-slate-500 text-[11px] leading-relaxed">Presentasi monev lapangan, laporan akhir 100%, pencairan tahap II & validasi luaran.</p>
                <div className="mt-2 text-indigo-700 font-medium text-[11px] flex items-center gap-1">
                  <Award className="w-3 h-3" /> {allOutputs.length} Luaran
                </div>
              </div>
            </div>
          </div>

          {/* Recent Proposals Table */}
          <div className="bg-white rounded-xl border border-slate-200 shadow-xs overflow-hidden">
            <div className="p-5 border-b border-slate-200 flex items-center justify-between">
              <div>
                <h2 className="text-base font-bold text-slate-900">Usulan Penelitian & Pengabdian Terkini</h2>
                <p className="text-xs text-slate-500">Daftar berkas usulan terbaru yang terdaftar di database LPPM</p>
              </div>
              <div className="flex items-center gap-2">
                <button
                  onClick={() => onGoToTab('penelitian')}
                  className="text-xs font-semibold text-blue-600 hover:text-blue-800 cursor-pointer"
                >
                  Lihat Semua Penelitian →
                </button>
              </div>
            </div>

            <div className="divide-y divide-slate-200">
              {recentProposals.map((prop) => {
                const badge = getProposalStatusBadge(prop.status);
                const isResearch = prop.type === 'penelitian';
                return (
                  <div
                    key={prop.id}
                    onClick={() => onSelectProposal(prop)}
                    className="p-4 sm:p-5 hover:bg-slate-50/80 transition-colors cursor-pointer flex flex-col sm:flex-row sm:items-center justify-between gap-4"
                  >
                    <div className="space-y-1.5 flex-1 min-w-0">
                      <div className="flex items-center gap-2 flex-wrap">
                        <span
                          className={`text-[11px] font-semibold px-2 py-0.5 rounded-md ${
                            isResearch
                              ? 'bg-blue-100 text-blue-800'
                              : 'bg-emerald-100 text-emerald-800'
                          }`}
                        >
                          {isResearch ? 'Penelitian' : 'Pengabdian (PKM)'}
                        </span>
                        <span className="text-xs text-slate-500 font-mono">{prop.code}</span>
                        <span className={`text-[11px] font-medium px-2 py-0.5 rounded-full border ${badge.bg} ${badge.color} ${badge.border}`}>
                          {badge.label}
                        </span>
                      </div>
                      <h4 className="text-sm font-semibold text-slate-900 line-clamp-1 hover:text-blue-600 transition-colors">
                        {prop.title}
                      </h4>
                      <p className="text-xs text-slate-500 flex items-center gap-2 flex-wrap">
                        <span className="font-medium text-slate-700">{prop.leader.name}</span>
                        <span>•</span>
                        <span>{prop.leader.department}</span>
                        <span>•</span>
                        <span className="text-slate-600 font-medium">Usulan: {formatRupiah(prop.requestedBudget)}</span>
                      </p>
                    </div>

                    <div className="flex items-center gap-3 shrink-0 self-end sm:self-center">
                      <div className="text-right hidden sm:block">
                        <div className="text-xs font-semibold text-slate-900">
                          TKT: {prop.tktCurrent} → {prop.tktTarget}
                        </div>
                        <div className="text-[11px] text-slate-500">{prop.academicYear}</div>
                      </div>
                      <button className="text-slate-400 hover:text-blue-600 p-1.5 rounded-lg hover:bg-blue-50 transition-colors">
                        <ChevronRight className="w-5 h-5" />
                      </button>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>

        {/* Right 1 Col: LPPM Announcements & Faculty Distribution */}
        <div className="space-y-6">
          {/* Announcements Widget */}
          <div className="bg-white p-5 rounded-xl border border-slate-200 shadow-xs">
            <div className="flex items-center justify-between mb-4">
              <h2 className="text-base font-bold text-slate-900 flex items-center gap-2">
                <CalendarDays className="w-4 h-4 text-blue-600" />
                Pengumuman LPPM
              </h2>
              <span className="text-[11px] text-slate-500 font-medium">Terbaru</span>
            </div>

            <div className="space-y-3">
              {announcements.map((ann) => (
                <div
                  key={ann.id}
                  className={`p-3.5 rounded-lg border text-xs ${
                    ann.isUrgent
                      ? 'bg-amber-50/70 border-amber-200 text-amber-900'
                      : 'bg-slate-50 border-slate-200 text-slate-800'
                  }`}
                >
                  <div className="flex items-center justify-between gap-2 mb-1">
                    <span
                      className={`text-[10px] font-bold px-1.5 py-0.5 rounded ${
                        ann.isUrgent
                          ? 'bg-amber-200 text-amber-900'
                          : 'bg-blue-100 text-blue-800'
                      }`}
                    >
                      {ann.category}
                    </span>
                    <span className="text-[10px] text-slate-500">{ann.date}</span>
                  </div>
                  <h5 className="font-semibold text-slate-900 mb-1 leading-snug">{ann.title}</h5>
                  <p className="text-slate-600 text-[11px] line-clamp-3 leading-relaxed">{ann.content}</p>
                </div>
              ))}
            </div>
          </div>

          {/* Faculty Contribution Card */}
          <div className="bg-white p-5 rounded-xl border border-slate-200 shadow-xs">
            <h2 className="text-base font-bold text-slate-900 mb-1 flex items-center gap-2">
              <Layers className="w-4 h-4 text-indigo-600" />
              Sebaran Usulan per Fakultas
            </h2>
            <p className="text-xs text-slate-500 mb-4">Partisipasi dosen dan peneliti berdasarkan unit kerja</p>

            <div className="space-y-2.5">
              {Object.entries(facultyCounts).map(([fac, count]) => {
                const percentage = totalCount > 0 ? Math.round((count / totalCount) * 100) : 0;
                return (
                  <div key={fac} className="text-xs">
                    <div className="flex justify-between font-medium text-slate-700 mb-1">
                      <span className="truncate pr-2">{fac}</span>
                      <span className="shrink-0 font-bold text-slate-900">{count} Usulan ({percentage}%)</span>
                    </div>
                    <div className="w-full bg-slate-100 rounded-full h-2 overflow-hidden">
                      <div
                        className="bg-indigo-600 h-2 rounded-full transition-all"
                        style={{ width: `${percentage}%` }}
                      ></div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          {/* Quick Help & Download Panduan */}
          <div className="bg-gradient-to-br from-blue-50 to-indigo-50 border border-blue-200/70 p-4 rounded-xl text-xs">
            <div className="flex items-center gap-2 font-bold text-blue-900 mb-1.5">
              <BookOpen className="w-4 h-4 text-blue-600" />
              Panduan Panduan Penelitian LPPM 2025
            </div>
            <p className="text-slate-600 text-[11px] mb-3 leading-relaxed">
              Format proposal mengikuti standar DRTPM / BIMA: Maksimal 20 halaman, kelengkapan surat pernyataan mitra ber-MOU, dan rincian RAB dengan Standar Biaya Masukan (SBM).
            </p>
            <button
              onClick={() => onGoToTab('documents')}
              className="w-full bg-white hover:bg-blue-600 hover:text-white text-blue-700 font-semibold py-2 px-3 rounded-lg border border-blue-300 transition-colors text-center cursor-pointer"
            >
              Lihat Format Template Dokumen Resmi
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};