'use client';

import { useEffect, useState } from 'react';
import { motion } from 'framer-motion';
import { FaDownload, FaSearch, FaCheck, FaTimes, FaClock, FaTelegramPlane, FaSave } from 'react-icons/fa';
import { useAlbums } from '@/lib/AlbumsContext';
import { Purchase } from '@/lib/types';
import { formatPrice } from '@/lib/utils';
import AdminLayout from '@/components/AdminLayout';

export default function AdminPurchasesPage() {
  const { albums } = useAlbums();
  const [purchases, setPurchases] = useState<Purchase[]>([]);
  const [searchTerm, setSearchTerm] = useState('');
  const [filterStatus, setFilterStatus] = useState<'all' | 'pending' | 'approved' | 'rejected'>('all');
  const [loading, setLoading] = useState(false);
  const [telegramIds, setTelegramIds] = useState('');
  const [telegramBaseUrl, setTelegramBaseUrl] = useState('https://api.telegram.org');
  const [telegramBotToken, setTelegramBotToken] = useState('');
  const [telegramGreeting, setTelegramGreeting] = useState('Welcome! Choose albums from the catalog below.');
  const [telegramCardNumber, setTelegramCardNumber] = useState('');
  const [telegramCardHolder, setTelegramCardHolder] = useState('');
  const [telegramConfigured, setTelegramConfigured] = useState(false);
  const [telegramWebhookSecretConfigured, setTelegramWebhookSecretConfigured] = useState(false);
  const [telegramSaving, setTelegramSaving] = useState(false);
  const [telegramRegistering, setTelegramRegistering] = useState(false);
  const [telegramMessage, setTelegramMessage] = useState('');

  const fetchPurchases = async (showLoading = true) => {
    if (showLoading) setLoading(true);
    try {
      const response = await fetch('/api/purchases');
      if (response.ok) {
        const data = await response.json();
        setPurchases(data.reverse());
      }
    } catch (error) {
      console.error('Error fetching purchases:', error);
    } finally {
      if (showLoading) setLoading(false);
    }
  };

  useEffect(() => {
    fetchPurchases();
    const refreshTimer = window.setInterval(() => fetchPurchases(false), 10_000);
    fetch('/api/telegram/settings')
      .then(async (response) => {
        if (!response.ok) throw new Error('Failed to load Telegram settings');
        return response.json();
      })
      .then((data) => {
        setTelegramIds(data.approvers.map((item: { userId: string }) => item.userId).join(', '));
        setTelegramBaseUrl(data.baseUrl || 'https://api.telegram.org');
        setTelegramGreeting(data.greetingText || 'Welcome! Choose albums from the catalog below.');
        setTelegramCardNumber(data.cardNumber || '');
        setTelegramCardHolder(data.cardHolderName || '');
        setTelegramConfigured(Boolean(data.botConfigured));
        setTelegramWebhookSecretConfigured(Boolean(data.webhookSecretConfigured));
      })
      .catch((error) => {
        console.error('Error fetching Telegram settings:', error);
        setTelegramMessage('Could not load Telegram settings.');
      });
    return () => window.clearInterval(refreshTimer);
  }, []);

  const saveTelegramSettings = async () => {
    const ids = telegramIds
      .split(/[\s,]+/)
      .map((id) => id.trim())
      .filter(Boolean);

    if (ids.some((id) => !/^\d+$/.test(id))) {
      setTelegramMessage('Telegram user IDs must contain digits only.');
      return;
    }

    setTelegramSaving(true);
    setTelegramMessage('');
    try {
      const response = await fetch('/api/telegram/settings', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          approvers: ids.map((userId) => ({ userId })),
          baseUrl: telegramBaseUrl,
          greetingText: telegramGreeting,
          cardNumber: telegramCardNumber,
          cardHolderName: telegramCardHolder,
          ...(telegramBotToken.trim() ? { botToken: telegramBotToken.trim() } : {}),
        }),
      });
      const data = await response.json();
      if (!response.ok) throw new Error(data.error || 'Failed to save Telegram approvers');
      setTelegramIds(data.approvers.map((item: { userId: string }) => item.userId).join(', '));
      setTelegramBaseUrl(data.baseUrl);
      setTelegramGreeting(data.greetingText);
      setTelegramCardNumber(data.cardNumber);
      setTelegramCardHolder(data.cardHolderName);
      setTelegramBotToken('');
      setTelegramConfigured(Boolean(data.botConfigured));
      setTelegramWebhookSecretConfigured(Boolean(data.webhookSecretConfigured));
      setTelegramMessage('Telegram settings saved.');
    } catch (error) {
      setTelegramMessage(error instanceof Error ? error.message : 'Failed to save Telegram approvers.');
    } finally {
      setTelegramSaving(false);
    }
  };

  const registerTelegramWebhook = async () => {
    setTelegramRegistering(true);
    setTelegramMessage('');
    try {
      const response = await fetch('/api/telegram/settings', { method: 'POST' });
      const data = await response.json();
      if (!response.ok) throw new Error(data.error || 'Failed to register Telegram webhook');
      setTelegramMessage(data.message);
    } catch (error) {
      setTelegramMessage(error instanceof Error ? error.message : 'Failed to register Telegram webhook.');
    } finally {
      setTelegramRegistering(false);
    }
  };

  const handleApprove = async (purchaseId: number) => {
    try {
      const response = await fetch(`/api/purchases/${purchaseId}/approve`, {
        method: 'PATCH',
      });
      if (response.ok) {
        fetchPurchases();
      }
    } catch (error) {
      console.error('Error approving purchase:', error);
      alert('Failed to approve purchase');
    }
  };

  const handleReject = async (purchaseId: number) => {
    try {
      const response = await fetch(`/api/purchases/${purchaseId}/reject`, {
        method: 'PATCH',
      });
      if (response.ok) {
        fetchPurchases();
      }
    } catch (error) {
      console.error('Error rejecting purchase:', error);
      alert('Failed to reject purchase');
    }
  };

  const filteredPurchases = purchases.filter((purchase) => {
    const purchaseAlbumIds = purchase.albumIds || [purchase.albumId];
    const purchaseAlbums = albums.filter((album) => purchaseAlbumIds.includes(album.id));
    const matchesSearch =
      purchaseAlbums.some((album) => album.title.toLowerCase().includes(searchTerm.toLowerCase())) ||
      purchase.transactionId.toLowerCase().includes(searchTerm.toLowerCase()) ||
      purchase.customerName?.toLowerCase().includes(searchTerm.toLowerCase()) ||
      purchase.email?.toLowerCase().includes(searchTerm.toLowerCase());

    const matchesStatus = filterStatus === 'all' || purchase.approvalStatus === filterStatus;

    return matchesSearch && matchesStatus;
  });

  const pendingPurchases = purchases.filter(p => p.approvalStatus === 'pending');
  const approvedPurchases = purchases.filter(p => p.approvalStatus === 'approved');

  const totalRevenue = approvedPurchases.reduce((total, purchase) => {
    const purchaseAlbumIds = purchase.albumIds || [purchase.albumId];
    return total + albums
      .filter((album) => purchaseAlbumIds.includes(album.id))
      .reduce((subtotal, album) => subtotal + album.price, 0);
  }, 0);

  const exportToCSV = () => {
    const headers = ['Date', 'Time', 'Transaction ID', 'Album', 'Price', 'Customer', 'Email', 'Phone', 'Status', 'Payment Method'];
    const rows = purchases.map((purchase) => {
      const purchaseAlbumIds = purchase.albumIds || [purchase.albumId];
      const purchaseAlbums = albums.filter((album) => purchaseAlbumIds.includes(album.id));
      const date = new Date(purchase.purchaseDate);
      return [
        date.toLocaleDateString(),
        date.toLocaleTimeString(),
        purchase.transactionId,
        purchaseAlbums.map((album) => album.title).join(' + ') || 'Unknown',
        purchaseAlbums.reduce((total, album) => total + album.price, 0),
        purchase.customerName || '',
        purchase.email || '',
        purchase.phoneNumber || '',
        purchase.approvalStatus || 'pending',
        purchase.paymentMethod || 'card-to-card',
      ];
    });

    const csvContent = [headers, ...rows].map((row) => row.join(',')).join('\n');
    const blob = new Blob([csvContent], { type: 'text/csv' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `purchases-${new Date().toISOString().split('T')[0]}.csv`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  };

  const getStatusBadge = (status?: string) => {
    const statusLower = (status || 'pending').toLowerCase();
    if (statusLower === 'approved') {
      return (
        <span className="px-2 py-1 bg-green-100 border border-green-400 text-green-700 text-xs font-semibold">
          Approved
        </span>
      );
    } else if (statusLower === 'rejected') {
      return (
        <span className="px-2 py-1 bg-red-100 border border-red-400 text-red-700 text-xs font-semibold">
          Rejected
        </span>
      );
    } else {
      return (
        <span className="px-2 py-1 bg-orange-100 border border-orange-400 text-orange-700 text-xs font-semibold flex items-center gap-1">
          <FaClock className="text-xs" /> Pending
        </span>
      );
    }
  };

  return (
    <AdminLayout>
      <div className="p-8">
        {/* Header */}
        <div className="flex items-center justify-between mb-8">
          <div>
            <h1 className="text-3xl font-bold text-paper-dark mb-2 border-b-4 border-paper-dark inline-block pb-1">
              Purchase Management
            </h1>
            <p className="text-paper-gray mt-4">
              {purchases.length} total • {pendingPurchases.length} pending • {formatPrice(totalRevenue)} revenue
            </p>
          </div>
          <motion.button
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            onClick={exportToCSV}
            className="px-6 py-3 bg-paper-brown hover:bg-paper-dark border-2 border-paper-dark font-semibold text-paper-light transition-all shadow-paper-lg flex items-center gap-2"
          >
            <FaDownload />
            Export CSV
          </motion.button>
        </div>

        <div className="paper-card p-5 mb-6">
          <div className="space-y-4">
            <div className="flex-1">
              <div className="flex items-center gap-2 mb-2">
                <FaTelegramPlane className="text-paper-brown" />
                <label htmlFor="telegram-approvers" className="font-semibold text-paper-dark">
                  Telegram purchase approvers
                </label>
                <span className={`text-xs px-2 py-1 border ${
                  telegramConfigured
                    ? 'bg-green-100 border-green-400 text-green-700'
                    : 'bg-orange-100 border-orange-400 text-orange-700'
                }`}>
                  {telegramConfigured ? 'Bot configured' : 'Bot token missing'}
                </span>
              </div>
              <div className="grid md:grid-cols-2 gap-4 mb-4">
                <div>
                  <label htmlFor="telegram-base-url" className="block text-sm font-medium text-paper-dark mb-1">
                    Telegram API base URL
                  </label>
                  <input
                    id="telegram-base-url"
                    type="url"
                    value={telegramBaseUrl}
                    onChange={(event) => setTelegramBaseUrl(event.target.value)}
                    placeholder="https://api.telegram.org"
                    className="w-full px-4 py-3 bg-paper-light border-2 border-paper-brown focus:border-paper-dark focus:outline-none text-paper-dark placeholder-paper-gray shadow-paper"
                  />
                </div>
                <div>
                  <label htmlFor="telegram-bot-token" className="block text-sm font-medium text-paper-dark mb-1">
                    Bot token
                  </label>
                  <input
                    id="telegram-bot-token"
                    type="password"
                    value={telegramBotToken}
                    onChange={(event) => setTelegramBotToken(event.target.value)}
                    placeholder={telegramConfigured ? 'Saved — leave blank to keep it' : 'Paste the BotFather token'}
                    autoComplete="new-password"
                    className="w-full px-4 py-3 bg-paper-light border-2 border-paper-brown focus:border-paper-dark focus:outline-none text-paper-dark placeholder-paper-gray shadow-paper"
                  />
                </div>
              </div>
              <div className="mb-4">
                <label htmlFor="telegram-greeting" className="block text-sm font-medium text-paper-dark mb-1">
                  Greeting message
                </label>
                <textarea
                  id="telegram-greeting"
                  value={telegramGreeting}
                  onChange={(event) => setTelegramGreeting(event.target.value)}
                  rows={3}
                  className="w-full px-4 py-3 bg-paper-light border-2 border-paper-brown focus:border-paper-dark focus:outline-none text-paper-dark placeholder-paper-gray shadow-paper"
                />
              </div>
              <div className="grid md:grid-cols-2 gap-4 mb-4">
                <div>
                  <label htmlFor="telegram-card-number" className="block text-sm font-medium text-paper-dark mb-1">
                    Payment card number
                  </label>
                  <input
                    id="telegram-card-number"
                    type="text"
                    value={telegramCardNumber}
                    onChange={(event) => setTelegramCardNumber(event.target.value)}
                    placeholder="6037 9975 1234 5678"
                    className="w-full px-4 py-3 bg-paper-light border-2 border-paper-brown focus:border-paper-dark focus:outline-none text-paper-dark placeholder-paper-gray shadow-paper"
                  />
                </div>
                <div>
                  <label htmlFor="telegram-card-holder" className="block text-sm font-medium text-paper-dark mb-1">
                    Cardholder name
                  </label>
                  <input
                    id="telegram-card-holder"
                    type="text"
                    value={telegramCardHolder}
                    onChange={(event) => setTelegramCardHolder(event.target.value)}
                    placeholder="Account holder name"
                    className="w-full px-4 py-3 bg-paper-light border-2 border-paper-brown focus:border-paper-dark focus:outline-none text-paper-dark placeholder-paper-gray shadow-paper"
                  />
                </div>
              </div>
              <label htmlFor="telegram-approvers" className="block text-sm font-medium text-paper-dark mb-1">
                Authorized Telegram user IDs
              </label>
              <input
                id="telegram-approvers"
                type="text"
                value={telegramIds}
                onChange={(event) => setTelegramIds(event.target.value)}
                placeholder="123456789, 987654321"
                className="w-full px-4 py-3 bg-paper-light border-2 border-paper-brown focus:border-paper-dark focus:outline-none text-paper-dark placeholder-paper-gray shadow-paper"
              />
              <p className="text-xs text-paper-gray mt-2">
                Comma-separated Telegram user IDs. A user can send /id to the bot to find their ID.
              </p>
              {!telegramWebhookSecretConfigured && (
                <p className="text-xs text-orange-700 mt-2">
                  TELEGRAM_WEBHOOK_SECRET must be set on the server before registering the webhook.
                </p>
              )}
              {telegramMessage && <p className="text-sm text-paper-dark mt-2">{telegramMessage}</p>}
            </div>
            <div className="flex flex-wrap gap-3">
              <button
                onClick={saveTelegramSettings}
                disabled={telegramSaving}
                className="px-5 py-3 bg-paper-brown hover:bg-paper-dark border-2 border-paper-dark text-paper-light font-semibold disabled:opacity-50 flex items-center justify-center gap-2"
              >
                <FaSave />
                {telegramSaving ? 'Saving...' : 'Save Telegram settings'}
              </button>
              <button
                onClick={registerTelegramWebhook}
                disabled={telegramRegistering || !telegramConfigured || !telegramWebhookSecretConfigured}
                className="px-5 py-3 bg-paper-light hover:bg-paper-sand border-2 border-paper-brown text-paper-dark font-semibold disabled:opacity-50 flex items-center justify-center gap-2"
              >
                <FaTelegramPlane />
                {telegramRegistering ? 'Registering...' : 'Register webhook'}
              </button>
            </div>
          </div>
        </div>

        {/* Filters */}
        <div className="mb-6 space-y-4">
          <div className="flex gap-2">
            {(['all', 'pending', 'approved', 'rejected'] as const).map((status) => (
              <button
                key={status}
                onClick={() => setFilterStatus(status)}
                className={`px-4 py-2 border-2 font-medium transition-all ${
                  filterStatus === status
                    ? 'bg-paper-brown text-paper-light border-paper-dark'
                    : 'bg-paper-light text-paper-dark border-paper-brown hover:bg-paper-sand'
                }`}
              >
                {status.charAt(0).toUpperCase() + status.slice(1)}
              </button>
            ))}
          </div>

          <div className="relative">
            <FaSearch className="absolute left-4 top-1/2 -translate-y-1/2 text-paper-gray" />
            <input
              type="text"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              placeholder="Search by album, transaction ID, customer name, or email..."
              className="w-full pl-12 pr-4 py-3 bg-paper-light border-2 border-paper-brown focus:border-paper-dark focus:outline-none text-paper-dark placeholder-paper-gray shadow-paper"
            />
          </div>
        </div>

        {/* Purchases Table */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className="paper-card border-2 border-paper-brown shadow-paper overflow-hidden"
        >
          {loading ? (
            <div className="p-12 text-center">
              <p className="text-paper-gray">Loading purchases...</p>
            </div>
          ) : filteredPurchases.length > 0 ? (
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead className="bg-paper-brown/20 border-b-2 border-paper-brown">
                  <tr>
                    <th className="text-left p-4 text-sm font-semibold text-paper-dark">Date & Time</th>
                    <th className="text-left p-4 text-sm font-semibold text-paper-dark">Transaction ID</th>
                    <th className="text-left p-4 text-sm font-semibold text-paper-dark">Customer</th>
                    <th className="text-left p-4 text-sm font-semibold text-paper-dark">Album</th>
                    <th className="text-center p-4 text-sm font-semibold text-paper-dark">Payment</th>
                    <th className="text-center p-4 text-sm font-semibold text-paper-dark">Status</th>
                    <th className="text-right p-4 text-sm font-semibold text-paper-dark">Price</th>
                    <th className="text-center p-4 text-sm font-semibold text-paper-dark">Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {filteredPurchases.map((purchase, index) => {
                    const purchaseAlbumIds = purchase.albumIds || [purchase.albumId];
                    const purchaseAlbums = albums.filter((album) => purchaseAlbumIds.includes(album.id));
                    const date = new Date(purchase.purchaseDate);

                    return (
                      <motion.tr
                        key={purchase.id || purchase.transactionId}
                        initial={{ opacity: 0, x: -20 }}
                        animate={{ opacity: 1, x: 0 }}
                        transition={{ delay: index * 0.05 }}
                        className="border-b border-paper-brown/30 hover:bg-paper-sand/50 transition-colors"
                      >
                        <td className="p-4 text-paper-dark">
                          <div className="text-sm">{date.toLocaleDateString()}</div>
                          <div className="text-xs text-paper-gray">{date.toLocaleTimeString()}</div>
                        </td>
                        <td className="p-4">
                          <code className="text-xs text-paper-brown bg-paper-brown/10 px-2 py-1 border border-paper-brown">
                            {purchase.transactionId}
                          </code>
                          {purchase.txReceipt && (
                            <div className="text-xs text-paper-gray mt-1">
                              Receipt: {purchase.txReceipt}
                            </div>
                          )}
                        </td>
                        <td className="p-4">
                          <div className="text-sm text-paper-dark">{purchase.customerName || 'N/A'}</div>
                          <div className="text-xs text-paper-gray">{purchase.email}</div>
                          <div className="text-xs text-paper-gray">{purchase.phoneNumber}</div>
                        </td>
                        <td className="p-4">
                          <div className="text-paper-dark font-medium">
                            {purchaseAlbums.map((album) => album.title).join(', ') || 'Unknown'}
                          </div>
                          <div className="text-xs text-paper-gray">
                            {purchaseAlbums.length} album{purchaseAlbums.length === 1 ? '' : 's'} • {' '}
                            {purchaseAlbums.reduce((total, album) => total + album.songs.length, 0)} tracks
                          </div>
                        </td>
                        <td className="p-4 text-center">
                          <span className="text-xs text-paper-brown bg-paper-brown/10 px-2 py-1 border border-paper-brown">
                            {purchase.paymentMethod === 'ipg' ? 'IPG' : 'Card-to-Card'}
                          </span>
                        </td>
                        <td className="p-4 text-center">
                          {getStatusBadge(purchase.approvalStatus)}
                          {purchase.reviewedByTelegramId && (
                            <div className="text-xs text-paper-gray mt-1">
                              Telegram: {purchase.reviewedByTelegramId}
                            </div>
                          )}
                        </td>
                        <td className="p-4 text-right">
                          <span className="text-paper-brown font-bold">
                            {formatPrice(purchaseAlbums.reduce((total, album) => total + album.price, 0))}
                          </span>
                        </td>
                        <td className="p-4">
                          {purchase.approvalStatus === 'pending' && (
                            <div className="flex gap-2 justify-center">
                              <button
                                onClick={() => purchase.id && handleApprove(purchase.id)}
                                className="p-2 bg-green-100 hover:bg-green-200 border-2 border-green-400 text-green-700 transition-colors"
                                title="Approve"
                              >
                                <FaCheck />
                              </button>
                              <button
                                onClick={() => purchase.id && handleReject(purchase.id)}
                                className="p-2 bg-red-100 hover:bg-red-200 border-2 border-red-400 text-red-700 transition-colors"
                                title="Reject"
                              >
                                <FaTimes />
                              </button>
                            </div>
                          )}
                        </td>
                      </motion.tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          ) : (
            <div className="p-12 text-center">
              <p className="text-paper-gray">
                {searchTerm || filterStatus !== 'all' ? 'No purchases found matching your filters' : 'No purchases yet'}
              </p>
            </div>
          )}
        </motion.div>
      </div>
    </AdminLayout>
  );
}