import { useRef, useState } from 'react';
import { useApp } from '../context/AppContext.js';
import AuthStatus from '../components/AuthStatus.jsx';
import { bookOptions, CHAPTER_COUNTS, formatRelativeDate } from '../utils/bibleUtils.jsx';
import {
  READING_PLANS,
  getPlan,
  getPlanSchedule,
  formatDayReadings,
  firstRefOfDay,
  nextUnreadDayIndex,
  themeForCategory,
  ALL_BOOKS,
  OT_BOOKS,
  NT_BOOKS,
  GOSPELS,
  PENTATEUCH,
  WISDOM_BOOKS,
} from '../utils/readingPlans.js';

export default function ReadingPlansPage() {
  const {
    goHome,
    planProgress,
    customPlans,
    startPlan,
    toggleDay,
    restartPlan,
    removePlanProgress,
    addCustomPlan,
    removeCustomPlan,
    updateCustomPlan,
    readReadingPlanDay,
  } = useApp();
  const [showBuilder, setShowBuilder] = useState(false);

  const activeProgress = planProgress.filter((p) => !p.completedAt);
  const completedProgress = planProgress
    .filter((p) => p.completedAt)
    .sort((a, b) => b.completedAt - a.completedAt);

  const categoryOrder = ['Whole Bible', 'Old Testament', 'New Testament', 'Topical'];
  const builtinCategories = categoryOrder.filter((c) => READING_PLANS.some((p) => p.category === c));

  return (
    <div className="min-h-screen bg-slate-50 text-slate-900">
      <header className="border-b border-slate-200 bg-slate-900 text-white shadow-sm">
        <div className="mx-auto flex max-w-7xl flex-wrap items-center justify-between gap-4 px-4 py-5 sm:px-6 lg:px-8">
          <div>
            <p className="text-sm uppercase tracking-[0.24em] text-slate-300">Bible Study Project</p>
            <h1 className="mt-2 text-2xl font-semibold">Reading Plans</h1>
          </div>
          <div className="flex items-center gap-3">
            <button
              type="button"
              onClick={goHome}
              className="rounded-xl border border-slate-500 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-slate-700"
            >
              ← Back
            </button>
            <AuthStatus />
          </div>
        </div>
      </header>

      <main className="mx-auto max-w-5xl space-y-8 px-4 py-8 sm:px-6 lg:px-8">
        {activeProgress.length > 0 && (
          <section>
            <h2 className="mb-3 text-lg font-semibold text-slate-900">Continue Reading</h2>
            <div className="space-y-4">
              {activeProgress.map((progress) => (
                <ActivePlanCard
                  key={progress.id}
                  progress={progress}
                  onRead={readReadingPlanDay}
                  onToggleDay={toggleDay}
                  onRestart={restartPlan}
                  onRemove={removePlanProgress}
                />
              ))}
            </div>
          </section>
        )}

        <section>
          <div className="mb-3 flex items-center justify-between">
            <h2 className="text-lg font-semibold text-slate-900">My Plans</h2>
            {!showBuilder && (
              <button
                type="button"
                onClick={() => setShowBuilder(true)}
                className="rounded-xl bg-rose-600 px-3 py-1.5 text-sm font-semibold text-white transition hover:bg-rose-500"
              >
                + New Plan
              </button>
            )}
          </div>
          {showBuilder && (
            <div className="mb-4">
              <CustomPlanBuilder
                onCreate={(input) => { addCustomPlan(input); setShowBuilder(false); }}
                onCancel={() => setShowBuilder(false)}
              />
            </div>
          )}
          {customPlans.length > 0 ? (
            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
              {customPlans.map((plan) => (
                <PlanCatalogCard
                  key={plan.id}
                  plan={plan}
                  progressForPlan={planProgress.filter((p) => p.planId === plan.id)}
                  onStart={startPlan}
                  onDelete={(id) => { if (window.confirm('Delete this plan? Its progress history will be removed too.')) removeCustomPlan(id); }}
                  onImageChange={(id, image) => updateCustomPlan(id, { image })}
                />
              ))}
            </div>
          ) : !showBuilder && (
            <p className="text-sm text-slate-500">You haven't created any plans yet — try "+ New Plan".</p>
          )}
        </section>

        {builtinCategories.map((category) => (
          <section key={category}>
            <h2 className="mb-3 text-lg font-semibold text-slate-900">{category}</h2>
            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
              {READING_PLANS.filter((p) => p.category === category).map((plan) => (
                <PlanCatalogCard
                  key={plan.id}
                  plan={plan}
                  progressForPlan={planProgress.filter((p) => p.planId === plan.id)}
                  onStart={startPlan}
                />
              ))}
            </div>
          </section>
        ))}

        {completedProgress.length > 0 && (
          <section>
            <h2 className="mb-3 text-lg font-semibold text-slate-900">Completed</h2>
            <div className="space-y-2">
              {completedProgress.map((progress) => {
                const plan = getPlan(progress.planId);
                if (!plan) return null;
                return (
                  <div
                    key={progress.id}
                    className="flex flex-wrap items-center justify-between gap-3 rounded-2xl border border-slate-200 bg-white px-5 py-3 shadow-panel"
                  >
                    <div>
                      <p className="text-sm font-semibold text-slate-900">{plan.icon ?? '✓'} {plan.title}</p>
                      <p className="text-xs text-slate-500">Completed {formatRelativeDate(progress.completedAt)}</p>
                    </div>
                    <div className="flex items-center gap-3 text-sm">
                      <button
                        type="button"
                        onClick={() => restartPlan(progress.id)}
                        className="font-semibold text-slate-700 hover:underline"
                      >
                        Start again
                      </button>
                      <button
                        type="button"
                        onClick={() => { if (window.confirm('Remove this from your history?')) removePlanProgress(progress.id); }}
                        className="text-rose-500 hover:text-rose-700"
                      >
                        Remove
                      </button>
                    </div>
                  </div>
                );
              })}
            </div>
          </section>
        )}
      </main>
    </div>
  );
}

