'use client';

import { useState, useEffect, useRef } from 'react';
import { appealsService, type Appeal, type AppealScenario, type AppealStatus } from '@/services/appeals.service';
import { cn, formatDateTime } from '@/lib/utils';
import { TableSkeleton } from '@/components/priority/skeletons';
import EmptyState from '@/components/EmptyState';
import {
  RefreshCw, Plus, X, Eye, Upload, AlertTriangle, Gavel,
  FileText, Video,
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';

const SCENARIO_LABELS: Record<AppealScenario, string> = {
  PAYMENT_ISSUE: 'Payment Issue',
  BALANCE_DISPUTE: 'Balance Dispute',
  REFERRAL_FREEZE_DISPUTE: 'Referral Freeze Dispute',
  OTHER: 'Other',
  BUYER_PAYMENT_ISSUE: 'Buyer Payment Issue',
  SELLER_PAYMENT_NOT_RECEIVED: 'Seller Payment Not Received',
  BALANCE_DEDUCTION_DISPUTE: 'Balance Deduction Dispute',
};

const STATUS_COLORS: Record<AppealStatus, 'success' | 'warning' | 'danger' | 'info' | 'neutral'> = {
  OPEN: 'warning',
  RESOLVED_COMPLETED: 'success',
  RESOLVED_REJECTED: 'danger',
  DISMISSED: 'neutral',
  REQUEST_MORE_PROOF: 'info',
};

function AppealDetailModal({ appeal, onClose }: { appeal: Appeal; onClose: () => void }) {
  const [showImageModal, setShowImageModal] = useState(false);
  const [selectedImage, setSelectedImage] = useState<string | null>(null);

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4" onClick={onClose}>
      <div className="w-full max-w-2xl rounded-xl border border-white/10 bg-slate-900 shadow-2xl max-h-[90vh] overflow-hidden flex flex-col" onClick={(e) => e.stopPropagation()}>
        <div className="flex items-center justify-between border-b border-white/10 p-5 shrink-0">
          <div>
            <h2 className="text-lg font-semibold text-white">Appeal Details</h2>
            <p className="text-sm text-slate-400">ID: {appeal.id}</p>
          </div>
          <button onClick={onClose} className="rounded-lg p-1 text-slate-400 hover:text-white"><X className="h-5 w-5" /></button>
        </div>
        <div className="flex-1 overflow-y-auto p-5 space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <p className="text-xs text-slate-400">Scenario</p>
              <p className="text-sm text-white">{SCENARIO_LABELS[appeal.scenario]}</p>
            </div>
            <div>
              <p className="text-xs text-slate-400">Status</p>
              <Badge variant={STATUS_COLORS[appeal.status]}>{appeal.status.replace(/_/g, ' ')}</Badge>
            </div>
            <div>
              <p className="text-xs text-slate-400">Reason</p>
              <p className="text-sm text-white">{appeal.reason}</p>
            </div>
            <div>
              <p className="text-xs text-slate-400">Created</p>
              <p className="text-sm text-white">{formatDateTime(appeal.createdAt)}</p>
            </div>
            {appeal.orderId && (
              <div>
                <p className="text-xs text-slate-400">Order ID</p>
                <p className="text-sm text-white font-mono">{appeal.orderId}</p>
              </div>
            )}
            {appeal.tradeId && (
              <div>
                <p className="text-xs text-slate-400">Trade ID</p>
                <p className="text-sm text-white font-mono">{appeal.tradeId}</p>
              </div>
            )}
            <div className="md:col-span-2">
              <p className="text-xs text-slate-400">Description</p>
              <p className="text-sm text-white whitespace-pre-wrap">{appeal.description}</p>
            </div>
            {Object.keys(appeal.scenarioData ?? {}).length > 0 && (
              <div className="md:col-span-2">
                <p className="text-xs text-slate-400">Scenario Data</p>
                <pre className="mt-1 rounded-lg bg-white/5 p-3 text-xs text-slate-200 overflow-auto">{JSON.stringify(appeal.scenarioData, null, 2)}</pre>
              </div>
            )}
            {appeal.adminNotes && (
              <div className="md:col-span-2">
                <p className="text-xs text-slate-400">Admin Notes</p>
                <p className="text-sm text-white whitespace-pre-wrap">{appeal.adminNotes}</p>
              </div>
            )}
          </div>
          {appeal.evidence.length > 0 && (
            <div>
              <p className="text-xs font-medium uppercase text-slate-400 mb-2">Evidence Files</p>
              <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
                {appeal.evidence.map((ev) => (
                  <div
                    key={ev.id}
                    className="rounded-lg border border-white/10 overflow-hidden cursor-pointer group"
                    onClick={() => { setSelectedImage(ev.url); setShowImageModal(true); }}
                  >
                    {ev.type === 'IMAGE' || ev.type === 'VIDEO' ? (
                      <div className="relative aspect-video bg-white/5">
                        <img src={ev.url} alt={ev.filename} className="w-full h-full object-cover" />
                        <div className="absolute inset-0 flex items-center justify-center bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity">
                          <Eye className="h-6 w-6 text-white" />
                        </div>
                        {ev.type === 'VIDEO' && (
                          <div className="absolute inset-0 flex items-center justify-center">
                            <Video className="h-8 w-8 text-white" />
                          </div>
                        )}
                      </div>
                    ) : (
                      <div className="flex items-center gap-2 p-3 bg-white/5">
                        <FileText className="h-5 w-5 text-slate-400" />
                        <span className="text-xs text-slate-300 truncate">{ev.filename}</span>
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
        {showImageModal && selectedImage && (
          <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/80 p-8" onClick={() => setShowImageModal(false)}>
            <img src={selectedImage} alt="Evidence full" className="max-h-full max-w-full object-contain rounded-lg shadow-2xl" onClick={(e) => e.stopPropagation()} />
            <button onClick={() => setShowImageModal(false)} className="absolute top-6 right-6 rounded-lg bg-white/10 p-2 text-white hover:bg-white/20"><X className="h-6 w-6" /></button>
          </div>
        )}
      </div>
    </div>
  );
}

function CreateAppealModal({ onClose, onCreated }: { onClose: () => void; onCreated: () => void }) {
  const [scenario, setScenario] = useState<AppealScenario>('OTHER');
  const [reason, setReason] = useState('');
  const [description, setDescription] = useState('');
  const [orderId, setOrderId] = useState('');
  const [tradeId, setTradeId] = useState('');
  const [walletAddress, setWalletAddress] = useState('');
  const [transactionId, setTransactionId] = useState('');
  const [amount, setAmount] = useState('');
  const [balanceAmount, setBalanceAmount] = useState('');
  const [referralMessage, setReferralMessage] = useState('');
  const [evidence, setEvidence] = useState<File[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);
  const fileRef = useRef<HTMLInputElement>(null);

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = Array.from(e.target.files || []);
    setEvidence((prev) => [...prev, ...files]);
  };

  const removeFile = (index: number) => {
    setEvidence((prev) => prev.filter((_, i) => i !== index));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setError(null);
    setSuccess(null);
    try {
      const scenarioData: Record<string, unknown> = {};
      if (scenario === 'PAYMENT_ISSUE') {
        scenarioData.walletAddress = walletAddress;
        scenarioData.transactionId = transactionId;
        scenarioData.amount = amount;
      } else if (scenario === 'BALANCE_DISPUTE') {
        scenarioData.amount = balanceAmount;
      } else if (scenario === 'REFERRAL_FREEZE_DISPUTE') {
        scenarioData.message = referralMessage;
      }
      await appealsService.createAppeal(
        { scenario, reason, description, orderId: orderId || undefined, tradeId: tradeId || undefined, scenarioData },
        evidence.length > 0 ? evidence : undefined,
      );
      setSuccess('Appeal submitted successfully');
      setTimeout(() => {
        onCreated();
        onClose();
      }, 800);
    } catch (err: any) {
      setError(err?.message || 'Failed to create appeal');
    } finally {
      setLoading(false);
    }
  };

  const renderScenarioFields = () => {
    switch (scenario) {
      case 'PAYMENT_ISSUE':
        return (
          <>
            <div>
              <label className="mb-1 block text-sm font-medium text-slate-300">Wallet Address</label>
              <input value={walletAddress} onChange={(e) => setWalletAddress(e.target.value)} className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-white placeholder:text-slate-400 focus:border-blue-500 focus:outline-none" placeholder="Enter wallet address" />
            </div>
            <div>
              <label className="mb-1 block text-sm font-medium text-slate-300">Transaction ID</label>
              <input value={transactionId} onChange={(e) => setTransactionId(e.target.value)} className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-white placeholder:text-slate-400 focus:border-blue-500 focus:outline-none" placeholder="Enter transaction ID" />
            </div>
            <div>
              <label className="mb-1 block text-sm font-medium text-slate-300">Amount</label>
              <input type="number" step="0.01" value={amount} onChange={(e) => setAmount(e.target.value)} className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-white placeholder:text-slate-400 focus:border-blue-500 focus:outline-none" placeholder="0.00" />
            </div>
          </>
        );
      case 'BALANCE_DISPUTE':
        return (
          <div>
            <label className="mb-1 block text-sm font-medium text-slate-300">Amount in Dispute</label>
            <input type="number" step="0.01" value={balanceAmount} onChange={(e) => setBalanceAmount(e.target.value)} className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-white placeholder:text-slate-400 focus:border-blue-500 focus:outline-none" placeholder="0.00" />
          </div>
        );
      case 'REFERRAL_FREEZE_DISPUTE':
        return (
          <div>
            <label className="mb-1 block text-sm font-medium text-slate-300">Message</label>
            <textarea value={referralMessage} onChange={(e) => setReferralMessage(e.target.value)} rows={3} className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-white placeholder:text-slate-400 focus:border-blue-500 focus:outline-none resize-none" placeholder="Explain why your referral freeze should be reviewed..." />
          </div>
        );
      case 'OTHER':
      default:
        return null;
    }
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4" onClick={onClose}>
      <div className="w-full max-w-lg rounded-xl border border-white/10 bg-slate-900 shadow-2xl max-h-[90vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
        <div className="flex items-center justify-between border-b border-white/10 p-5">
          <h2 className="text-lg font-semibold text-white">Create Appeal</h2>
          <button onClick={onClose} className="rounded-lg p-1 text-slate-400 hover:text-white"><X className="h-5 w-5" /></button>
        </div>
        <form onSubmit={handleSubmit} className="p-5 space-y-4">
          {error && <div className="rounded-lg border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-400">{error}</div>}
          {success && <div className="rounded-lg border border-emerald-500/30 bg-emerald-500/10 px-4 py-3 text-sm text-emerald-400">{success}</div>}
          <div>
            <label className="mb-1 block text-sm font-medium text-slate-300">Scenario</label>
            <select value={scenario} onChange={(e) => setScenario(e.target.value as AppealScenario)} className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-white">
              {Object.entries(SCENARIO_LABELS).map(([key, label]) => (
                <option key={key} value={key}>{label}</option>
              ))}
            </select>
          </div>
          <div>
            <label className="mb-1 block text-sm font-medium text-slate-300">Reason</label>
            <input value={reason} onChange={(e) => setReason(e.target.value)} required className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-white placeholder:text-slate-400 focus:border-blue-500 focus:outline-none" placeholder="Brief reason for the appeal" />
          </div>
          <div>
            <label className="mb-1 block text-sm font-medium text-slate-300">Description</label>
            <textarea value={description} onChange={(e) => setDescription(e.target.value)} required rows={4} className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-white placeholder:text-slate-400 focus:border-blue-500 focus:outline-none resize-none" placeholder="Provide detailed explanation..." />
          </div>
          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="mb-1 block text-sm font-medium text-slate-300">Order ID (optional)</label>
              <input value={orderId} onChange={(e) => setOrderId(e.target.value)} className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-white placeholder:text-slate-400 focus:border-blue-500 focus:outline-none" placeholder="Order ID" />
            </div>
            <div>
              <label className="mb-1 block text-sm font-medium text-slate-300">Trade ID (optional)</label>
              <input value={tradeId} onChange={(e) => setTradeId(e.target.value)} className="w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-white placeholder:text-slate-400 focus:border-blue-500 focus:outline-none" placeholder="Trade ID" />
            </div>
          </div>
          {renderScenarioFields()}
          <div>
            <label className="mb-1 block text-sm font-medium text-slate-300">Evidence Files</label>
            <input ref={fileRef} type="file" multiple accept="image/*,video/*" onChange={handleFileChange} className="hidden" />
            <button type="button" onClick={() => fileRef.current?.click()} className="w-full rounded-lg border border-dashed border-white/20 bg-white/5 px-4 py-3 text-sm text-slate-300 hover:bg-white/10 flex items-center justify-center gap-2">
              <Upload className="h-4 w-4" />
              Upload Evidence (screenshots, videos, photos)
            </button>
            {evidence.length > 0 && (
              <div className="mt-2 space-y-1">
                {evidence.map((file, i) => (
                  <div key={i} className="flex items-center justify-between rounded-lg bg-white/5 px-3 py-2">
                    <span className="text-xs text-slate-300 truncate">{file.name}</span>
                    <button type="button" onClick={() => removeFile(i)} className="text-slate-400 hover:text-red-400"><X className="h-3 w-3" /></button>
                  </div>
                ))}
              </div>
            )}
          </div>
          <Button type="submit" loading={loading} className="w-full">
            <Gavel className="mr-2 h-4 w-4" />
            Submit Appeal
          </Button>
        </form>
      </div>
    </div>
  );
}

export default function UserAppealsPage() {
  const [appeals, setAppeals] = useState<Appeal[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [createModalOpen, setCreateModalOpen] = useState(false);
  const [selectedAppeal, setSelectedAppeal] = useState<Appeal | null>(null);

  const loadAppeals = async () => {
    setLoading(true);
    setError(null);
    try {
      const res = await appealsService.listUserAppeals({ limit: 50 });
      setAppeals(res.data);
    } catch (err: any) {
      setError(err?.message || 'Failed to load appeals');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    loadAppeals();
  }, []);

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-white">Appeals</h1>
          <p className="mt-1 text-sm text-slate-400">View and manage your appeals</p>
        </div>
        <Button onClick={() => setCreateModalOpen(true)}>
          <Plus className="mr-2 h-4 w-4" />
          Create Appeal
        </Button>
      </div>

      {error && <div className="rounded-lg border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-400">{error}</div>}

      <div className="rounded-xl border border-white/10 bg-slate-900/50 overflow-hidden">
        {loading ? (
          <div className="p-6"><TableSkeleton rows={5} /></div>
        ) : appeals.length === 0 ? (
          <div className="p-6">
            <EmptyState message="No appeals" description="You have not submitted any appeals yet" icon={<Gavel className="h-6 w-6" />} />
          </div>
        ) : (
          <div className="divide-y divide-white/5">
            {appeals.map((appeal) => (
              <div key={appeal.id} className="flex items-center justify-between p-4 hover:bg-white/5">
                <div className="flex items-center gap-4">
                  <div className="flex h-10 w-10 items-center justify-center rounded-full bg-white/10 text-slate-300">
                    <FileText className="h-5 w-5" />
                  </div>
                  <div>
                    <div className="flex items-center gap-2">
                      <p className="text-sm font-medium text-white">{SCENARIO_LABELS[appeal.scenario]}</p>
                      {appeal.isSuspicious && (
                        <span className="inline-flex items-center gap-1 rounded-full border border-red-500/30 bg-red-500/10 px-2 py-0.5 text-xs font-medium text-red-300">
                          <AlertTriangle className="h-3 w-3" />
                          URGENT
                        </span>
                      )}
                    </div>
                    <p className="text-xs text-slate-400 mt-0.5">{appeal.reason}</p>
                    <div className="flex items-center gap-3 mt-1">
                      <span className="text-xs text-slate-500">ID: {appeal.id.slice(0, 8)}...</span>
                      {appeal.orderId && <span className="text-xs text-slate-500">Order: {appeal.orderId.slice(0, 8)}...</span>}
                      {appeal.tradeId && <span className="text-xs text-slate-500">Trade: {appeal.tradeId.slice(0, 8)}...</span>}
                      <span className="text-xs text-slate-500">{formatDateTime(appeal.createdAt)}</span>
                    </div>
                  </div>
                </div>
                <div className="flex items-center gap-2">
                  <Badge variant={STATUS_COLORS[appeal.status]}>{appeal.status.replace(/_/g, ' ')}</Badge>
                  <Button size="sm" variant="ghost" onClick={() => setSelectedAppeal(appeal)}>
                    <Eye className="h-4 w-4" />
                  </Button>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

      {createModalOpen && (
        <CreateAppealModal onClose={() => setCreateModalOpen(false)} onCreated={loadAppeals} />
      )}

      {selectedAppeal && (
        <AppealDetailModal appeal={selectedAppeal} onClose={() => setSelectedAppeal(null)} />
      )}
    </div>
  );
}