import { useState } from 'react';

export default function AnalyticsDashboard() {
  const [dateRange, setDateRange] = useState('7days');

  const stats = {
    totalAppointments: 142,
    revenue: '$12,450',
    newClients: 28,
    cancelationRate: '8%',
  };

  return (
    <div className="min-h-screen bg-gray-900 text-gray-100 p-6">
      <div className="max-w-7xl mx-auto">
        <div className="flex justify-between items-center mb-8">
          <h1 className="text-3xl font-bold text-blue-400">Analytics Dashboard</h1>
          <select
            value={dateRange}
            onChange={(e) => setDateRange(e.target.value)}
            className="bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 text-gray-100"
          >
            <option value="7days">Last 7 Days</option>
            <option value="30days">Last 30 Days</option>
            <option value="90days">Last 90 Days</option>
          </select>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
          <div className="bg-gray-800 rounded-lg p-6">
            <p className="text-sm text-gray-400 mb-2">Total Appointments</p>
            <p className="text-3xl font-bold text-blue-400">{stats.totalAppointments}</p>
            <p className="text-sm text-green-400 mt-2">↑ 12% vs last period</p>
          </div>
          <div className="bg-gray-800 rounded-lg p-6">
            <p className="text-sm text-gray-400 mb-2">Revenue</p>
            <p className="text-3xl font-bold text-green-400">{stats.revenue}</p>
            <p className="text-sm text-green-400 mt-2">↑ 8% vs last period</p>
          </div>
          <div className="bg-gray-800 rounded-lg p-6">
            <p className="text-sm text-gray-400 mb-2">New Clients</p>
            <p className="text-3xl font-bold text-purple-400">{stats.newClients}</p>
            <p className="text-sm text-green-400 mt-2">↑ 15% vs last period</p>
          </div>
          <div className="bg-gray-800 rounded-lg p-6">
            <p className="text-sm text-gray-400 mb-2">Cancelation Rate</p>
            <p className="text-3xl font-bold text-yellow-400">{stats.cancelationRate}</p>
            <p className="text-sm text-red-400 mt-2">↑ 2% vs last period</p>
          </div>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <div className="bg-gray-800 rounded-lg p-6">
            <h2 className="text-xl font-semibold mb-4">Appointment Types</h2>
            <div className="space-y-3">
              <div className="flex justify-between items-center">
                <span>Consultation</span>
                <div className="flex items-center gap-3">
                  <div className="w-48 bg-gray-700 rounded-full h-2">
                    <div className="bg-blue-500 h-2 rounded-full" style={{ width: '75%' }}></div>
                  </div>
                  <span className="text-sm text-gray-400">75%</span>
                </div>
              </div>
              <div className="flex justify-between items-center">
                <span>Follow-up</span>
                <div className="flex items-center gap-3">
                  <div className="w-48 bg-gray-700 rounded-full h-2">
                    <div className="bg-green-500 h-2 rounded-full" style={{ width: '45%' }}></div>
                  </div>
                  <span className="text-sm text-gray-400">45%</span>
                </div>
              </div>
              <div className="flex justify-between items-center">
                <span>Extended Session</span>
                <div className="flex items-center gap-3">
                  <div className="w-48 bg-gray-700 rounded-full h-2">
                    <div className="bg-purple-500 h-2 rounded-full" style={{ width: '30%' }}></div>
                  </div>
                  <span className="text-sm text-gray-400">30%</span>
                </div>
              </div>
            </div>
          </div>

          <div className="bg-gray-800 rounded-lg p-6">
            <h2 className="text-xl font-semibold mb-4">Top Calendars</h2>
            <div className="space-y-3">
              <div className="flex justify-between items-center p-3 bg-gray-700 rounded">
                <span>Main Calendar</span>
                <span className="font-semibold text-blue-400">85 appointments</span>
              </div>
              <div className="flex justify-between items-center p-3 bg-gray-700 rounded">
                <span>Secondary Calendar</span>
                <span className="font-semibold text-blue-400">42 appointments</span>
              </div>
              <div className="flex justify-between items-center p-3 bg-gray-700 rounded">
                <span>Weekend Calendar</span>
                <span className="font-semibold text-blue-400">15 appointments</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