function PlanCover({ plan }) {
  const [imgFailed, setImgFailed] = useState(false);
  const theme = themeForCategory(plan.category);
  const showImage = !!plan.image && !imgFailed;
  return (
    <div className={`relative flex h-32 items-center justify-center overflow-hidden bg-gradient-to-br ${theme.gradient}`}>
      {showImage && (
        <img
          src={plan.image}
          alt=""
          onError={() => setImgFailed(true)}
          style={{ objectPosition: plan.imageFocus ?? 'center' }}
          className="absolute inset-0 h-full w-full object-cover"
        />
      )}
      {!showImage && <span className="text-4xl drop-shadow">{plan.icon ?? '📖'}</span>}
    </div>
  );
}

function ActivePlanCard({ progress, onRead, onToggleDay, onRestart, onRemove }) {
  const [expanded, setExpanded] = useState(false);
  const plan = getPlan(progress.planId);
  if (!plan) return null;

  const theme = themeForCategory(plan.category);
  const schedule = getPlanSchedule(progress.planId);
  const pct = plan.days > 0 ? Math.round((progress.completedDays.length / plan.days) * 100) : 0;
  const nextDay = nextUnreadDayIndex(plan, progress.completedDays);
  const nextRefs = nextDay != null ? schedule[nextDay] : null;
  const nextFirstRef = nextRefs ? firstRefOfDay(nextRefs) : null;

  return (
    <div className="overflow-hidden rounded-3xl border border-emerald-200 bg-emerald-50 shadow-panel">
      <div className={`h-1.5 w-full bg-gradient-to-r ${theme.gradient}`} />
      <div className="p-5">
        <div className="flex flex-wrap items-start justify-between gap-3">
          <div>
            <p className={`text-xs font-semibold uppercase tracking-widest ${theme.text}`}>{plan.category}</p>
            <h3 className="mt-1 text-base font-semibold text-slate-900">{plan.icon ?? '📖'} {plan.title}</h3>
            <p className="mt-0.5 text-sm text-slate-600">
              {progress.completedDays.length} / {plan.days} days
              {nextRefs && <> · Next: Day {nextDay + 1} — {formatDayReadings(nextRefs)}</>}
            </p>
          </div>
          <div className="flex flex-wrap items-center gap-2">
            {nextFirstRef && (
              <button
                type="button"
                onClick={() => onRead(nextFirstRef.book, nextFirstRef.chapter)}
                className="rounded-xl bg-emerald-600 px-3 py-1.5 text-sm font-semibold text-white hover:bg-emerald-500"
              >
                Read
              </button>
            )}
            <button
              type="button"
              onClick={() => setExpanded((e) => !e)}
              className="rounded-xl border border-emerald-300 px-3 py-1.5 text-sm text-emerald-700 hover:bg-emerald-100"
            >
              {expanded ? 'Hide days' : 'View days'}
            </button>
          </div>
        </div>

        <div className="mt-3 h-2.5 w-full overflow-hidden rounded-full bg-emerald-200">
          <div className="h-full rounded-full bg-emerald-500 transition-all" style={{ width: `${pct}%` }} />
        </div>
        <p className="mt-1 text-right text-xs text-emerald-700">{pct}%</p>

        {expanded && (
          <div className="mt-3 max-h-72 overflow-y-auto rounded-2xl border border-emerald-100 bg-white p-2">
            {schedule.map((dayRefs, i) => {
              const done = progress.completedDays.includes(i);
              const ref = firstRefOfDay(dayRefs);
              return (
                <div key={i} className="flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm hover:bg-slate-50">
                  <input
                    type="checkbox"
                    checked={done}
                    onChange={() => onToggleDay(progress.id, i, plan.days)}
                    className="h-4 w-4 shrink-0 rounded border-slate-300 text-emerald-600 focus:ring-emerald-500"
                  />
                  <span className={done ? 'flex-1 text-slate-400 line-through' : 'flex-1 text-slate-700'}>
                    Day {i + 1} — {formatDayReadings(dayRefs)}
                  </span>
                  <button
                    type="button"
                    onClick={() => onRead(ref.book, ref.chapter)}
                    className="shrink-0 text-xs font-semibold text-sky-600 hover:underline"
                  >
                    Read
                  </button>
                </div>
              );
            })}
          </div>
        )}

        <div className="mt-3 flex items-center gap-4 text-xs">
          <button
            type="button"
            onClick={() => { if (window.confirm('Restart this plan from day 1?')) onRestart(progress.id); }}
            className="font-semibold text-slate-500 hover:text-slate-700"
          >
            Restart
          </button>
          <button
            type="button"
            onClick={() => { if (window.confirm('Remove this plan?')) onRemove(progress.id); }}
            className="font-semibold text-rose-500 hover:text-rose-700"
          >
            Remove
          </button>
        </div>
      </div>
    </div>
  );
}

