'use client';

import React, { useState } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { MoreHorizontal, Trash2, Eye, Reply } from "lucide-react";
import { contactMessages as initialMessages } from "@/lib/data";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from "@/components/ui/dialog";
import type { ContactMessage } from '@/lib/types';
import { formatDistanceToNow, parseISO } from 'date-fns';

const getStatusVariant = (status: ContactMessage['status']) => {
    switch (status) {
        case 'read': return { variant: "default" as const, label: "Read" };
        case 'new': return { variant: "secondary" as const, label: "New" };
        case 'archived': return { variant: "outline" as const, label: "Archived" };
        default: return { variant: "outline" as const, label: "Unknown" };
    }
};

export default function AdminMessagesPage() {
    const [messages, setMessages] = useState<ContactMessage[]>(initialMessages);
    const [selectedMessage, setSelectedMessage] = useState<ContactMessage | null>(null);

    const handleViewMessage = (message: ContactMessage) => {
        setSelectedMessage(message);
        // Mark as read when viewed
        setMessages(msgs => msgs.map(m => m.id === message.id ? { ...m, status: 'read' } : m));
    };

    return (
        <>
            <Card>
                <CardHeader>
                    <CardTitle>Contact Messages</CardTitle>
                    <CardDescription>View and manage messages from the contact form.</CardDescription>
                </CardHeader>
                <CardContent>
                    <Table>
                        <TableHeader>
                            <TableRow>
                                <TableHead>From</TableHead>
                                <TableHead>Subject</TableHead>
                                <TableHead>Status</TableHead>
                                <TableHead>Received</TableHead>
                                <TableHead className="text-right">Actions</TableHead>
                            </TableRow>
                        </TableHeader>
                        <TableBody>
                            {messages.map((message) => {
                                const statusInfo = getStatusVariant(message.status);
                                return (
                                    <TableRow key={message.id}>
                                        <TableCell>
                                            <div className="font-medium">{message.name}</div>
                                            <div className="text-sm text-muted-foreground">{message.email}</div>
                                        </TableCell>
                                        <TableCell>{message.subject}</TableCell>
                                        <TableCell>
                                            <Badge variant={statusInfo.variant}>{statusInfo.label}</Badge>
                                        </TableCell>
                                        <TableCell>{formatDistanceToNow(parseISO(message.date), { addSuffix: true })}</TableCell>
                                        <TableCell className="text-right">
                                            <DropdownMenu>
                                                <DropdownMenuTrigger asChild>
                                                    <Button aria-haspopup="true" size="icon" variant="ghost">
                                                        <MoreHorizontal className="h-4 w-4" />
                                                        <span className="sr-only">Toggle menu</span>
                                                    </Button>
                                                </DropdownMenuTrigger>
                                                <DropdownMenuContent align="end">
                                                    <DropdownMenuItem onClick={() => handleViewMessage(message)}>
                                                        <Eye className="mr-2 h-4 w-4" />
                                                        View Message
                                                    </DropdownMenuItem>
                                                    <DropdownMenuItem className="text-destructive">
                                                        <Trash2 className="mr-2 h-4 w-4" />
                                                        Delete
                                                    </DropdownMenuItem>
                                                </DropdownMenuContent>
                                            </DropdownMenu>
                                        </TableCell>
                                    </TableRow>
                                );
                            })}
                        </TableBody>
                    </Table>
                </CardContent>
            </Card>

            {selectedMessage && (
                <Dialog open={!!selectedMessage} onOpenChange={(isOpen) => !isOpen && setSelectedMessage(null)}>
                    <DialogContent className="max-w-lg">
                        <DialogHeader>
                            <DialogTitle>{selectedMessage.subject}</DialogTitle>
                            <DialogDescription>
                                From: {selectedMessage.name} ({selectedMessage.email})
                            </DialogDescription>
                        </DialogHeader>
                        <div className="py-4">
                            <div className="rounded-md border bg-muted/50 p-4">
                                <p className="text-foreground">{selectedMessage.message}</p>
                            </div>
                        </div>
                        <DialogFooter>
                            <Button variant="outline" onClick={() => setSelectedMessage(null)}>Close</Button>
                            <Button asChild>
                                <a href={`mailto:${selectedMessage.email}?subject=Re: ${selectedMessage.subject}`}>
                                    <Reply className="mr-2 h-4 w-4" />
                                    Reply via Email
                                </a>
                            </Button>
                        </DialogFooter>
                    </DialogContent>
                </Dialog>
            )}
        </>
    );
}