import React from 'react';
import { useSelector } from 'react-redux';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Mail, Edit2, Trash2, Calendar } from 'lucide-react';
import { RootState } from '@/store';
import { formatDateTime } from '@/components/ui/utils';

interface EmailTemplatesProps {
  onEditTemplate: (template: any) => void;
  onDeleteTemplate: (id: string) => void;
}

export const EmailTemplates: React.FC<EmailTemplatesProps> = ({
  onEditTemplate,
  onDeleteTemplate
}) => {
  const { emailTemplates } = useSelector((state: RootState) => state.master);

  return (
    <Card>
      <CardHeader>
        <div>
          <CardTitle>Email & Letter Templates</CardTitle>
          <CardDescription>
            Templates and trigger codes come from system seed data. Edit wording and layout here; new triggers are not added from this screen.
          </CardDescription>
        </div>
      </CardHeader>
      <CardContent>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Template Name</TableHead>
              <TableHead>Subject</TableHead>
              <TableHead>Trigger Code</TableHead>
              <TableHead>Modified Date</TableHead>
              <TableHead className="text-right">Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {emailTemplates.map((template) => (
              <TableRow key={template.id}>
                <TableCell>
                  <div className="flex items-center gap-3">
                    <div className="w-8 h-8 bg-amber-50 rounded-lg flex items-center justify-center">
                      <Mail className="w-4 h-4 text-amber-600" />
                    </div>
                    <span className="font-medium text-slate-900">{template.name || template.templateCode}</span>
                  </div>
                </TableCell>
                <TableCell className="text-slate-600 max-w-xs truncate">{template.subject}</TableCell>
                <TableCell>
                  <Badge variant="outline" className="bg-slate-50 text-[10px] font-mono">
                    {template.templateCode || '-'}
                  </Badge>
                </TableCell>
                <TableCell className="text-slate-500 text-sm">
                  <div className="flex items-center gap-1.5">
                    <Calendar className="w-3.5 h-3.5" />
                    {template.updatedAt ? formatDateTime(template.updatedAt) : '-'}
                  </div>
                </TableCell>
                <TableCell className="text-right">
                  <div className="flex gap-2 justify-end">
                    <Button variant="ghost" size="sm" onClick={() => onEditTemplate(template)}>
                      <Edit2 className="w-4 h-4" />
                    </Button>
                    <Button variant="ghost" size="sm" onClick={() => onDeleteTemplate(template.id)} className="text-red-500 hover:text-red-600 hover:bg-red-50">
                      <Trash2 className="w-4 h-4" />
                    </Button>
                  </div>
                </TableCell>
              </TableRow>
            ))}
            {emailTemplates.length === 0 && (
              <TableRow>
                <TableCell colSpan={5} className="text-center py-12">
                  <div className="flex flex-col items-center gap-2">
                    <Mail className="w-8 h-8 text-slate-200" />
                    <p className="text-slate-400 text-sm">No templates configured yet</p>
                  </div>
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  );
};