import React from "react";
import { Box, MenuItem, Paper, TextField } from "@mui/material";

type ProficiencyLevel =
  | ""
  | "NONE"
  | "VERY_WEAK"
  | "WEAK"
  | "AVERAGE"
  | "GOOD"
  | "VERY_GOOD"
  | "EXCELLENT";

const proficiencyOptions: { value: ProficiencyLevel; label: string }[] = [
  { value: "", label: "انتخاب ..." },
  { value: "NONE", label: "ندارد" },
  { value: "VERY_WEAK", label: "خیلی ضعیف" },
  { value: "WEAK", label: "ضعیف" },
  { value: "AVERAGE", label: "متوسط" },
  { value: "GOOD", label: "خوب" },
  { value: "VERY_GOOD", label: "خیلی خوب" },
  { value: "EXCELLENT", label: "عالی" },
];

export interface LanguageSkillsUIData {
  englishLevel: ProficiencyLevel;
  englishDescription: string;
  englishCertificate: string;

  arabicLevel: ProficiencyLevel;
  arabicDescription: string;

  otherLanguagesDescription: string;
  dialectsDescription: string;

  otherSkills: string;
}

interface Props {
  value: LanguageSkillsUIData;
  onChange: (next: LanguageSkillsUIData) => void;
}

export default function LanguageSkillsForm({ value, onChange }: Props) {
  const setField = (field: keyof LanguageSkillsUIData) => (e: React.ChangeEvent<HTMLInputElement>) => {
    onChange({ ...value, [field]: e.target.value });
  };

  return (
    <Paper
      elevation={0}
      sx={{
        p: { xs: 2, md: 3 },
        borderRadius: "24px",
        border: "1px solid #e2e8f0",
        backgroundColor: "#fff",
      }}
    >
      <Box
        sx={{
          display: "grid",
          gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" },
          gap: 2,
        }}
      >
        {/* زبان انگلیسی */}
        <TextField
          select
          fullWidth
          label="زبان انگلیسی*"
          value={value.englishLevel}
          onChange={setField("englishLevel")}
        >
          {proficiencyOptions.map((o) => (
            <MenuItem key={o.value} value={o.value}>
              {o.label}
            </MenuItem>
          ))}
        </TextField>

        <TextField
          fullWidth
          label="مدرک معتبر زبان انگلیسی"
          value={value.englishCertificate}
          onChange={setField("englishCertificate")}
          placeholder="مثلاً IELTS / TOEFL / MSRT / ..."
        />

        <TextField
          fullWidth
          multiline
          minRows={2}
          label="توضیحات"
          value={value.englishDescription}
          onChange={setField("englishDescription")}
          sx={{ gridColumn: { xs: "1", md: "1 / -1" } }}
        />

        {/* زبان عربی */}
        <TextField
          select
          fullWidth
          label="زبان عربی*"
          value={value.arabicLevel}
          onChange={setField("arabicLevel")}
        >
          {proficiencyOptions.map((o) => (
            <MenuItem key={o.value} value={o.value}>
              {o.label}
            </MenuItem>
          ))}
        </TextField>

        <Box /> {/* برای حفظ چینش دو ستونه */}

        <TextField
          fullWidth
          multiline
          minRows={2}
          label="توضیحات"
          value={value.arabicDescription}
          onChange={setField("arabicDescription")}
          sx={{ gridColumn: { xs: "1", md: "1 / -1" } }}
        />

        {/* سایر زبان‌ها */}
        <TextField
          fullWidth
          multiline
          minRows={2}
          label="سایر زبان ها (توضیحات در مورد میزان تسلط)"
          value={value.otherLanguagesDescription}
          onChange={setField("otherLanguagesDescription")}
          sx={{ gridColumn: { xs: "1", md: "1 / -1" } }}
        />

        {/* گویش‌ها و لهجه‌ها */}
        <TextField
          fullWidth
          multiline
          minRows={2}
          label="آشنایی با گویش ها و لهجه های کشور (توضیحات در مورد میزان تسلط)"
          value={value.dialectsDescription}
          onChange={setField("dialectsDescription")}
          sx={{ gridColumn: { xs: "1", md: "1 / -1" } }}
        />

        {/* سایر مهارت‌ها */}
        <TextField
          fullWidth
          multiline
          minRows={3}
          label="سایر مهارت ها (اعم از ورزشی، هنری، فرهنگی، اجتماعی و ...)"
          value={value.otherSkills}
          onChange={setField("otherSkills")}
          sx={{ gridColumn: { xs: "1", md: "1 / -1" } }}
        />
      </Box>
    </Paper>
  );
}