'use client';

import React from 'react';

import Button, { ButtonSize, ButtonVariant } from '@/components/button/Button';
import { CheckIcon, CloseIcon, EditIcon } from '@/icons';
import { SongifyProject } from '@/types/songify';

export interface ProjectHeaderProps {
  selectedProject: SongifyProject | null;
  editingProjectRequestId: string | null;
  editingProjectName: string;
  setEditingProjectName: (name: string) => void;
  handleSaveProjectName: () => void;
  handleCancelEdit: () => void;
  handleEditProject: (project: SongifyProject) => void;
}

export function ProjectHeader({
  selectedProject,
  editingProjectRequestId,
  editingProjectName,
  setEditingProjectName,
  handleSaveProjectName,
  handleCancelEdit,
  handleEditProject,
}: ProjectHeaderProps) {
  return (
    <>
      <div className='mb-6 flex items-center gap-3'>
        {editingProjectRequestId === selectedProject?.requestId ? (
          <div className='flex flex-1 items-center gap-2'>
            <input
              type='text'
              value={editingProjectName}
              onChange={(e) => setEditingProjectName(e.target.value)}
              onKeyDown={(e) => {
                if (e.key === 'Enter') handleSaveProjectName();
                if (e.key === 'Escape') handleCancelEdit();
              }}
              className='flex-1 border-b-2 border-gray-400 bg-transparent text-3xl font-bold outline-none'
              autoFocus
            />
            <Button
              onClick={handleSaveProjectName}
              variant={ButtonVariant.Tertiary}
              size={ButtonSize.Small}
              icon={CheckIcon}
              className='text-accent-success hover:text-accent-success/80'
            />
            <Button
              onClick={handleCancelEdit}
              variant={ButtonVariant.Tertiary}
              size={ButtonSize.Small}
              icon={CloseIcon}
              className='text-accent-error hover:text-accent-error/80'
            />
          </div>
        ) : (
          <>
            <h1 className='text-3xl font-bold text-foreground-primary'>
              {selectedProject ? selectedProject.name : 'Your Videos'}
            </h1>
            {selectedProject && (
              <Button
                onClick={() => handleEditProject(selectedProject)}
                variant={ButtonVariant.Tertiary}
                size={ButtonSize.Small}
                icon={EditIcon}
              />
            )}
          </>
        )}
      </div>

      {selectedProject && (
        <div className='mb-6 rounded-lg border border-border-primary bg-background-secondary p-6'>
          <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
            <div>
              <h3 className='mb-2 text-sm font-medium text-foreground-tertiary'>
                Project Details
              </h3>
              <div className='space-y-2'>
                <div className='flex items-center gap-2'>
                  <span className='text-sm text-foreground-tertiary'>
                    Genre:
                  </span>
                  <span className='text-sm font-medium text-foreground-primary'>
                    {selectedProject.genre}
                  </span>
                </div>
                <div className='flex items-center gap-2'>
                  <span className='text-sm text-foreground-tertiary'>
                    Videos:
                  </span>
                  <span className='text-sm font-medium text-foreground-primary'>
                    {selectedProject.numGenerations} generations
                  </span>
                </div>
                <div className='flex items-center gap-2'>
                  <span className='text-sm text-foreground-tertiary'>
                    Created:
                  </span>
                  <span className='text-sm font-medium text-foreground-primary'>
                    {new Date(selectedProject.createdAt).toLocaleDateString()}{' '}
                    at{' '}
                    {new Date(selectedProject.createdAt).toLocaleTimeString()}
                  </span>
                </div>
              </div>
            </div>

            <div>
              <h3 className='mb-2 text-sm font-medium text-foreground-tertiary'>
                Original Video
              </h3>
              <span className='text-sm text-foreground-secondary'>
                {selectedProject.s3FileName}
              </span>
            </div>
          </div>
        </div>
      )}
    </>
  );
}