import { ChevronDown, ChevronUp, User } from 'lucide-react';

import type { FrameEntryViewModel } from '@/business/frame/types';
import { Button } from '@/components/ui/button';
import { FrameEntryDetails } from '@/components/frame/FrameEntryDetails';
import { FrameEntryEditForm } from '@/components/frame/FrameEntryEditForm';
import type { FrameModuleWorkflow } from '@/components/frame/types';

interface FrameEntryCardProps {
  readonly entry: FrameEntryViewModel;
  readonly index: number;
  readonly workflow: FrameModuleWorkflow;
}

export function FrameEntryCard({ entry, index, workflow }: FrameEntryCardProps) {
  const isExpanded = workflow.expandedId === entry.id;
  const isCurrent = index === 0;

  return (
    <div
      className={`bg-slate-800/40 backdrop-blur-sm rounded-2xl border overflow-hidden transition-all ${isCurrent ? 'border-amber-500/30' : 'border-slate-700/40'}`}
    >
      <Button
        type="button"
        onClick={() => workflow.setExpandedId(isExpanded ? '' : entry.id)}
        className={`w-full h-auto rounded-none px-5 py-4 flex items-center justify-between ${isCurrent ? 'bg-gradient-to-r from-amber-500/10 to-violet-500/10' : 'bg-slate-700/20'} hover:bg-slate-700/30 transition-colors text-inherit`}
      >
        <div className="flex items-center gap-3">
          {isCurrent && (
            <span className="px-2.5 py-1 bg-gradient-to-r from-amber-500 to-amber-600 text-white text-[10px] font-bold rounded-lg uppercase shadow-lg shadow-amber-500/20">
              Current
            </span>
          )}
          <div className="text-left">
            <h4 className="font-semibold text-white flex items-center gap-2">
              Week of {entry.weekOf}
              {entry.weekLabel && (
                <span className="px-2 py-0.5 rounded-full bg-violet-500/15 border border-violet-500/30 text-violet-300 text-[10px] font-medium">
                  {entry.weekLabel}
                </span>
              )}
            </h4>
            <p className="text-xs text-slate-500 flex items-center gap-1 mt-0.5">
              <User size={10} /> {entry.author} - Posted {entry.postedDate}
            </p>
          </div>
        </div>
        {isExpanded
          ? <ChevronUp size={18} className="text-slate-400" />
          : <ChevronDown size={18} className="text-slate-400" />
        }
      </Button>

      {isExpanded && (
        <div className="p-5 space-y-4">
          {workflow.isEditing && workflow.editEntry?.id === entry.id ? (
            <FrameEntryEditForm editEntry={workflow.editEntry} workflow={workflow} />
          ) : (
            <FrameEntryDetails
              entry={entry}
              canEdit={workflow.canEdit}
              startEditing={workflow.startEditing}
            />
          )}
        </div>
      )}
    </div>
  );
}