import React, { useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { adminApi } from '../../api/admin';
import { AppLayout } from '../../components/layout/AppLayout';
import { PageLoader } from '../../components/ui/LoadingSpinner';
import {
  Mail, Plus, Search, Trash2, X,
  Send, CheckCircle, AlertCircle, Eye,
} from 'lucide-react';
import type { EmailCampaign, EmailCampaignStatus } from '../../types';

const STATUS_COLORS: Record<string, string> = {
  draft: 'bg-surface-100 text-surface-600',
  scheduled: 'bg-blue-100 text-blue-700',
  sending: 'bg-brand-100 text-brand-700',
  sent: 'bg-brand-100 text-brand-700',
  completed: 'bg-success/10 text-success',
  paused: 'bg-warning/10 text-warning',
  failed: 'bg-red-100 text-red-700',
};

const STATUS_ICONS: Record<string, React.ReactNode> = {
  draft: null,
  scheduled: <AlertCircle className="mr-1 h-3 w-3" />,
  sending: <Send className="mr-1 h-3 w-3" />,
  sent: <Send className="mr-1 h-3 w-3" />,
  completed: <CheckCircle className="mr-1 h-3 w-3" />,
  paused: <AlertCircle className="mr-1 h-3 w-3" />,
  failed: <AlertCircle className="mr-1 h-3 w-3" />,
};

export function EmailCampaignsPage() {
  const queryClient = useQueryClient();
  const [search, setSearch] = useState('');
  const [showCreateModal, setShowCreateModal] = useState(false);
  const [newName, setNewName] = useState('');
  const [newSubject, setNewSubject] = useState('');
  const [newRecipients, setNewRecipients] = useState('');

  const { data, isLoading } = useQuery({
    queryKey: ['email-campaigns'],
    queryFn: () => adminApi.getEmailCampaigns(),
  });

  const campaigns = data?.items ?? [];

  const createMutation = useMutation({
    mutationFn: (data: { name: string; subject?: string; recipients?: { email: string }[] }) =>
      adminApi.createEmailCampaign(data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['email-campaigns'] });
      setShowCreateModal(false);
      setNewName('');
      setNewSubject('');
      setNewRecipients('');
    },
  });

  const deleteMutation = useMutation({
    mutationFn: (id: string) => adminApi.deleteEmailCampaign(id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['email-campaigns'] });
    },
  });

  const filtered = campaigns.filter((c) =>
    c.name.toLowerCase().includes(search.toLowerCase()) ||
    c.subject.toLowerCase().includes(search.toLowerCase())
  );

  const handleCreate = () => {
    if (!newName.trim()) return;
    const recipients = newRecipients
      .split(',')
      .map(r => r.trim())
      .filter(r => r.includes('@'))
      .map(email => ({ email }));
    createMutation.mutate({
      name: newName.trim(),
      subject: newSubject.trim(),
      recipients: recipients.length ? recipients : undefined,
    });
  };

  if (isLoading) {
    return (
      <AppLayout title="Email Campaigns">
        <PageLoader />
      </AppLayout>
    );
  }

  return (
    <AppLayout title="Email Campaigns">
      {/* Header */}
      <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h1 className="text-xl sm:text-2xl font-bold text-surface-900">Email Delivery</h1>
          <p className="mt-1 text-sm text-surface-500">
            {campaigns.length} campaign{campaigns.length !== 1 ? 's' : ''} tracked
          </p>
        </div>
        <div className="flex gap-3">
          <div className="relative">
            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-surface-500" />
            <input
              type="text"
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              placeholder="Search campaigns..."
              className="w-full rounded-lg border border-surface-300 py-2.5 pl-9 pr-4 text-sm outline-none focus:border-brand-500 sm:w-64 min-h-[44px]"
            />
          </div>
          <button
            onClick={() => setShowCreateModal(true)}
            className="flex items-center gap-2 rounded-lg bg-brand-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-700 min-h-[44px]"
          >
            <Plus className="h-4 w-4" />
            New Campaign
          </button>
        </div>
      </div>

      {/* Campaigns */}
      {filtered.length === 0 ? (
        <div className="flex flex-col items-center justify-center rounded-xl border border-surface-200 bg-white py-16">
          <Mail className="h-12 w-12 text-surface-300" />
          <p className="mt-4 text-sm font-medium text-surface-700">
            {search ? 'No campaigns match your search' : 'No email campaigns yet'}
          </p>
          <p className="mt-1 text-xs text-surface-500">
            Create a campaign to track email delivery metrics
          </p>
        </div>
      ) : (
        <div className="rounded-xl border border-surface-200 bg-white overflow-x-auto">
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b border-surface-200">
                <th className="pb-3 pl-5 text-left font-medium text-surface-500">Campaign</th>
                <th className="pb-3 text-left font-medium text-surface-500">Status</th>
                <th className="pb-3 text-right font-medium text-surface-500">Sent</th>
                <th className="pb-3 text-right font-medium text-surface-500">Delivered</th>
                <th className="pb-3 text-right font-medium text-surface-500">Opened</th>
                <th className="pb-3 text-right font-medium text-surface-500">Bounced</th>
                <th className="pb-3 text-right font-medium text-surface-500">Failed</th>
                <th className="pb-3 pr-5 w-10"></th>
              </tr>
            </thead>
            <tbody className="divide-y divide-surface-100">
              {filtered.map((campaign) => (
                <CampaignRow
                  key={campaign.id}
                  campaign={campaign}
                  onDelete={() => deleteMutation.mutate(campaign.id)}
                  isDeleting={deleteMutation.isPending && deleteMutation.variables === campaign.id}
                />
              ))}
            </tbody>
          </table>
        </div>
      )}

      {/* Create Modal */}
      {showCreateModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
          <div className="w-full max-w-md rounded-xl bg-white p-6 shadow-xl">
            <div className="mb-4 flex items-center justify-between">
              <h2 className="text-lg font-bold text-surface-900">Create Email Campaign</h2>
              <button
                onClick={() => { setShowCreateModal(false); setNewName(''); setNewSubject(''); setNewRecipients(''); }}
                className="rounded-lg p-1 text-surface-400 hover:bg-surface-100 hover:text-surface-600"
              >
                <X className="h-5 w-5" />
              </button>
            </div>
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-surface-700 mb-1">Name</label>
                <input
                  type="text"
                  value={newName}
                  onChange={(e) => setNewName(e.target.value)}
                  placeholder="e.g. Q3 Newsletter"
                  className="w-full rounded-lg border border-surface-300 px-3 py-2.5 text-sm outline-none focus:border-brand-500"
                  autoFocus
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-surface-700 mb-1">Subject</label>
                <input
                  type="text"
                  value={newSubject}
                  onChange={(e) => setNewSubject(e.target.value)}
                  placeholder="Email subject line"
                  className="w-full rounded-lg border border-surface-300 px-3 py-2.5 text-sm outline-none focus:border-brand-500"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-surface-700 mb-1">
                  Recipients (comma-separated emails)
                </label>
                <textarea
                  value={newRecipients}
                  onChange={(e) => setNewRecipients(e.target.value)}
                  placeholder="user1@example.com, user2@example.com"
                  rows={3}
                  className="w-full rounded-lg border border-surface-300 px-3 py-2.5 text-sm outline-none focus:border-brand-500 resize-none"
                />
              </div>
              <div className="flex justify-end gap-3">
                <button
                  onClick={() => { setShowCreateModal(false); setNewName(''); setNewSubject(''); setNewRecipients(''); }}
                  className="rounded-lg border border-surface-300 px-4 py-2.5 text-sm font-medium text-surface-700 hover:bg-surface-50 min-h-[44px]"
                >
                  Cancel
                </button>
                <button
                  onClick={handleCreate}
                  disabled={!newName.trim() || createMutation.isPending}
                  className="rounded-lg bg-brand-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-700 disabled:opacity-50 min-h-[44px]"
                >
                  {createMutation.isPending ? 'Creating...' : 'Create'}
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </AppLayout>
  );
}

