import React from "react";
import {
  Box,
  Paper,
  TextField,
  Typography,
  Grid,
  Alert,
  AlertTitle,
  Divider,
} from "@mui/material";

export interface ReferenceFormData {
  firstName: string;
  lastName: string;
  relationship: string;
  jobTitle: string;
  workplaceName: string;
  phoneNumber: string;
}

type ValueType = [ReferenceFormData, ReferenceFormData];

const emptyRef = (): ReferenceFormData => ({
  firstName: "",
  lastName: "",
  relationship: "",
  jobTitle: "",
  workplaceName: "",
  phoneNumber: "",
});

interface Props {
  value?: ValueType; // ✅ optional
  onChange?: (next: ValueType) => void; // ✅ optional
}

export default function RelationForm({ value, onChange }: Props) {
  // ✅ همیشه یک آرایه 2تایی معتبر داریم
  const safeValue: ValueType = value ?? [emptyRef(), emptyRef()];

  const safeOnChange = onChange ?? (() => {});

  const updateField =
    (index: 0 | 1, key: keyof ReferenceFormData) =>
    (e: React.ChangeEvent<HTMLInputElement>) => {
      const next: ValueType = [
        { ...safeValue[0] },
        { ...safeValue[1] },
      ];

      next[index] = { ...next[index], [key]: e.target.value };
      safeOnChange(next);
    };

  const renderPersonFields = (index: 0 | 1) => (
    <Box sx={{ mt: 2 }}>
      <Typography variant="subtitle1" sx={{ fontWeight: 800, mb: 2 }}>
        آشنای {index === 0 ? "اول" : "دوم"}
      </Typography>

      <Grid container spacing={2}>
        <Grid>
          <TextField
            label="نام *"
            fullWidth
            required
            value={safeValue[index].firstName}
            onChange={updateField(index, "firstName")}
          />
        </Grid>

        <Grid>
          <TextField
            label="نام خانوادگی *"
            fullWidth
            required
            value={safeValue[index].lastName}
            onChange={updateField(index, "lastName")}
          />
        </Grid>

        <Grid>
          <TextField
            label="نسبت *"
            fullWidth
            required
            value={safeValue[index].relationship}
            onChange={updateField(index, "relationship")}
            placeholder="مثلاً: همکار، دوست"
          />
        </Grid>

        <Grid>
          <TextField
            label="تلفن تماس *"
            fullWidth
            required
            inputMode="tel"
            value={safeValue[index].phoneNumber}
            onChange={updateField(index, "phoneNumber")}
          />
        </Grid>

        <Grid >
          <TextField
            label="شغل *"
            fullWidth
            required
            value={safeValue[index].jobTitle}
            onChange={updateField(index, "jobTitle")}
          />
        </Grid>

        <Grid>
          <TextField
            label="نام محل کار *"
            fullWidth
            required
            value={safeValue[index].workplaceName}
            onChange={updateField(index, "workplaceName")}
          />
        </Grid>
      </Grid>
    </Box>
  );

  return (
    <Paper elevation={0} >

      <Alert severity="warning" sx={{ mb: 3 }}>
        <AlertTitle>توجه</AlertTitle>
        مشخصات دو نفر از آشنایان را وارد کنید و از درج بستگان درجه یک (پدر، مادر، همسر، برادر و خواهر) خودداری نمایید.
      </Alert>

      {renderPersonFields(0)}
      <Divider sx={{ my: 3 }} />
      {renderPersonFields(1)}
    </Paper>
  );
}