import { Avatar } from "@/components/Placeholders";
import type { PortalProfile, ProfileCompletionState } from "@/types";
import logOutIcon from "../../../images/icons/log-out.svg";

interface ProfileSummaryProps {
    withLogout?: boolean;
    compact?: boolean;
    onLogout?: () => void;
    profile: Pick<PortalProfile, "company" | "fullName" | "initials" | "title">;
}

export const ProfileSummary = ({
    withLogout = false,
    compact = false,
    onLogout,
    profile,
}: ProfileSummaryProps) => {
    return (
        <div
            className={
                compact
                    ? "profile-summary profile-summary--compact d-flex align-items-center gap-2"
                    : "profile-summary d-flex align-items-center gap-3"
            }
        >
            <Avatar initials={profile.initials} small={compact} />

            <div className="profile-summary__copy d-flex flex-column min-w-0">
                <strong>{profile.fullName}</strong>
                <span>
                    {profile.company} · {profile.title}
                </span>
            </div>

            {withLogout && (
                <button
                    className="profile-summary__action d-inline-flex align-items-center justify-content-center ms-auto"
                    type="button"
                    onClick={onLogout}
                    aria-label="Account action"
                >
                    <img
                        className="profile-summary__logout-icon"
                        src={logOutIcon}
                        alt=""
                        aria-hidden="true"
                    />
                </button>
            )}
        </div>
    );
};

interface ProfileCompletionProps {
    completion?: ProfileCompletionState;
}

const defaultCompletion: ProfileCompletionState = {
    completedFields: 0,
    percent: 0,
    totalFields: 0,
};

export const ProfileCompletion = ({
    completion = defaultCompletion,
}: ProfileCompletionProps) => {
    return (
        <div className="profile-completion">
            <span className="profile-completion__label">
                Profile Completion
            </span>

            <div className="profile-completion__meta d-flex align-items-baseline">
                <strong>{completion.percent}%</strong>
                <span>
                    {completion.completedFields} of {completion.totalFields}{" "}
                    required fields complete
                </span>
            </div>

            <progress
                className="profile-completion__track"
                value={completion.percent}
                max="100"
            >
                {completion.percent}%
            </progress>

            <p>Finish to appear in the LSI Asia '26 attendee directory.</p>
        </div>
    );
};