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 { Input } from '../../components/ui/input';
import { toast } from 'sonner';
import { DollarSign, ExternalLink, TrendingUp, Search, Calendar } from 'lucide-react';

export default function Financials() {
  const [reports, setReports] = useState([]);
  const [years, setYears] = useState([]);
  const [selectedYear, setSelectedYear] = useState(null);
  const [searchTerm, setSearchTerm] = useState('');
  const [loading, setLoading] = useState(true);

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

  const fetchYears = async () => {
    try {
      const response = await api.get('/financials/years');
      setYears(response.data);
    } catch (error) {
      console.error('Failed to load years');
    }
  };

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

  const handleYearFilter = (year) => {
    setSelectedYear(year);
    fetchReports(year);
  };

  const clearFilter = () => {
    setSelectedYear(null);
    fetchReports();
  };

  const filteredReports = reports.filter(report =>
    report.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
    report.year.toString().includes(searchTerm)
  );

  const groupByYear = (items) => {
    const grouped = {};
    items.forEach(item => {
      const year = item.year;
      if (!grouped[year]) {
        grouped[year] = [];
      }
      grouped[year].push(item);
    });
    return grouped;
  };

  const groupedReports = groupByYear(filteredReports);
  const sortedYears = Object.keys(groupedReports).sort((a, b) => b - a);

  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>

          {/* Filters */}
          <div className="flex gap-4 flex-wrap items-center">
            {/* Search */}
            <div className="relative flex-1 min-w-[300px]">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-brand-purple " />
              <Input
                type="text"
                placeholder="Search financial reports..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="pl-10 border-[var(--neutral-800)] focus:border-brand-purple "
              />
            </div>

            {/* Year Filter */}
            <div className="flex gap-2 flex-wrap">
              <Button
                onClick={clearFilter}
                variant={selectedYear === null ? "default" : "outline"}
                size="sm"
                className={selectedYear === null ? "bg-brand-purple hover:bg-[var(--purple-muted)]  text-white" : "border-brand-lavender  text-brand-lavender "}
              >
                All Years
              </Button>
              {years.map(year => (
                <Button
                  key={year}
                  onClick={() => handleYearFilter(year)}
                  variant={selectedYear === year ? "default" : "outline"}
                  size="sm"
                  className={selectedYear === year ? "bg-brand-purple  text-white" : "border-brand-purple  text-brand-purple "}
                >
                  {year}
                </Button>
              ))}
            </div>
          </div>
        </div>

        {/* Reports List */}
        {filteredReports.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 found
            </p>
          </Card>
        ) : (
          <div className="space-y-8">
            {sortedYears.map(year => (
              <div key={year}>
                <h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                  <Calendar className="h-6 w-6" />
                  {year}
                </h2>
                <div className="space-y-6">
                  {groupedReports[year].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-4 rounded-xl self-start">
                <DollarSign className="h-8 w-8 text-white" />
              </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>
              </div>
            ))}
          </div>
        )}

        {/* Transparency Note */}
        {filteredReports.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>
  );
}