function PlanCatalogCard({ plan, progressForPlan, onStart, onDelete, onImageChange }) {
  const active = progressForPlan.find((p) => !p.completedAt);
  const completedCount = progressForPlan.filter((p) => p.completedAt).length;
  const theme = themeForCategory(plan.category);
  const fileInputRef = useRef(null);
  const [imageError, setImageError] = useState('');

  const pickImage = async (e) => {
    const file = e.target.files?.[0];
    e.target.value = ''; // lets the same file be re-picked later
    if (!file) return;
    try {
      setImageError('');
      onImageChange(plan.id, await resizeImageToDataUrl(file));
    } catch {
      setImageError("Couldn't use that image.");
    }
  };

  return (
    <div className="group overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-panel transition hover:shadow-lg">
      <PlanCover plan={plan} />
      <div className="flex flex-col gap-2 p-5">
        <div className="flex items-start justify-between gap-2">
          <h3 className="text-sm font-semibold text-slate-900">{plan.title}</h3>
          {onDelete && (
            <button
              type="button"
              onClick={() => onDelete(plan.id)}
              title="Delete plan"
              className="shrink-0 text-slate-300 transition hover:text-rose-500"
            >
              ✕
            </button>
          )}
        </div>
        <p className="flex-1 text-xs text-slate-500">{plan.description || 'A custom reading plan.'}</p>
        <div className="flex flex-wrap items-center gap-2">
          <span className={`rounded-full px-2 py-0.5 text-xs font-semibold ${theme.chip}`}>{plan.days} days</span>
          {completedCount > 0 && <span className="text-xs font-semibold text-emerald-600">✓ Completed {completedCount}×</span>}
        </div>
        {onImageChange && (
          <div className="flex items-center gap-3 text-xs">
            <button type="button" onClick={() => fileInputRef.current?.click()} className="font-semibold text-slate-500 hover:text-slate-700">
              {plan.image ? 'Change cover' : '+ Add cover photo'}
            </button>
            {plan.image && (
              <button type="button" onClick={() => onImageChange(plan.id, null)} className="text-slate-400 hover:text-rose-500">
                Remove
              </button>
            )}
            <input ref={fileInputRef} type="file" accept="image/*" onChange={pickImage} className="hidden" />
          </div>
        )}
        {imageError && <p className="text-xs text-rose-500">{imageError}</p>}
        <button
          type="button"
          disabled={!!active}
          onClick={() => onStart(plan.id)}
          className="mt-1 rounded-xl bg-slate-900 px-3 py-1.5 text-sm font-semibold text-white transition hover:bg-slate-800 disabled:cursor-not-allowed disabled:opacity-50"
        >
          {active ? 'In progress' : completedCount > 0 ? 'Start again' : 'Start plan'}
        </button>
      </div>
    </div>
  );
}

