import React, { useState } from 'react';
import { AlertCircle, CheckCircle2, Clock, Globe, Mail, Send, ShieldCheck } from 'lucide-react';
import { DailyDigestConfig, DailyDigestEmail, DigestDeliveryTime, User } from '../services/types';

interface RemindersDigestViewProps {
  currentUser: User | null;
  config: DailyDigestConfig;
  onUpdateConfig: (config: Partial<DailyDigestConfig>) => Promise<void>;
  onGenerateDigest: (recipientEmail?: string) => Promise<DailyDigestEmail>;
  digestHistory: DailyDigestEmail[];
}

export const RemindersDigestView: React.FC<RemindersDigestViewProps> = ({
  currentUser,
  config,
  onUpdateConfig,
  onGenerateDigest,
  digestHistory,
}) => {
  const [selectedDigest, setSelectedDigest] = useState<DailyDigestEmail | null>(
    digestHistory[0] || null
  );
  const [previewTab, setPreviewTab] = useState<'html' | 'text'>('html');
  const [isGenerating, setIsGenerating] = useState(false);
  const [saveSuccess, setSaveSuccess] = useState(false);

  const deliveryOptions: { id: DigestDeliveryTime; label: string; desc: string; letter: string }[] = [
    { id: '06:00', letter: 'A', label: '6:00 AM', desc: 'Early morning review before daily routine' },
    { id: '08:00', letter: 'B', label: '8:00 AM', desc: 'Morning planning as workday commences (Default)' },
    { id: '09:00', letter: 'C', label: '9:00 AM', desc: 'Start-of-workday action briefing' },
    { id: '12:00', letter: 'D', label: '12:00 PM', desc: 'Midday check-in and task review' },
  ];

  const handleDeliveryTimeChange = async (time: DigestDeliveryTime) => {
    await onUpdateConfig({ deliveryTime: time });
    setSaveSuccess(true);
    setTimeout(() => setSaveSuccess(false), 2500);
  };

  const handleGenerateNow = async () => {
    try {
      setIsGenerating(true);
      const email = await onGenerateDigest(currentUser?.email);
      setSelectedDigest(email);
    } finally {
      setIsGenerating(false);
    }
  };

  return (
    <div className="space-y-8">
      {/* Header */}
      <div>
        <h1 className="text-2xl font-bold tracking-tight text-slate-900">Reminders & Daily Email Digest</h1>
        <p className="text-xs text-slate-500 mt-0.5">
          Automated notifications and scheduled daily digest of upcoming and overdue lifecycle items.
        </p>
      </div>

      {/* Reminder Channels Overview Banner */}
      <div className="p-5 bg-white rounded-xl border border-slate-200 grid grid-cols-1 md:grid-cols-3 gap-6">
        <div className="flex items-start gap-3">
          <div className="p-2 bg-slate-100 rounded-lg shrink-0">
            <ShieldCheck className="w-5 h-5 text-emerald-600" />
          </div>
          <div>
            <h3 className="text-xs font-bold text-slate-900">Dual Channel Enabled</h3>
            <p className="text-xs text-slate-500 mt-0.5">
              Both in-app badges and daily email digests are permanently enabled per Decision 22.
            </p>
          </div>
        </div>

        <div className="flex items-start gap-3">
          <div className="p-2 bg-slate-100 rounded-lg shrink-0">
            <Clock className="w-5 h-5 text-amber-600" />
          </div>
          <div>
            <h3 className="text-xs font-bold text-slate-900">Fixed Reminder Schedule</h3>
            <p className="text-xs text-slate-500 mt-0.5">
              Overdue items remain flagged until completed; items within 30 days are tracked as upcoming.
            </p>
          </div>
        </div>

        <div className="flex items-start gap-3">
          <div className="p-2 bg-slate-100 rounded-lg shrink-0">
            <Globe className="w-5 h-5 text-indigo-600" />
          </div>
          <div>
            <h3 className="text-xs font-bold text-slate-900">Single Time Zone</h3>
            <p className="text-xs text-slate-500 mt-0.5 font-mono">
              {config.timeZone} (Application Global)
            </p>
          </div>
        </div>
      </div>

      {/* Question 34 Pending Decision: Daily Digest Delivery Time */}
      <div className="p-6 bg-white rounded-xl border border-slate-200">
        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 mb-4">
          <div>
            <div className="flex items-center gap-2">
              <h2 className="text-base font-bold text-slate-900">
                Daily Email Digest Delivery Time
              </h2>
              {saveSuccess && (
                <span className="text-xs font-medium text-emerald-700 bg-emerald-50 px-2 py-0.5 rounded flex items-center gap-1">
                  <CheckCircle2 className="w-3 h-3" /> Saved
                </span>
              )}
            </div>
            <p className="text-xs text-slate-500 mt-0.5">
              Select the scheduled delivery time for your daily digest (Question 34):
            </p>
          </div>

          <button
            onClick={handleGenerateNow}
            disabled={isGenerating}
            className="px-3.5 py-2 text-xs font-semibold text-white bg-slate-900 hover:bg-slate-800 rounded-lg transition-colors flex items-center gap-2 self-start sm:self-auto shrink-0 disabled:opacity-50"
          >
            <Send className="w-3.5 h-3.5" />
            <span>{isGenerating ? 'Generating...' : 'Simulate / Send Digest Now'}</span>
          </button>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
          {deliveryOptions.map((opt) => {
            const isSelected = config.deliveryTime === opt.id;
            return (
              <button
                key={opt.id}
                type="button"
                onClick={() => handleDeliveryTimeChange(opt.id)}
                className={`p-4 rounded-xl border text-left transition-all relative ${
                  isSelected
                    ? 'border-slate-900 bg-slate-900 text-white shadow-sm'
                    : 'border-slate-200 bg-white hover:border-slate-400 text-slate-900'
                }`}
              >
                <div className="flex items-center justify-between mb-1">
                  <span className={`text-xs font-bold ${isSelected ? 'text-slate-300' : 'text-slate-500'}`}>
                    Option {opt.letter}
                  </span>
                  {isSelected && <CheckCircle2 className="w-4 h-4 text-emerald-400" />}
                </div>
                <div className="text-lg font-bold font-mono tracking-tight">{opt.label}</div>
                <div className={`text-xs mt-1 ${isSelected ? 'text-slate-300' : 'text-slate-500'}`}>
                  {opt.desc}
                </div>
              </button>
            );
          })}
        </div>
      </div>

      {/* Daily Digest Inspector & Previewer */}
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
        {/* History column */}
        <div className="lg:col-span-4 bg-white rounded-xl border border-slate-200 p-5 flex flex-col h-[500px]">
          <h3 className="text-xs font-bold uppercase tracking-wider text-slate-500 mb-3 flex items-center justify-between">
            <span>Digest Sent Log ({digestHistory.length})</span>
            <Mail className="w-3.5 h-3.5 text-slate-400" />
          </h3>

          <div className="flex-1 overflow-y-auto space-y-2 pr-1">
            {digestHistory.length === 0 ? (
              <div className="text-center py-12 text-slate-400 text-xs">
                No digests dispatched yet. Click "Simulate / Send Digest Now" to generate one.
              </div>
            ) : (
              digestHistory.map((d) => {
                const isSelected = selectedDigest?.id === d.id;
                return (
                  <button
                    key={d.id}
                    onClick={() => setSelectedDigest(d)}
                    className={`w-full text-left p-3 rounded-lg border transition-all ${
                      isSelected
                        ? 'border-slate-900 bg-slate-50'
                        : 'border-slate-200 hover:border-slate-300 bg-white'
                    }`}
                  >
                    <div className="flex items-center justify-between text-xs mb-1">
                      <span className="font-semibold text-slate-900">{d.recipientEmail}</span>
                      <span className="font-mono text-[11px] text-slate-400">
                        {new Date(d.generatedAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                      </span>
                    </div>
                    <div className="text-[11px] text-slate-600 truncate">{d.subject}</div>
                    <div className="flex items-center gap-2 text-[10px] text-slate-500 mt-1 font-mono">
                      <span>{d.overdueCount} overdue</span>
                      <span>·</span>
                      <span>{d.upcomingCount} upcoming</span>
                    </div>
                  </button>
                );
              })
            )}
          </div>
        </div>

        {/* Live Email Preview column */}
        <div className="lg:col-span-8 bg-white rounded-xl border border-slate-200 overflow-hidden flex flex-col h-[500px]">
          {/* Preview toolbar */}
          <div className="px-5 py-3 bg-slate-50 border-b border-slate-200 flex items-center justify-between">
            <div>
              <span className="text-xs font-bold text-slate-900">Email Digest Preview</span>
              {selectedDigest && (
                <span className="text-xs text-slate-500 ml-2">
                  — {selectedDigest.subject}
                </span>
              )}
            </div>

            <div className="flex items-center gap-1 bg-slate-200 p-0.5 rounded-lg text-xs font-medium">
              <button
                onClick={() => setPreviewTab('html')}
                className={`px-3 py-1 rounded-md transition-colors ${
                  previewTab === 'html' ? 'bg-white text-slate-900 shadow-xs' : 'text-slate-600 hover:text-slate-900'
                }`}
              >
                HTML Template
              </button>
              <button
                onClick={() => setPreviewTab('text')}
                className={`px-3 py-1 rounded-md transition-colors ${
                  previewTab === 'text' ? 'bg-white text-slate-900 shadow-xs' : 'text-slate-600 hover:text-slate-900'
                }`}
              >
                Plain Text
              </button>
            </div>
          </div>

          {/* Email content */}
          <div className="flex-1 overflow-auto p-4 bg-slate-100">
            {selectedDigest ? (
              previewTab === 'html' ? (
                <div
                  className="bg-white rounded shadow-xs mx-auto max-w-xl overflow-hidden"
                  dangerouslySetInnerHTML={{ __html: selectedDigest.htmlContent }}
                />
              ) : (
                <pre className="bg-slate-900 text-slate-100 p-5 rounded-lg text-xs font-mono overflow-auto whitespace-pre-wrap">
                  {selectedDigest.textContent}
                </pre>
              )
            ) : (
              <div className="h-full flex flex-col items-center justify-center text-slate-500 text-xs">
                <AlertCircle className="w-8 h-8 text-slate-400 mb-2" />
                <p>Click "Simulate / Send Digest Now" to see how scheduled emails are formatted and delivered.</p>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};