import "./Sidebar-skonaki.scss";
import GuideHelperAlt from "../GuideHelperAlt/GuideHelperAlt";
import React from "react";

export interface WorkPackage {
    id: number;
    title: string;
    from_date: string;
    to_date: string;
}


export interface SkonakiData {
    projectCode: string;
    projectTitle: string;
    projectCategory: string;
    scientificLead: string;
    contractStart: string;     // pre-formatted DD.MM.YYYY
    contractEnd: string;
    durationMonths: number;
    totalFee: string;          // comes as string from API ("26810.96")
    hours: number;
    hourlyRate: string;        // comes as "" when missing
    workPackages: WorkPackage[];
}


type SidebarSkonakiAenaProps = {
    data: SkonakiData;
};

const SidebarSkonakiAena = ({ data }: SidebarSkonakiAenaProps) => {
    if (!data) return null;

    return (

        <div  className={'d-flex flex-column align-items-start'}>
            <div className="d-flex mb-5 flex-column justify-content-start align-items-start skonaki-sidebar mb-5">
                <h2 ><b>ΚΩΔΙΚΟΣ EΡΓΟΥ: {data.projectCode || '-'}</b></h2>
                <h4><b>ΤIΤΛΟΣ EΡΓΟΥ Α1: {data.projectCode || '-'} ({data.projectTitle || '-'})</b></h4>
                <h4><b>ΚΑΤΗΓΟΡIΑ EΡΓΟΥ Α1: {data.projectCategory || '-'}</b></h4>
                <h4><b>ΕΠΙΣΤΗΜΟΝΙΚΟΣ ΥΠΕΥΘΥΝΟΣ: {data.scientificLead || '-'}</b></h4>
                <div className={'d-flex gap-3'}>
                    <h4><b>ΕΝΑΡΞΗ ΣΥΜΒΑΣΗΣ: {data.contractStart || '-'}</b></h4>
                    <h4><b>ΛΗΞΗ ΣΥΜΒΑΣΗΣ: {data.contractEnd || '-'}</b></h4>
                    <h4><b>ΔΙΑΡΚΕΙΑ ΣΕ ΜΗΝΕΣ: {data.durationMonths ?? '-'}</b></h4>
                </div>
                <div className={'d-flex gap-3'}>
                    <h4><b>ΣΥΝΟΛΙΚΗ ΑΜΟΙΒΗ (€): {data.totalFee || '-'}</b></h4>
                    <h4><b>ΩΡΕΣ: {data.hours ?? '-'}</b></h4>
                    {data.hourlyRate && <h4><b>HOURLY RATE: {data.hourlyRate}</b></h4>}
                </div>
                <h4><b>ΠΑΚΕΤΑ ΕΡΓΑΣΙΑΣ:</b></h4>
                {data.workPackages?.length > 0
                    ? data.workPackages.map((wp) => (
                        <h4 key={wp.id}><b>
                            {wp.title || '-'}: {wp.from_date || '-'} ΕΩΣ {wp.to_date || '-'}
                        </b></h4>
                    ))
                    : <h4><b>-</b></h4>
                }
            </div>
        </div>
    );
};

export default SidebarSkonakiAena;