import { ArrowRight } from 'lucide-react';

import type { FrameEntryViewModel } from '@/business/frame/types';
import { Button } from '@/components/ui/button';
import { FRAME_SECTION_LABELS } from '@/shared/constants/frame';
import type { ModuleId } from '@/shared/types/app';

interface DashboardFramePreviewProps {
  readonly latestFrame: FrameEntryViewModel | null;
  readonly onNavigate: (module: ModuleId) => void;
}

export function DashboardFramePreview({
  latestFrame,
  onNavigate,
}: DashboardFramePreviewProps) {
  return (
    <section className="lg:col-span-2 bg-slate-800/40 backdrop-blur-sm rounded-2xl border border-slate-700/40 overflow-hidden">
      <div className="bg-gradient-to-r from-amber-500/10 to-violet-500/10 px-5 py-4 border-b border-slate-700/40 flex items-center justify-between">
        <div>
          <h3 className="font-bold text-white flex items-center gap-2">
            <span className="w-7 h-7 rounded-lg bg-gradient-to-br from-amber-400 to-violet-500 flex items-center justify-center text-white text-xs font-bold shadow-lg shadow-amber-500/20">
              F
            </span>
            This Week's F.R.A.M.E.
          </h3>
          <p className="text-xs text-slate-500 mt-0.5">
            {latestFrame
              ? `Posted ${latestFrame.postedDate} by ${latestFrame.author}`
              : 'Waiting for the first published entry'}
          </p>
        </div>
        <Button
          type="button"
          variant="ghost"
          size="sm"
          onClick={() => onNavigate('frame')}
          className="text-sm text-violet-400 hover:text-violet-300 font-medium"
        >
          View All
          <ArrowRight size={14} />
        </Button>
      </div>
      <div className="p-5 space-y-3">
        {latestFrame ? (
          FRAME_SECTION_LABELS.map((section) => (
            <div key={section.letter} className="flex gap-3">
              <div className={`w-8 h-8 rounded-lg bg-gradient-to-br ${section.color} flex items-center justify-center text-white font-bold text-sm flex-shrink-0 mt-0.5 shadow-lg`}>
                {section.letter}
              </div>
              <div className="min-w-0">
                <p className="text-xs font-semibold text-slate-500 uppercase tracking-wider">{section.label}</p>
                <p className="text-sm text-slate-300 leading-relaxed">{latestFrame[section.key]}</p>
              </div>
            </div>
          ))
        ) : (
          <div className="rounded-xl bg-slate-700/30 border border-slate-700/40 p-4">
            <p className="text-sm font-semibold text-slate-300">No F.R.A.M.E. entry is published yet.</p>
            <p className="text-xs text-slate-500 mt-1">
              Directors and superintendents can create the first entry in the F.R.A.M.E. module.
            </p>
          </div>
        )}
      </div>
    </section>
  );
}