// Downscales a picked image file to a reasonable cover-photo size and returns
// a data URL — no server upload endpoint needed, it's stored right on the plan.
function resizeImageToDataUrl(file, maxWidth = 960, quality = 0.82) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onerror = () => reject(new Error('Could not read file.'));
    reader.onload = () => {
      const img = new Image();
      img.onerror = () => reject(new Error('Could not decode image.'));
      img.onload = () => {
        const scale = Math.min(1, maxWidth / img.width);
        const canvas = document.createElement('canvas');
        canvas.width = Math.round(img.width * scale);
        canvas.height = Math.round(img.height * scale);
        canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height);
        resolve(canvas.toDataURL('image/jpeg', quality));
      };
      img.src = reader.result;
    };
    reader.readAsDataURL(file);
  });
}

const BOOK_PRESETS = [
  ['All', ALL_BOOKS],
  ['None', []],
  ['Old Testament', OT_BOOKS],
  ['New Testament', NT_BOOKS],
  ['Gospels', GOSPELS],
  ['Pentateuch', PENTATEUCH],
  ['Psalms', ['PSA']],
  ['Proverbs', ['PRO']],
  ['Wisdom', WISDOM_BOOKS],
];

function CustomPlanBuilder({ onCreate, onCancel }) {
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');
  const [days, setDays] = useState(30);
  const [books, setBooks] = useState([]);
  const [image, setImage] = useState(null);
  const [imageError, setImageError] = useState('');
  const fileInputRef = useRef(null);

  const toggleBook = (abbrev) => {
    setBooks((prev) => (prev.includes(abbrev) ? prev.filter((b) => b !== abbrev) : [...prev, abbrev]));
  };

  const pickImage = async (e) => {
    const file = e.target.files?.[0];
    e.target.value = '';
    if (!file) return;
    try {
      setImageError('');
      setImage(await resizeImageToDataUrl(file));
    } catch {
      setImageError("Couldn't use that image.");
    }
  };

  const totalChapters = books.reduce((sum, b) => sum + (CHAPTER_COUNTS[b] ?? 0), 0);
  const canCreate = title.trim().length > 0 && books.length > 0 && days >= 1;

  return (
    <div className="rounded-2xl border border-rose-200 bg-white p-5 shadow-panel">
      <h3 className="mb-3 text-sm font-semibold text-slate-900">New reading plan</h3>
      <div className="grid gap-3 sm:grid-cols-2">
        <label className="text-sm text-slate-600">
          Title
          <input
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            placeholder="e.g. Advent Readings"
            className="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2 text-sm shadow-sm focus:border-rose-500 focus:outline-none focus:ring-2 focus:ring-rose-200"
          />
        </label>
        <label className="text-sm text-slate-600">
          Days
          <input
            type="number"
            min="1"
            max="365"
            value={days}
            onChange={(e) => setDays(Number(e.target.value))}
            className="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2 text-sm shadow-sm focus:border-rose-500 focus:outline-none focus:ring-2 focus:ring-rose-200"
          />
        </label>
      </div>
      <label className="mt-3 block text-sm text-slate-600">
        Description <span className="text-slate-400">(optional)</span>
        <textarea
          value={description}
          onChange={(e) => setDescription(e.target.value)}
          rows={2}
          className="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2 text-sm shadow-sm focus:border-rose-500 focus:outline-none focus:ring-2 focus:ring-rose-200"
        />
      </label>

      <div className="mt-3">
        <span className="text-sm text-slate-600">Cover photo <span className="text-slate-400">(optional)</span></span>
        <div className="mt-1 flex items-center gap-3">
          {image ? (
            <img src={image} alt="" className="h-16 w-28 rounded-lg object-cover" />
          ) : (
            <div className="flex h-16 w-28 items-center justify-center rounded-lg bg-slate-100 text-2xl">🖼️</div>
          )}
          <button
            type="button"
            onClick={() => fileInputRef.current?.click()}
            className="rounded-xl border border-slate-300 px-3 py-1.5 text-sm font-semibold text-slate-600 hover:bg-slate-50"
          >
            {image ? 'Change photo' : 'Choose photo'}
          </button>
          {image && (
            <button type="button" onClick={() => setImage(null)} className="text-sm text-slate-400 hover:text-rose-500">
              Remove
            </button>
          )}
          <input ref={fileInputRef} type="file" accept="image/*" onChange={pickImage} className="hidden" />
        </div>
        {imageError && <p className="mt-1 text-xs text-rose-500">{imageError}</p>}
      </div>

      <div className="mt-4">
        <div className="mb-2 flex flex-wrap items-center gap-2">
          <span className="text-sm font-semibold text-slate-700">Books</span>
          {BOOK_PRESETS.map(([label, list]) => (
            <button
              key={label}
              type="button"
              onClick={() => setBooks(list)}
              className="rounded-full border border-slate-300 px-2.5 py-1 text-xs font-semibold text-slate-600 hover:bg-slate-50"
            >
              {label}
            </button>
          ))}
        </div>
        <div className="grid gap-3 sm:grid-cols-2">
          <div className="max-h-48 overflow-y-auto rounded-xl border border-slate-200 p-2">
            <p className="mb-1 px-1 text-xs font-semibold uppercase tracking-wide text-slate-400">Old Testament</p>
            {bookOptions.filter((b) => OT_BOOKS.includes(b.abbrev)).map((b) => (
              <label key={b.abbrev} className="flex items-center gap-2 rounded-lg px-1 py-1 text-sm hover:bg-slate-50">
                <input
                  type="checkbox"
                  checked={books.includes(b.abbrev)}
                  onChange={() => toggleBook(b.abbrev)}
                  className="h-4 w-4 rounded border-slate-300 text-rose-600 focus:ring-rose-500"
                />
                {b.name}
              </label>
            ))}
          </div>
          <div className="max-h-48 overflow-y-auto rounded-xl border border-slate-200 p-2">
            <p className="mb-1 px-1 text-xs font-semibold uppercase tracking-wide text-slate-400">New Testament</p>
            {bookOptions.filter((b) => NT_BOOKS.includes(b.abbrev)).map((b) => (
              <label key={b.abbrev} className="flex items-center gap-2 rounded-lg px-1 py-1 text-sm hover:bg-slate-50">
                <input
                  type="checkbox"
                  checked={books.includes(b.abbrev)}
                  onChange={() => toggleBook(b.abbrev)}
                  className="h-4 w-4 rounded border-slate-300 text-rose-600 focus:ring-rose-500"
                />
                {b.name}
              </label>
            ))}
          </div>
        </div>
        <p className="mt-2 text-xs text-slate-400">
          {books.length} book{books.length !== 1 ? 's' : ''} selected · {totalChapters} chapters
          {days > 0 && totalChapters > 0 && ` · ~${(totalChapters / days).toFixed(1)} ch/day`}
        </p>
      </div>

      <div className="mt-4 flex items-center gap-3">
        <button
          type="button"
          disabled={!canCreate}
          onClick={() => onCreate({ title, description, days, books, image })}
          className="rounded-xl bg-rose-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-rose-500 disabled:cursor-not-allowed disabled:opacity-50"
        >
          Create plan
        </button>
        <button type="button" onClick={onCancel} className="text-sm text-slate-400 hover:text-slate-600">Cancel</button>
      </div>
    </div>
  );
}