function CampaignRow({ campaign, onDelete, isDeleting }: {
  campaign: EmailCampaign;
  onDelete: () => void;
  isDeleting: boolean;
}) {
  const deliveryRate = campaign.total_sent > 0
    ? Math.round((campaign.delivered / campaign.total_sent) * 100)
    : 0;
  const openRate = campaign.delivered > 0
    ? Math.round((campaign.opened / campaign.delivered) * 100)
    : 0;

  return (
    <tr className="group hover:bg-surface-50">
      <td className="py-3 pl-5">
        <a href={`/admin/email-campaigns/${campaign.id}`} className="flex items-center gap-3">
          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-brand-100 text-brand-600">
            <Mail className="h-4 w-4" />
          </div>
          <div className="min-w-0">
            <p className="font-medium text-surface-900 truncate group-hover:text-brand-700">
              {campaign.name}
            </p>
            <p className="text-xs text-surface-500 truncate">{campaign.subject || 'No subject'}</p>
          </div>
        </a>
      </td>
      <td className="py-3">
        <span className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${STATUS_COLORS[campaign.status] || 'bg-surface-200 text-surface-600'}`}>
          {STATUS_ICONS[campaign.status]}
          {campaign.status}
        </span>
      </td>
      <td className="py-3 text-right font-medium text-surface-900">{campaign.total_sent}</td>
      <td className="py-3 text-right">
        <span className="text-surface-700">{campaign.delivered}</span>
        <span className="ml-1 text-xs text-surface-400">({deliveryRate}%)</span>
      </td>
      <td className="py-3 text-right">
        <span className="text-surface-700">{campaign.opened}</span>
        <span className="ml-1 text-xs text-surface-400">({openRate}%)</span>
      </td>
      <td className="py-3 text-right text-surface-600">{campaign.bounced}</td>
      <td className="py-3 text-right text-red-600">{campaign.failed}</td>
      <td className="py-3 pr-5 text-right">
        <button
          onClick={(e) => { e.preventDefault(); e.stopPropagation(); onDelete(); }}
          className="rounded-lg p-1.5 text-surface-400 opacity-0 transition-opacity hover:bg-red-50 hover:text-red-600 group-hover:opacity-100"
          title="Delete campaign"
        >
          <Trash2 className="h-4 w-4" />
        </button>
      </td>
    </tr>
  );
}