'use client';
import React, { useState, useEffect } from 'react';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle
} from '@/components/ui/dialog';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger
} from '@/components/ui/dropdown-menu';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle
} from '@/components/ui/alert-dialog';
import { MoreVertical, Plus } from 'lucide-react';

const ADDRESSER_KEY = 'myAppAddresser';
const RSVP_KEY = 'myAppRSVP';

// Default RSVP data if localStorage is empty
function getDefaultRSVPs() {
  return [];
}

const RSVP = () => {
  // State for RSVPs with placeholder empty array to avoid hydration mismatch
  const [rsvps, setRSVPs] = useState([]);
  const [contacts, setContacts] = useState([]);
  const [isLoaded, setIsLoaded] = useState(false);
  
  // State for handling the edit/add modal
  const [modalOpen, setModalOpen] = useState(false);
  const [isEditing, setIsEditing] = useState(false);
  const [currentRSVP, setCurrentRSVP] = useState({ id: null, contactId: null, attending: null });
  
  // State for delete confirmation dialog
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [rsvpToDelete, setRSVPToDelete] = useState(null);

  // Load data from localStorage after component mounts on client
  useEffect(() => {
    try {
      // Load contacts
      const savedContacts = localStorage.getItem(ADDRESSER_KEY);
      if (savedContacts) {
        setContacts(JSON.parse(savedContacts));
      } else {
        setContacts([]);
      }
      
      // Load RSVPs
      const savedRSVPs = localStorage.getItem(RSVP_KEY);
      if (savedRSVPs) {
        setRSVPs(JSON.parse(savedRSVPs));
      } else {
        setRSVPs(getDefaultRSVPs());
      }
    } catch (error) {
      console.error('Fejl ved læsning af data fra localStorage:', error);
      setRSVPs(getDefaultRSVPs());
      setContacts([]);
    }
    setIsLoaded(true);
  }, []);

  // Save to localStorage whenever rsvps changes (but only after initial load)
  useEffect(() => {
    if (isLoaded) {
      localStorage.setItem(RSVP_KEY, JSON.stringify(rsvps));
    }
  }, [rsvps, isLoaded]);

  // Handle opening the add modal
  const handleAdd = () => {
    setIsEditing(false);
    setCurrentRSVP({ id: null, contactId: null, attending: null });
    setModalOpen(true);
  };

  // Handle opening the edit modal
  const handleEdit = (rsvp) => {
    setIsEditing(true);
    setCurrentRSVP({ ...rsvp });
    setModalOpen(true);
  };

  // Handle contact selection
  const handleSelectContact = (value) => {
    setCurrentRSVP({ ...currentRSVP, contactId: parseInt(value) });
  };

  // Handle radio button change
  const handleAttendingChange = (value) => {
    setCurrentRSVP({ ...currentRSVP, attending: value === 'yes' });
  };

  // Handle saving a new or edited RSVP
  const handleSave = () => {
    if (!currentRSVP.contactId || currentRSVP.attending === null) {
      return; // Validation failed
    }
    
    if (isEditing) {
      // Update existing RSVP
      setRSVPs(rsvps.map(rsvp => 
        rsvp.id === currentRSVP.id ? currentRSVP : rsvp
      ));
    } else {
      // Check if this contact already has an RSVP
      const existingRSVP = rsvps.find(r => r.contactId === currentRSVP.contactId);
      
      if (existingRSVP) {
        // Update the existing RSVP instead
        setRSVPs(rsvps.map(rsvp => 
          rsvp.contactId === currentRSVP.contactId ? { ...rsvp, attending: currentRSVP.attending } : rsvp
        ));
      } else {
        // Add new RSVP
        const newId = rsvps.length > 0 ? Math.max(...rsvps.map(r => r.id)) + 1 : 1;
        setRSVPs([...rsvps, { ...currentRSVP, id: newId }]);
      }
    }
    setModalOpen(false);
  };

  // Open delete confirmation dialog
  const openDeleteDialog = (rsvp) => {
    setRSVPToDelete(rsvp);
    setDeleteDialogOpen(true);
  };

  // Handle deleting an RSVP
  const handleDelete = () => {
    if (rsvpToDelete) {
      setRSVPs(rsvps.filter(rsvp => rsvp.id !== rsvpToDelete.id));
      setDeleteDialogOpen(false);
      setRSVPToDelete(null);
    }
  };

  // Get contact name by ID
  const getContactName = (contactId) => {
    const contact = contacts.find(c => c.id === contactId);
    return contact ? contact.navn : 'Ukendt';
  };

  // Show loading state until client-side data is loaded
  if (!isLoaded) {
    return (
      <div className="p-6 max-w-4xl mx-auto flex items-center justify-center h-64">
        <div className="text-center">
          <p className="text-gray-500">Indlæser RSVP liste...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="p-6 max-w-4xl mx-auto">
      <div className="flex justify-between items-center mb-6">
        <Button onClick={handleAdd} className="flex items-center">
          <Plus className="mr-2 h-4 w-4" />
          Tilføj svar
        </Button>
        <h1 className="text-2xl font-bold">R.S.V.P.</h1>
      </div>

      {/* Custom table using div structure */}
      <div className="border rounded-md">
        {/* Table Header */}
        <div className="grid grid-cols-3 bg-gray-100 p-4 font-medium border-b">
          <div>Navn</div>
          <div>Svar</div>
          <div className="w-12"></div>
        </div>
        
        {/* Table Body */}
        {rsvps.map((rsvp) => (
          <div key={rsvp.id} className="grid grid-cols-3 p-4 border-b last:border-b-0 items-center">
            <div>{getContactName(rsvp.contactId)}</div>
            <div>
              {rsvp.attending ? (
                <span className="text-green-600 font-medium">Ja</span>
              ) : (
                <span className="text-red-600 font-medium">Nej</span>
              )}
            </div>
            <div>
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="ghost" size="icon">
                    <MoreVertical className="h-4 w-4" />
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end">
                  <DropdownMenuItem onClick={() => handleEdit(rsvp)}>
                    Rediger
                  </DropdownMenuItem>
                  <DropdownMenuItem onClick={() => openDeleteDialog(rsvp)} className="text-red-600">
                    Slet
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </div>
          </div>
        ))}
        
        {/* Empty state */}
        {rsvps.length === 0 && (
          <div className="p-6 text-center text-gray-500">
            Ingen svar tilføjet endnu. Klik på "Tilføj svar" for at tilføje et nyt svar.
          </div>
        )}
      </div>

      {/* Add/Edit Modal */}
      <Dialog open={modalOpen} onOpenChange={setModalOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>{isEditing ? 'Rediger svar' : 'Tilføj nyt svar'}</DialogTitle>
            <DialogDescription>
              {isEditing 
                ? 'Rediger RSVP detaljer herunder.' 
                : 'Vælg en person og angiv om de deltager eller ej.'}
            </DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="contact" className="text-right">
                Navn
              </Label>
              <div className="col-span-3">
                <Select
                  value={currentRSVP.contactId?.toString() || ""}
                  onValueChange={handleSelectContact}
                >
                  <SelectTrigger className="w-full">
                    <SelectValue placeholder="Vælg person..." />
                  </SelectTrigger>
                  <SelectContent>
                    {contacts.map((contact) => (
                      <SelectItem key={contact.id} value={contact.id.toString()}>
                        {contact.navn}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="attending" className="text-right">
                Deltager
              </Label>
              <div className="col-span-3">
                <RadioGroup
                  id="attending"
                  value={currentRSVP.attending === null ? undefined : (currentRSVP.attending ? 'yes' : 'no')}
                  onValueChange={handleAttendingChange}
                >
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="yes" id="yes" />
                    <Label htmlFor="yes" className="text-green-600 font-medium">Ja</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="no" id="no" />
                    <Label htmlFor="no" className="text-red-600 font-medium">Nej</Label>
                  </div>
                </RadioGroup>
              </div>
            </div>
          </div>
          <DialogFooter>
            <Button 
              onClick={handleSave}
              disabled={!currentRSVP.contactId || currentRSVP.attending === null}
            >
              Gem
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Delete Confirmation Dialog */}
      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Er du sikker?</AlertDialogTitle>
            <AlertDialogDescription>
              Dette vil permanent slette RSVP for {rsvpToDelete ? getContactName(rsvpToDelete.contactId) : ''}.
              Denne handling kan ikke fortrydes.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Annuller</AlertDialogCancel>
            <AlertDialogAction onClick={handleDelete} className="bg-red-600 hover:bg-red-700">
              Slet
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
};

export default RSVP;