import { Eye } from 'lucide-react';

import type { ModuleId } from '@/shared/types/app';
import type { DirectorFramePreview } from '@/business/director-dashboard/types';
import { DirectorScaleButton } from '@/components/director-dashboard/DirectorScaleButton';
import { StatePanel } from '@/components/ui/state-panel';
import {
  directorFrameSectionClasses,
  directorNavigateIcon,
} from '@/components/director-dashboard/directorDashboardViewConfig';

interface DirectorRecentFramePanelProps {
  readonly framePreviews: readonly DirectorFramePreview[];
  readonly onOpenModule: (module: ModuleId) => void;
}

export function DirectorRecentFramePanel({
  framePreviews,
  onOpenModule,
}: DirectorRecentFramePanelProps) {
  const NavigateIcon = directorNavigateIcon;

  return (
    <div className="bg-white rounded-2xl border border-amber-100 shadow-sm p-5">
      <h3 className="font-semibold text-gray-800 mb-3 flex items-center gap-2">
        <Eye size={16} className="text-amber-500" />
        F.R.A.M.E. Tracker
      </h3>
      {framePreviews.length > 0 ? (
        <div className="space-y-3">
          {framePreviews.map((preview, index) => (
            <div key={preview.id} className={`p-3 rounded-xl ${index === 0 ? 'bg-amber-50 border border-amber-200' : 'bg-gray-50'}`}>
              <p className="text-xs font-semibold text-gray-700 mb-1.5">{preview.week}</p>
              <div className="space-y-1">
                {preview.sections.map((section) => (
                  <div key={section.letter} className="flex items-start gap-1.5">
                    <span className={`font-bold text-[10px] ${directorFrameSectionClasses[section.letter]} w-3`}>{section.letter}</span>
                    <span className="text-[10px] text-gray-500 line-clamp-1">{section.text}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      ) : (
        <StatePanel className="border-0 bg-transparent" alignment="center">
          No F.R.A.M.E. entries are available yet.
        </StatePanel>
      )}
      <DirectorScaleButton
        type="button"
        onClick={() => onOpenModule('frame')}
        className="mt-3 flex w-full items-center justify-center gap-1 bg-transparent text-sm font-medium text-amber-600"
      >
        View All Entries
        <NavigateIcon size={14} />
      </DirectorScaleButton>
    </div>
  );
}