import { Field, TextareaField } from "@/components/FormControls";
import ImagePicker from "@/components/ImagePicker";
import type { FieldErrors } from "@/utils/validation";

export interface CompanyDraft {
    assistant_email: string;
    billing_email: string;
    description: string;
    instagram: string;
    linkedin: string;
    name: string;
    title: string;
    website: string;
    x: string;
}

export const emptyCompanyDraft: CompanyDraft = {
    assistant_email: "",
    billing_email: "",
    description: "",
    instagram: "",
    linkedin: "",
    name: "",
    title: "",
    website: "",
    x: "",
};

interface CompanyFieldsProps {
    draft: CompanyDraft;
    errors?: FieldErrors;
    isBusy?: boolean;
    logoSrc?: string | null;
    onChange: (field: keyof CompanyDraft, value: string) => void;
    onLogoRemove?: () => void;
    onLogoSelect: (files: File[]) => void;
}

const CompanyFields = ({
    draft,
    errors = {},
    isBusy = false,
    logoSrc,
    onChange,
    onLogoRemove,
    onLogoSelect,
}: CompanyFieldsProps) => {
    return (
        <>
            <div className="row g-4">
                <div className="col-12 col-lg-6">
                    <Field
                        label="Company Name"
                        error={errors.name}
                        onChange={(value) => onChange("name", value)}
                        value={draft.name}
                    />
                </div>
                <div className="col-12 col-lg-6">
                    <Field
                        label="Your Title"
                        error={errors.title}
                        onChange={(value) => onChange("title", value)}
                        placeholder="e.g. CEO & Co-Founder"
                        value={draft.title}
                    />
                </div>
            </div>

            <div className="row g-4 mt-1">
                <div className="col-12 col-lg-6">
                    <Field
                        label="Billing Email"
                        error={errors.billing_email}
                        onChange={(value) => onChange("billing_email", value)}
                        type="email"
                        value={draft.billing_email}
                    />
                </div>
                <div className="col-12 col-lg-6">
                    <Field
                        label="CC / Assistant Email"
                        error={errors.assistant_email}
                        onChange={(value) => onChange("assistant_email", value)}
                        placeholder="add to CC your assistant on all communications"
                        type="email"
                        value={draft.assistant_email}
                    />
                </div>
            </div>

            <div className="row g-4 mt-1">
                <div className="col-12">
                    <Field
                        label="Website / Domain"
                        error={errors.website}
                        onChange={(value) => onChange("website", value)}
                        placeholder="https://www.example.com"
                        type="url"
                        value={draft.website}
                    />
                </div>
            </div>

            <div className="row g-4 mt-1">
                <div className="col-12 col-lg-6">
                    <Field
                        label="Company LinkedIn"
                        error={errors.linkedin}
                        onChange={(value) => onChange("linkedin", value)}
                        placeholder="https://www.linkedin.com/company/..."
                        type="url"
                        value={draft.linkedin}
                    />
                </div>
                <div className="col-12 col-lg-3">
                    <Field
                        label="X / Twitter"
                        error={errors.x}
                        onChange={(value) => onChange("x", value)}
                        placeholder="@company"
                        value={draft.x}
                    />
                </div>
                <div className="col-12 col-lg-3">
                    <Field
                        label="Instagram"
                        error={errors.instagram}
                        onChange={(value) => onChange("instagram", value)}
                        placeholder="@company"
                        value={draft.instagram}
                    />
                </div>
            </div>

            <div className="form-block mt-4">
                <span className="form-block__label">Company Logo</span>
                <ImagePicker
                    assets={
                        logoSrc
                            ? [
                                  {
                                      id: "company-logo",
                                      label: `${draft.name} logo`,
                                      src: logoSrc,
                                  },
                              ]
                            : []
                    }
                    isBusy={isBusy}
                    label="Add"
                    onRemove={logoSrc ? onLogoRemove : undefined}
                    onSelect={onLogoSelect}
                />
            </div>

            <div className="mt-4">
                <TextareaField
                    label="Company Description"
                    error={errors.description}
                    onChange={(value) => onChange("description", value)}
                    value={draft.description}
                />
            </div>
        </>
    );
};

export default CompanyFields;