"use client";
import React, { useState } from 'react';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
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 Adresseliste = () => {
  // Sample initial data
  const [personer, setPersoner] = useState([
    { id: 1, navn: 'Anders Andersen', email: 'anders@example.com', telefon: '+45 12 34 56 78' },
    { id: 2, navn: 'Birgitte Bertelsen', email: 'birgitte@example.com', telefon: '+45 23 45 67 89' },
    { id: 3, navn: 'Christian Christensen', email: 'christian@example.com', telefon: '+45 34 56 78 90' }
  ]);

  // State for handling the edit/add modal
  const [modalOpen, setModalOpen] = useState(false);
  const [isEditing, setIsEditing] = useState(false);
  const [currentPerson, setCurrentPerson] = useState({ id: null, navn: '', email: '', telefon: '' });
  
  // State for delete confirmation dialog
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [personToDelete, setPersonToDelete] = useState(null);

  // Handle opening the add modal
  const handleAdd = () => {
    setIsEditing(false);
    setCurrentPerson({ id: null, navn: '', email: '', telefon: '' });
    setModalOpen(true);
  };

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

  // Handle input changes in the modal
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setCurrentPerson({ ...currentPerson, [name]: value });
  };

  // Handle saving a new or edited person
  const handleSave = () => {
    if (isEditing) {
      // Update existing person
      setPersoner(personer.map(person => 
        person.id === currentPerson.id ? currentPerson : person
      ));
    } else {
      // Add new person
      const newId = personer.length > 0 ? Math.max(...personer.map(p => p.id)) + 1 : 1;
      setPersoner([...personer, { ...currentPerson, id: newId }]);
    }
    setModalOpen(false);
  };

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

  // Handle deleting a person
  const handleDelete = () => {
    if (personToDelete) {
      setPersoner(personer.filter(person => person.id !== personToDelete.id));
      setDeleteDialogOpen(false);
      setPersonToDelete(null);
    }
  };

  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
        </Button>
        <h1 className="text-2xl font-bold">Adresseliste - example 1</h1>
      </div>

      {/* Custom table using div structure */}
      <div className="border rounded-md">
        {/* Table Header */}
        <div className="grid grid-cols-4 bg-gray-100 p-4 font-medium border-b">
          <div>Navn</div>
          <div>E-mail</div>
          <div>Telefonnummer</div>
          <div className="w-12"></div>
        </div>
        
        {/* Table Body */}
        {personer.map((person) => (
          <div key={person.id} className="grid grid-cols-4 p-4 border-b last:border-b-0 items-center">
            <div>{person.navn}</div>
            <div>{person.email}</div>
            <div>{person.telefon}</div>
            <div>
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="ghost" size="icon">
                    <MoreVertical className="h-4 w-4" />
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end">
                  <DropdownMenuItem onClick={() => handleEdit(person)}>
                    Rediger
                  </DropdownMenuItem>
                  <DropdownMenuItem onClick={() => openDeleteDialog(person)} className="text-red-600">
                    Slet
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </div>
          </div>
        ))}
        
        {/* Empty state */}
        {personer.length === 0 && (
          <div className="p-6 text-center text-gray-500">
            Ingen kontakter tilføjet endnu. Klik på "Tilføj" for at tilføje en ny kontakt.
          </div>
        )}
      </div>

      {/* Add/Edit Modal */}
      <Dialog open={modalOpen} onOpenChange={setModalOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>{isEditing ? 'Rediger kontakt' : 'Tilføj ny kontakt'}</DialogTitle>
            <DialogDescription>
              {isEditing 
                ? 'Rediger kontaktoplysningerne herunder.' 
                : 'Indtast kontaktoplysninger for den nye person.'}
            </DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="navn" className="text-right">
                Navn
              </Label>
              <Input
                id="navn"
                name="navn"
                value={currentPerson.navn}
                onChange={handleInputChange}
                className="col-span-3"
              />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="email" className="text-right">
                E-mail
              </Label>
              <Input
                id="email"
                name="email"
                value={currentPerson.email}
                onChange={handleInputChange}
                className="col-span-3"
              />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="telefon" className="text-right">
                Telefonnummer
              </Label>
              <Input
                id="telefon"
                name="telefon"
                value={currentPerson.telefon}
                onChange={handleInputChange}
                className="col-span-3"
              />
            </div>
          </div>
          <DialogFooter>
            <Button onClick={handleSave}>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 {personToDelete?.navn} fra adresselisten.
              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 Adresseliste;