import { EmailTemplate } from '@/lib/api';
import Card from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import clsx from 'clsx';
import {
  EyeIcon,
  PaperAirplaneIcon,
  CheckCircleIcon,
  ClockIcon,
  TicketIcon,
  XCircleIcon,
} from '@heroicons/react/24/outline';

type RecipientFilter = 'all' | 'confirmed' | 'pending' | 'checked_in';

interface EmailTabProps {
  templates: EmailTemplate[];
  selectedTemplate: string;
  setSelectedTemplate: (value: string) => void;
  recipientFilter: RecipientFilter;
  setRecipientFilter: (value: RecipientFilter) => void;
  customMessage: string;
  setCustomMessage: (value: string) => void;
  sending: boolean;
  handlePreviewEmail: () => void;
  handleSendEmail: () => void;
  getFilteredRecipientCount: () => number;
  ticketsCount: number;
  confirmedCount: number;
  pendingCount: number;
  checkedInCount: number;
  cancelledCount: number;
}

export function EmailTab({
  templates,
  selectedTemplate,
  setSelectedTemplate,
  recipientFilter,
  setRecipientFilter,
  customMessage,
  setCustomMessage,
  sending,
  handlePreviewEmail,
  handleSendEmail,
  getFilteredRecipientCount,
  ticketsCount,
  confirmedCount,
  pendingCount,
  checkedInCount,
  cancelledCount,
}: EmailTabProps) {
  return (
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
      <Card className="p-5">
        <h3 className="font-semibold text-base mb-3">Send Email to Attendees</h3>

        <div className="space-y-3">
          <div>
            <label className="block text-sm font-medium mb-1">Email Template</label>
            <select
              value={selectedTemplate}
              onChange={(e) => setSelectedTemplate(e.target.value)}
              className="w-full px-3 py-2.5 rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow text-sm"
            >
              <option value="">Select a template...</option>
              {templates.map((template) => (
                <option key={template.id} value={template.slug}>
                  {template.name}
                </option>
              ))}
            </select>
          </div>

          <div>
            <label className="block text-sm font-medium mb-1">Recipients</label>
            <select
              value={recipientFilter}
              onChange={(e) => setRecipientFilter(e.target.value as RecipientFilter)}
              className="w-full px-3 py-2.5 rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow text-sm"
            >
              <option value="all">All Attendees ({ticketsCount})</option>
              <option value="confirmed">Confirmed Only ({confirmedCount})</option>
              <option value="pending">Pending Only ({pendingCount})</option>
              <option value="checked_in">Checked In Only ({checkedInCount})</option>
            </select>
          </div>

          <div>
            <label className="block text-sm font-medium mb-1">Custom Message (optional)</label>
            <textarea
              value={customMessage}
              onChange={(e) => setCustomMessage(e.target.value)}
              className="w-full px-3 py-2.5 rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow text-sm"
              rows={3}
              placeholder="Add a custom message that will be included in the email..."
            />
            <p className="text-[10px] text-gray-500 mt-1">
              This message will replace the {`{{customMessage}}`} variable in the template.
            </p>
          </div>

          <div className="flex flex-wrap gap-2 pt-1">
            <Button
              variant="outline"
              size="sm"
              onClick={handlePreviewEmail}
              disabled={!selectedTemplate}
              className="min-h-[44px] md:min-h-0"
            >
              <EyeIcon className="w-4 h-4 mr-1.5" />
              Preview
            </Button>
            <Button
              size="sm"
              onClick={handleSendEmail}
              disabled={!selectedTemplate || getFilteredRecipientCount() === 0}
              isLoading={sending}
              className="min-h-[44px] md:min-h-0"
            >
              <PaperAirplaneIcon className="w-4 h-4 mr-1.5" />
              Send to {getFilteredRecipientCount()} {getFilteredRecipientCount() === 1 ? 'person' : 'people'}
            </Button>
          </div>
        </div>
      </Card>

      <Card className="p-5">
        <h3 className="font-semibold text-base mb-3">Recipient Summary</h3>
        <div className="space-y-2">
          {[
            { label: 'Confirmed', count: confirmedCount, icon: CheckCircleIcon, color: 'text-green-500' },
            { label: 'Pending Payment', count: pendingCount, icon: ClockIcon, color: 'text-yellow-500' },
            { label: 'Checked In', count: checkedInCount, icon: TicketIcon, color: 'text-blue-500' },
            { label: 'Cancelled', count: cancelledCount, icon: XCircleIcon, color: 'text-red-500' },
          ].map((item) => (
            <div key={item.label} className="flex items-center justify-between p-2.5 bg-gray-50 rounded-btn">
              <div className="flex items-center gap-2">
                <item.icon className={clsx('w-4 h-4', item.color)} />
                <span className="text-sm">{item.label}</span>
              </div>
              <span className="font-semibold text-sm">{item.count}</span>
            </div>
          ))}
          <div className="border-t pt-2 mt-2">
            <div className="flex items-center justify-between font-semibold text-sm">
              <span>Total Bookings</span>
              <span>{ticketsCount}</span>
            </div>
          </div>
        </div>
      </Card>
    </div>
  );
}
