import React from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";
import { format } from "date-fns";
import { FileText, Building2, Calendar, User, TrendingUp, DollarSign, Users, CheckCircle } from "lucide-react";

export default function ReportPDFPreview({ reportName, reportData, options = {} }) {
  const now = new Date();
  const {
    includeSummary = true,
    includeCharts = true,
    includeDetails = true,
    includeFooter = true,
  } = options;

  // Sample metrics for preview
  const metrics = {
    totalSpend: reportData?.invoices?.reduce((s, i) => s + (i.amount || 0), 0) || 125000,
    eventCount: reportData?.events?.length || 48,
    staffCount: reportData?.staff?.length || 156,
    vendorCount: reportData?.vendors?.length || 12,
    fillRate: 94.2,
    avgRate: 42.50,
  };

  return (
    <div className="bg-white border-2 border-slate-200 rounded-lg shadow-lg max-w-2xl mx-auto" style={{ aspectRatio: '8.5/11' }}>
      {/* PDF Page Container */}
      <div className="p-6 h-full flex flex-col text-sm">
        
        {/* Header */}
        <div className="flex items-start justify-between mb-4">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-[#1C323E] rounded-lg flex items-center justify-center">
              <span className="text-white font-bold text-lg">K</span>
            </div>
            <div>
              <h1 className="text-lg font-bold text-[#1C323E]">KROW</h1>
              <p className="text-[10px] text-slate-500">Workforce Control Tower</p>
            </div>
          </div>
          <div className="text-right text-[10px] text-slate-500">
            <p>Generated: {format(now, 'MMM d, yyyy h:mm a')}</p>
            <p>Report ID: RPT-{Math.random().toString(36).substr(2, 8).toUpperCase()}</p>
          </div>
        </div>

        {/* Report Title */}
        <div className="bg-gradient-to-r from-[#1C323E] to-[#0A39DF] text-white p-4 rounded-lg mb-4">
          <div className="flex items-center gap-2 mb-1">
            <FileText className="w-5 h-5" />
            <h2 className="text-base font-bold">{reportName || 'Workforce Report'}</h2>
          </div>
          <p className="text-white/80 text-xs">
            Period: {format(new Date(now.getFullYear(), now.getMonth(), 1), 'MMM d')} - {format(now, 'MMM d, yyyy')}
          </p>
        </div>

        {/* Executive Summary */}
        {includeSummary && (
          <div className="mb-4">
            <h3 className="text-xs font-bold text-slate-700 uppercase tracking-wider mb-2 flex items-center gap-1">
              <TrendingUp className="w-3 h-3" /> Executive Summary
            </h3>
            <div className="grid grid-cols-3 gap-2">
              <div className="bg-blue-50 p-2 rounded border border-blue-100">
                <p className="text-[10px] text-blue-600 font-medium">Total Spend</p>
                <p className="text-sm font-bold text-blue-700">${metrics.totalSpend.toLocaleString()}</p>
              </div>
              <div className="bg-emerald-50 p-2 rounded border border-emerald-100">
                <p className="text-[10px] text-emerald-600 font-medium">Fill Rate</p>
                <p className="text-sm font-bold text-emerald-700">{metrics.fillRate}%</p>
              </div>
              <div className="bg-purple-50 p-2 rounded border border-purple-100">
                <p className="text-[10px] text-purple-600 font-medium">Avg Rate</p>
                <p className="text-sm font-bold text-purple-700">${metrics.avgRate}/hr</p>
              </div>
            </div>
          </div>
        )}

        {/* Chart Placeholder */}
        {includeCharts && (
          <div className="mb-4">
            <h3 className="text-xs font-bold text-slate-700 uppercase tracking-wider mb-2 flex items-center gap-1">
              <DollarSign className="w-3 h-3" /> Spend Breakdown
            </h3>
            <div className="bg-slate-50 border border-slate-200 rounded p-3 h-24 flex items-center justify-center">
              <div className="flex items-end gap-1 h-16">
                {[65, 45, 80, 55, 70, 40, 85].map((h, i) => (
                  <div 
                    key={i} 
                    className="w-6 bg-gradient-to-t from-[#0A39DF] to-blue-400 rounded-t"
                    style={{ height: `${h}%` }}
                  />
                ))}
              </div>
              <div className="ml-4 text-[10px] text-slate-500">
                <p>Weekly trend</p>
                <p className="text-emerald-600">↑ 12% vs prior</p>
              </div>
            </div>
          </div>
        )}

        {/* Data Table */}
        {includeDetails && (
          <div className="mb-4 flex-1">
            <h3 className="text-xs font-bold text-slate-700 uppercase tracking-wider mb-2 flex items-center gap-1">
              <Users className="w-3 h-3" /> Detailed Breakdown
            </h3>
            <div className="border border-slate-200 rounded overflow-hidden">
              <table className="w-full text-[10px]">
                <thead className="bg-slate-100">
                  <tr>
                    <th className="text-left p-1.5 font-semibold">Category</th>
                    <th className="text-right p-1.5 font-semibold">Count</th>
                    <th className="text-right p-1.5 font-semibold">Amount</th>
                    <th className="text-right p-1.5 font-semibold">%</th>
                  </tr>
                </thead>
                <tbody>
                  {[
                    { cat: 'Kitchen Staff', count: 45, amount: 42500, pct: 34 },
                    { cat: 'Event Servers', count: 38, amount: 35200, pct: 28 },
                    { cat: 'Bartenders', count: 28, amount: 28800, pct: 23 },
                    { cat: 'Support Staff', count: 22, amount: 18500, pct: 15 },
                  ].map((row, i) => (
                    <tr key={i} className={i % 2 ? 'bg-slate-50' : ''}>
                      <td className="p-1.5">{row.cat}</td>
                      <td className="p-1.5 text-right">{row.count}</td>
                      <td className="p-1.5 text-right">${row.amount.toLocaleString()}</td>
                      <td className="p-1.5 text-right">{row.pct}%</td>
                    </tr>
                  ))}
                </tbody>
                <tfoot className="bg-slate-100 font-semibold">
                  <tr>
                    <td className="p-1.5">Total</td>
                    <td className="p-1.5 text-right">133</td>
                    <td className="p-1.5 text-right">$125,000</td>
                    <td className="p-1.5 text-right">100%</td>
                  </tr>
                </tfoot>
              </table>
            </div>
          </div>
        )}

        {/* Key Insights */}
        <div className="mb-4">
          <h3 className="text-xs font-bold text-slate-700 uppercase tracking-wider mb-2">Key Insights</h3>
          <div className="space-y-1">
            {[
              'Fill rate improved 3.2% month-over-month',
              'Kitchen staff utilization at 94% capacity',
              'Top vendor: Premier Staffing (42% of orders)',
            ].map((insight, i) => (
              <div key={i} className="flex items-center gap-1.5 text-[10px] text-slate-600">
                <CheckCircle className="w-3 h-3 text-emerald-500 flex-shrink-0" />
                {insight}
              </div>
            ))}
          </div>
        </div>

        {/* Footer */}
        {includeFooter && (
          <div className="mt-auto pt-3 border-t border-slate-200">
            <div className="flex items-center justify-between text-[9px] text-slate-400">
              <div className="flex items-center gap-2">
                <Building2 className="w-3 h-3" />
                <span>KROW Workforce Control Tower</span>
              </div>
              <span>Confidential - Internal Use Only</span>
              <span>Page 1 of 1</span>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}