'use client';

import { useState } from 'react';
import { Download, Calendar } from 'lucide-react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';
import { formatCurrency } from '@/lib/utils';

const revenueByRoute = [
  { route: 'Addis - Djibouti', revenue: 125000000 },
  { route: 'Addis - Dire Dawa', revenue: 85000000 },
  { route: 'Dire Dawa - Djibouti', revenue: 45000000 },
];

const bookingsByClass = [
  { name: 'Economy Regular', value: 65, color: '#3b82f6' },
  { name: 'Economy Bed', value: 25, color: '#10b981' },
  { name: 'VIP Bed', value: 10, color: '#f59e0b' },
];

const occupancyData = [
  { month: 'Jan', rate: 72 },
  { month: 'Feb', rate: 78 },
  { month: 'Mar', rate: 85 },
  { month: 'Apr', rate: 82 },
  { month: 'May', rate: 88 },
  { month: 'Jun', rate: 91 },
];

export default function ReportsPage() {
  const [dateRange, setDateRange] = useState('last-30-days');

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">Reports & Analytics</h1>
          <p className="text-gray-600">View detailed reports and analytics</p>
        </div>
        <div className="flex gap-2">
          <select className="input w-48" value={dateRange} onChange={(e) => setDateRange(e.target.value)}>
            <option value="last-7-days">Last 7 Days</option>
            <option value="last-30-days">Last 30 Days</option>
            <option value="last-90-days">Last 90 Days</option>
            <option value="custom">Custom Range</option>
          </select>
          <button className="btn btn-primary flex items-center gap-2">
            <Download className="h-4 w-4" />
            Export Report
          </button>
        </div>
      </div>

      <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
        <div className="card">
          <h3 className="mb-4 text-lg font-semibold text-gray-900">Revenue by Route</h3>
          <ResponsiveContainer width="100%" height={300}>
            <BarChart data={revenueByRoute}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="route" tick={{ fontSize: 12 }} />
              <YAxis tick={{ fontSize: 12 }} />
              <Tooltip formatter={(value: number) => formatCurrency(value, 'ETB')} />
              <Bar dataKey="revenue" fill="#2563eb" />
            </BarChart>
          </ResponsiveContainer>
        </div>

        <div className="card">
          <h3 className="mb-4 text-lg font-semibold text-gray-900">Bookings by Class</h3>
          <ResponsiveContainer width="100%" height={300}>
            <PieChart>
              <Pie
                data={bookingsByClass}
                cx="50%"
                cy="50%"
                labelLine={false}
                label={({ name, value }) => `${name}: ${value}%`}
                outerRadius={100}
                fill="#8884d8"
                dataKey="value"
              >
                {bookingsByClass.map((entry, index) => (
                  <Cell key={`cell-${index}`} fill={entry.color} />
                ))}
              </Pie>
              <Tooltip />
            </PieChart>
          </ResponsiveContainer>
        </div>

        <div className="card lg:col-span-2">
          <h3 className="mb-4 text-lg font-semibold text-gray-900">Occupancy Rate Trend</h3>
          <ResponsiveContainer width="100%" height={300}>
            <BarChart data={occupancyData}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="month" />
              <YAxis />
              <Tooltip formatter={(value: number) => `${value}%`} />
              <Bar dataKey="rate" fill="#10b981" />
            </BarChart>
          </ResponsiveContainer>
        </div>
      </div>

      <div className="card">
        <h3 className="mb-4 text-lg font-semibold text-gray-900">Quick Stats</h3>
        <div className="grid grid-cols-1 gap-4 md:grid-cols-4">
          <div className="rounded-lg bg-blue-50 p-4">
            <p className="text-sm text-blue-600">Total Revenue</p>
            <p className="mt-1 text-2xl font-bold text-blue-900">{formatCurrency(255000000, 'ETB')}</p>
          </div>
          <div className="rounded-lg bg-green-50 p-4">
            <p className="text-sm text-green-600">Total Bookings</p>
            <p className="mt-1 text-2xl font-bold text-green-900">1,247</p>
          </div>
          <div className="rounded-lg bg-purple-50 p-4">
            <p className="text-sm text-purple-600">Avg. Ticket Price</p>
            <p className="mt-1 text-2xl font-bold text-purple-900">{formatCurrency(42500, 'ETB')}</p>
          </div>
          <div className="rounded-lg bg-green-50 p-4">
            <p className="text-sm text-[rgb(20,113,76)]">Cancellation Rate</p>
            <p className="mt-1 text-2xl font-bold text-green-900">3.2%</p>
          </div>
        </div>
      </div>
    </div>
  );
}
