import React, { useState, useEffect } from 'react';
import api from '../../utils/api';
import Navbar from '../../components/Navbar';
import MemberFooter from '../../components/MemberFooter';
import { Card } from '../../components/ui/card';
import { Button } from '../../components/ui/button';
import { Badge } from '../../components/ui/badge';
import { toast } from 'sonner';
import { DollarSign, ExternalLink, TrendingUp } from 'lucide-react';

export default function Financials() {
  const [reports, setReports] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchReports();
  }, []);

  const fetchReports = async () => {
    try {
      const response = await api.get('/financials');
      setReports(response.data);
    } catch (error) {
      toast.error('Failed to load financial reports');
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-background">
        <Navbar />
        <div className="flex items-center justify-center min-h-[60vh]">
          <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
            Loading financial reports...
          </p>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-background">
      <Navbar />

      <div className="max-w-5xl mx-auto px-6 py-12">
        {/* Header */}
        <div className="mb-8">
          <h1 className="text-4xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
            Financial Reports
          </h1>
          <p className="text-brand-purple  mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
            Access annual financial reports and stay informed about LOAF's fiscal responsibility.
          </p>
        </div>

        {/* Reports List */}
        {reports.length === 0 ? (
          <Card className="p-12 text-center bg-background rounded-2xl border border-[var(--neutral-800)]">
            <TrendingUp className="h-16 w-16 text-[var(--neutral-800)] mx-auto mb-4" />
            <p className="text-brand-purple  text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
              No financial reports available yet
            </p>
          </Card>
        ) : (
          <div className="space-y-6">
            {reports.map(report => (
              <Card key={report.id} className="p-8 bg-background rounded-2xl border border-[var(--neutral-800)] hover:shadow-lg transition-shadow">
                <div className="flex items-center gap-6">
                  {/* Year Badge */}
                  <div className="bg-gradient-to-br from-brand-purple  to-[var(--purple-ink)] p-6 rounded-xl text-white min-w-[120px] text-center">
                    <DollarSign className="h-8 w-8 mx-auto mb-2" />
                    <div className="text-3xl font-bold" style={{ fontFamily: "'Inter', sans-serif" }}>
                      {report.year}
                    </div>
                    <div className="text-sm opacity-90">Fiscal Year</div>
                  </div>

                  {/* Report Details */}
                  <div className="flex-1">
                    <h3 className="text-2xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                      {report.title}
                    </h3>
                    <div className="flex items-center gap-2 mb-4">
                      <Badge variant="outline" className="border-brand-purple  text-brand-purple ">
                        {report.document_type === 'google_drive' ? 'Google Drive' : report.document_type.toUpperCase()}
                      </Badge>
                    </div>
                    <Button
                      onClick={() => window.open(report.document_url, '_blank')}
                      className="bg-brand-purple  text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2"
                    >
                      <ExternalLink className="h-4 w-4" />
                      View Report
                    </Button>
                  </div>
                </div>
              </Card>
            ))}
          </div>
        )}

        {/* Transparency Note */}
        {reports.length > 0 && (
          <Card className="mt-8 p-6 bg-[var(--lavender-600)] border border-[var(--neutral-800)]">
            <div className="flex items-start gap-3">
              <TrendingUp className="h-5 w-5 text-brand-purple  mt-1" />
              <div>
                <h4 className="font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                  Transparency & Accountability
                </h4>
                <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                  LOAF is committed to financial transparency. These reports provide detailed information about our
                  revenue, expenses, and how member contributions support our community programs and operations.
                </p>
              </div>
            </div>
          </Card>
        )}
      </div>
      <MemberFooter />
    </div>
  );
}