import React, { useEffect, useState } from 'react';
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 { Checkbox } from '../../components/ui/checkbox';
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 {
  Scale,
  Plus,
  Edit,
  Trash2,
  ExternalLink,
  Check
} from 'lucide-react';

const AdminBylaws = () => {
  const [bylaws, setBylaws] = useState([]);
  const [loading, setLoading] = useState(true);
  const [dialogOpen, setDialogOpen] = useState(false);
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [selectedBylaws, setSelectedBylaws] = useState(null);
  const [bylawsToDelete, setBylawsToDelete] = useState(null);
  const [uploadedFile, setUploadedFile] = useState(null);
  const [formData, setFormData] = useState({
    title: '',
    version: '',
    effective_date: '',
    document_url: '',
    document_type: 'link',
    is_current: false
  });
  const [submitting, setSubmitting] = useState(false);

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

  const fetchBylaws = async () => {
    try {
      const response = await api.get('/bylaws/history');
      setBylaws(response.data);
    } catch (error) {
      toast.error('Failed to fetch bylaws');
    } finally {
      setLoading(false);
    }
  };

  const handleCreate = () => {
    setSelectedBylaws(null);
    setFormData({
      title: 'LOAF Bylaws',
      version: '',
      effective_date: new Date().toISOString().split('T')[0],
      document_url: '',
      document_type: 'link',
      is_current: bylaws.length === 0 // Auto-check if this is the first bylaws
    });
    setUploadedFile(null);
    setDialogOpen(true);
  };

  const handleEdit = (bylawsDoc) => {
    setSelectedBylaws(bylawsDoc);
    setFormData({
      title: bylawsDoc.title,
      version: bylawsDoc.version,
      effective_date: new Date(bylawsDoc.effective_date).toISOString().split('T')[0],
      document_url: bylawsDoc.document_url,
      document_type: bylawsDoc.document_type,
      is_current: bylawsDoc.is_current
    });
    setDialogOpen(true);
  };

  const handleDelete = (bylawsDoc) => {
    setBylawsToDelete(bylawsDoc);
    setDeleteDialogOpen(true);
  };

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

    try {
      const formDataToSend = new FormData();
      formDataToSend.append('title', formData.title);
      formDataToSend.append('version', formData.version);
      formDataToSend.append('effective_date', new Date(formData.effective_date).toISOString());
      formDataToSend.append('document_type', formData.document_type);
      formDataToSend.append('is_current', formData.is_current);

      // Handle file upload or URL based on document_type
      if (formData.document_type === 'upload') {
        if (!uploadedFile && !selectedBylaws) {
          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 (selectedBylaws) {
        await api.put(`/admin/bylaws/${selectedBylaws.id}`, formDataToSend);
        toast.success('Bylaws updated successfully');
      } else {
        await api.post('/admin/bylaws', formDataToSend);
        toast.success('Bylaws created successfully');
      }

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

  const confirmDelete = async () => {
    try {
      await api.delete(`/admin/bylaws/${bylawsToDelete.id}`);
      toast.success('Bylaws deleted successfully');
      setDeleteDialogOpen(false);
      fetchBylaws();
    } catch (error) {
      toast.error('Failed to delete bylaws');
    }
  };

  const formatDate = (dateString) => {
    return new Date(dateString).toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    });
  };

  const currentBylaws = bylaws.find(b => b.is_current);
  const historicalBylaws = bylaws.filter(b => !b.is_current).sort((a, b) => 
    new Date(b.effective_date) - new Date(a.effective_date)
  );

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-[60vh]">
        <p className="text-[#664fa3]">Loading bylaws...</p>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
            Bylaws Management
          </h1>
          <p className="text-[#664fa3] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
            Manage LOAF governing bylaws and version history
          </p>
        </div>
        <Button
          onClick={handleCreate}
          className="bg-[#664fa3] text-white hover:bg-[#533a82] rounded-full flex items-center gap-2"
        >
          <Plus className="h-4 w-4" />
          Add Version
        </Button>
      </div>

      {/* Current Bylaws */}
      {currentBylaws ? (
        <Card className="p-6 border-2 border-[#664fa3]">
          <div className="flex items-center justify-between mb-4">
            <div className="flex items-center gap-3">
              <div className="bg-gradient-to-br from-[#664fa3] to-[#422268] p-3 rounded-xl">
                <Scale className="h-6 w-6 text-white" />
              </div>
              <div>
                <h3 className="text-xl font-semibold text-[#422268]">
                  {currentBylaws.title}
                </h3>
                <div className="flex items-center gap-2 mt-1">
                  <Badge className="bg-[#81B29A] text-white">
                    <Check className="h-3 w-3 mr-1" />
                    Current Version
                  </Badge>
                  <span className="text-[#664fa3] text-sm">
                    Version {currentBylaws.version}
                  </span>
                </div>
              </div>
            </div>
            <div className="flex gap-2">
              <Button
                variant="outline"
                size="sm"
                onClick={() => window.open(currentBylaws.document_url, '_blank')}
                className="border-[#664fa3] text-[#664fa3]"
              >
                <ExternalLink className="h-4 w-4 mr-1" />
                View
              </Button>
              <Button
                variant="outline"
                size="sm"
                onClick={() => handleEdit(currentBylaws)}
                className="border-[#664fa3] text-[#664fa3]"
              >
                <Edit className="h-4 w-4" />
              </Button>
              <Button
                variant="outline"
                size="sm"
                onClick={() => handleDelete(currentBylaws)}
                className="border-red-500 text-red-500 hover:bg-red-50"
              >
                <Trash2 className="h-4 w-4" />
              </Button>
            </div>
          </div>
          <div className="flex items-center gap-4 text-sm text-[#664fa3]">
            <span>Effective Date: <strong>{formatDate(currentBylaws.effective_date)}</strong></span>
            <span>•</span>
            <span>Document Type: <strong>{currentBylaws.document_type === 'upload' ? 'PDF Upload' : 'Link'}</strong></span>
          </div>
        </Card>
      ) : (
        <Card className="p-12 text-center">
          <Scale className="h-16 w-16 text-[#ddd8eb] mx-auto mb-4" />
          <p className="text-[#664fa3] text-lg mb-4">No current bylaws set</p>
          <Button onClick={handleCreate} className="bg-[#664fa3] text-white">
            <Plus className="h-4 w-4 mr-2" />
            Create Bylaws
          </Button>
        </Card>
      )}

      {/* Historical Versions */}
      {historicalBylaws.length > 0 && (
        <div>
          <h2 className="text-xl font-semibold text-[#422268] mb-4">
            Version History ({historicalBylaws.length})
          </h2>
          <div className="space-y-4">
            {historicalBylaws.map(bylawsDoc => (
              <Card key={bylawsDoc.id} className="p-6">
                <div className="flex items-center justify-between">
                  <div>
                    <h3 className="text-lg font-semibold text-[#422268] mb-1">
                      {bylawsDoc.title}
                    </h3>
                    <div className="flex items-center gap-3 text-sm text-[#664fa3]">
                      <span>Version {bylawsDoc.version}</span>
                      <span>•</span>
                      <span>Effective {formatDate(bylawsDoc.effective_date)}</span>
                    </div>
                  </div>
                  <div className="flex gap-2">
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => window.open(bylawsDoc.document_url, '_blank')}
                      className="border-[#664fa3] text-[#664fa3]"
                    >
                      <ExternalLink className="h-4 w-4" />
                    </Button>
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => handleEdit(bylawsDoc)}
                      className="border-[#664fa3] text-[#664fa3]"
                    >
                      <Edit className="h-4 w-4" />
                    </Button>
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => handleDelete(bylawsDoc)}
                      className="border-red-500 text-red-500 hover:bg-red-50"
                    >
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  </div>
                </div>
              </Card>
            ))}
          </div>
        </div>
      )}

      {/* Create/Edit Dialog */}
      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>
              {selectedBylaws ? 'Edit Bylaws' : 'Add Bylaws Version'}
            </DialogTitle>
            <DialogDescription>
              {selectedBylaws ? 'Update bylaws information' : 'Add a new version of the bylaws'}
            </DialogDescription>
          </DialogHeader>
          <form onSubmit={handleSubmit}>
            <div className="space-y-4 py-4">
              <div>
                <Label htmlFor="title">Title *</Label>
                <Input
                  id="title"
                  value={formData.title}
                  onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                  placeholder="LOAF Bylaws"
                  required
                />
              </div>

              <div>
                <Label htmlFor="version">Version *</Label>
                <Input
                  id="version"
                  value={formData.version}
                  onChange={(e) => setFormData({ ...formData, version: e.target.value })}
                  placeholder="v1.0"
                  required
                />
              </div>

              <div>
                <Label htmlFor="effective_date">Effective Date *</Label>
                <Input
                  id="effective_date"
                  type="date"
                  value={formData.effective_date}
                  onChange={(e) => setFormData({ ...formData, effective_date: e.target.value })}
                  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={!selectedBylaws}
                  />
                  {uploadedFile && (
                    <p className="text-sm text-[#664fa3] mt-1">
                      Selected: {uploadedFile.name}
                    </p>
                  )}
                  {selectedBylaws && !uploadedFile && (
                    <p className="text-sm text-[#664fa3] 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-[#664fa3] mt-1">
                    Paste the shareable link to your document (Google Drive, Dropbox, PDF URL, etc.)
                  </p>
                </div>
              )}

              <div className="flex items-center space-x-2">
                <Checkbox
                  id="is_current"
                  checked={formData.is_current}
                  onCheckedChange={(checked) => setFormData({ ...formData, is_current: checked })}
                />
                <label
                  htmlFor="is_current"
                  className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                >
                  Set as current version (will unset all other versions)
                </label>
              </div>
            </div>
            <DialogFooter>
              <Button
                type="button"
                variant="outline"
                onClick={() => setDialogOpen(false)}
                disabled={submitting}
              >
                Cancel
              </Button>
              <Button
                type="submit"
                className="bg-[#664fa3] text-white"
                disabled={submitting}
              >
                {submitting ? 'Saving...' : selectedBylaws ? 'Update' : 'Create'}
              </Button>
            </DialogFooter>
          </form>
        </DialogContent>
      </Dialog>

      {/* Delete Confirmation Dialog */}
      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Delete Bylaws</DialogTitle>
            <DialogDescription>
              Are you sure you want to delete "{bylawsToDelete?.title} ({bylawsToDelete?.version})"? 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 AdminBylaws;