membership-fe/src/pages/admin/AdminFinancials.js

import React, { useEffect, useState } from 'react';
import { useAuth } from '../../context/AuthContext';
import api from '../../utils/api';
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 { Label } from '../../components/ui/label';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '../../components/ui/dialog';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '../../components/ui/select';
import { toast } from 'sonner';
import {
  DollarSign,
  Plus,
  Edit,
  Trash2,
  ExternalLink,
  TrendingUp
} from 'lucide-react';

const AdminFinancials = () => {
  const { hasPermission } = useAuth();
  const [reports, setReports] = useState([]);
  const [loading, setLoading] = useState(true);
  const [dialogOpen, setDialogOpen] = useState(false);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [selectedReport, setSelectedReport] = useState(null);
  const [reportToDelete, setReportToDelete] = useState(null);
  const [uploadedFile, setUploadedFile] = useState(null);
  const [formData, setFormData] = useState({
    year: new Date().getFullYear(),
    title: '',
    document_url: '',
    document_type: 'link'
  });
  const [submitting, setSubmitting] = useState(false);

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

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

  const handleCreate = () => {
    setSelectedReport(null);
    setFormData({
      year: new Date().getFullYear(),
      title: '',
      document_url: '',
      document_type: 'link'
    });
    setUploadedFile(null);
    setDialogOpen(true);
  };

  const handleEdit = (report) => {
    setSelectedReport(report);
    setFormData({
      year: report.year,
      title: report.title,
      document_url: report.document_url,
      document_type: report.document_type
    });
    setDialogOpen(true);
  };

  const handleDelete = (report) => {
    setReportToDelete(report);
    setDeleteDialogOpen(true);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setSubmitting(true);

    try {
      const formDataToSend = new FormData();
      formDataToSend.append('year', formData.year);
      formDataToSend.append('title', formData.title);
      formDataToSend.append('document_type', formData.document_type);

      // Handle file upload or URL based on document_type
      if (formData.document_type === 'upload') {
        if (!uploadedFile && !selectedReport) {
          toast.error('Please select a file to upload');
          setSubmitting(false);
          return;
        }
        if (uploadedFile) {
          formDataToSend.append('file', uploadedFile);
        }
      } else {
        formDataToSend.append('document_url', formData.document_url);
      }

      if (selectedReport) {
        await api.put(`/admin/financials/${selectedReport.id}`, formDataToSend);
        toast.success('Financial report updated successfully');
      } else {
        await api.post('/admin/financials', formDataToSend);
        toast.success('Financial report created successfully');
      }

      setDialogOpen(false);
      setUploadedFile(null);
      fetchReports();
    } catch (error) {
      toast.error(error.response?.data?.detail || 'Failed to save financial report');
    } finally {
      setSubmitting(false);
    }
  };

  const confirmDelete = async () => {
    try {
      await api.delete(`/admin/financials/${reportToDelete.id}`);
      toast.success('Financial report deleted successfully');
      setDeleteDialogOpen(false);
      fetchReports();
    } catch (error) {
      toast.error('Failed to delete financial report');
    }
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-[60vh]">
        <p className="text-muted-foreground">Loading financial reports...</p>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-3xl font-semibold text-primary" style={{ fontFamily: "'Inter', sans-serif" }}>
            Financial Reports Management
          </h1>
          <p className="text-muted-foreground mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
            Manage annual financial reports
          </p>
        </div>
        {hasPermission('financials.create') && (
          <Button
            onClick={handleCreate}
            className="bg-muted-foreground text-white hover:bg-[#533a82] rounded-full flex items-center gap-2"
          >
            <Plus className="h-4 w-4" />
            Add Report
          </Button>
        )}
      </div>

      {/* Reports List */}
      {reports.length === 0 ? (
        <Card className="p-12 text-center">
          <TrendingUp className="h-16 w-16 text-chart-6 mx-auto mb-4" />
          <p className="text-muted-foreground text-lg mb-4">No financial reports yet</p>
          {hasPermission('financials.create') && (
            <Button onClick={handleCreate} className="bg-muted-foreground text-white">
              <Plus className="h-4 w-4 mr-2" />
              Create First Report
            </Button>
          )}
        </Card>
      ) : (
        <div className="space-y-4">
          {reports.map(report => (
            <Card key={report.id} className="p-6">
              <div className="flex items-center gap-6">
                <div className="bg-gradient-to-br from-muted-foreground to-primary p-4 rounded-xl text-white min-w-[100px] text-center">
                  <DollarSign className="h-6 w-6 mx-auto mb-1" />
                  <div className="text-2xl font-bold">{report.year}</div>
                </div>
                <div className="flex-1">
                  <h3 className="text-lg font-semibold text-primary mb-2">
                    {report.title}
                  </h3>
                  <div className="flex items-center gap-3">
                    <Badge variant="outline" className="border-muted-foreground text-muted-foreground">
                      {report.document_type === 'google_drive' ? 'Google Drive' : report.document_type.toUpperCase()}
                    </Badge>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => window.open(report.document_url, '_blank')}
                      className="text-muted-foreground hover:text-[#533a82]"
                    >
                      <ExternalLink className="h-4 w-4 mr-1" />
                      View
                    </Button>
                  </div>
                </div>
                {(hasPermission('financials.edit') || hasPermission('financials.delete')) && (
                  <div className="flex gap-2">
                    {hasPermission('financials.edit') && (
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => handleEdit(report)}
                        className="border-muted-foreground text-muted-foreground"
                      >
                        <Edit className="h-4 w-4" />
                      </Button>
                    )}
                    {hasPermission('financials.delete') && (
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={() => handleDelete(report)}
                        className="border-red-500 text-red-500 hover:bg-red-50"
                      >
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    )}
                  </div>
                )}
              </div>
            </Card>
          ))}
        </div>
      )}

      {/* Create/Edit Dialog */}
      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>
              {selectedReport ? 'Edit Financial Report' : 'Add Financial Report'}
            </DialogTitle>
            <DialogDescription>
              {selectedReport ? 'Update financial report information' : 'Add a new financial report'}
            </DialogDescription>
          </DialogHeader>
          <form onSubmit={handleSubmit}>
            <div className="space-y-4 py-4">
              <div>
                <Label htmlFor="year">Fiscal Year *</Label>
                <Input
                  id="year"
                  type="number"
                  value={formData.year}
                  onChange={(e) => setFormData({ ...formData, year: parseInt(e.target.value) })}
                  placeholder="2024"
                  required
                  min="2000"
                  max="2100"
                />
              </div>

              <div>
                <Label htmlFor="title">Title *</Label>
                <Input
                  id="title"
                  value={formData.title}
                  onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                  placeholder="2024 Annual Financial Report"
                  required
                />
              </div>

              <div>
                <Label htmlFor="document_type">Document Type *</Label>
                <Select
                  value={formData.document_type}
                  onValueChange={(value) => {
                    setFormData({ ...formData, document_type: value, document_url: '' });
                    setUploadedFile(null);
                  }}
                >
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="link">Link</SelectItem>
                    <SelectItem value="upload">Upload</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              {formData.document_type === 'upload' ? (
                <div>
                  <Label htmlFor="document_file">Upload PDF File *</Label>
                  <Input
                    id="document_file"
                    type="file"
                    accept=".pdf"
                    onChange={(e) => setUploadedFile(e.target.files[0])}
                    required={!selectedReport}
                  />
                  {uploadedFile && (
                    <p className="text-sm text-muted-foreground mt-1">
                      Selected: {uploadedFile.name}
                    </p>
                  )}
                  {selectedReport && !uploadedFile && (
                    <p className="text-sm text-muted-foreground mt-1">
                      Current file will be kept if no new file is selected
                    </p>
                  )}
                </div>
              ) : (
                <div>
                  <Label htmlFor="document_url">Document URL *</Label>
                  <Input
                    id="document_url"
                    value={formData.document_url}
                    onChange={(e) => setFormData({ ...formData, document_url: e.target.value })}
                    placeholder="https://docs.google.com/... or https://example.com/file.pdf"
                    required
                  />
                  <p className="text-sm text-muted-foreground mt-1">
                    Paste the shareable link to your document (Google Drive, Dropbox, PDF URL, etc.)
                  </p>
                </div>
              )}
            </div>
            <DialogFooter>
              <Button
                type="button"
                variant="outline"
                onClick={() => setDialogOpen(false)}
                disabled={submitting}
              >
                Cancel
              </Button>
              <Button
                type="submit"
                className="bg-muted-foreground text-white"
                disabled={submitting}
              >
                {submitting ? 'Saving...' : selectedReport ? 'Update' : 'Create'}
              </Button>
            </DialogFooter>
          </form>
        </DialogContent>
      </Dialog>

      {/* Delete Confirmation Dialog */}
      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Delete Financial Report</DialogTitle>
            <DialogDescription>
              Are you sure you want to delete "{reportToDelete?.title}"? This action cannot be undone.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button
              variant="outline"
              onClick={() => setDeleteDialogOpen(false)}
            >
              Cancel
            </Button>
            <Button
              variant="destructive"
              onClick={confirmDelete}
              className="bg-red-500 hover:bg-red-600"
            >
              Delete
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
};

export default AdminFinancials;