import Box from "@mui/material/Box";
import Chip from "@mui/material/Chip";
import IconButton from "@mui/material/IconButton";
import TextField from "@mui/material/TextField";
import type { StagedFile } from "./types";

interface OdinComposerProps {
  input: string;
  attachments: StagedFile[];
  busy: boolean;
  canSubmit: boolean;
  fileRef: React.RefObject<HTMLInputElement | null>;
  onInput: (v: string) => void;
  onFiles: (files: FileList | null) => void;
  onRemoveAttachment: (id: string) => void;
  onSubmit: () => void;
}

export default function OdinComposer({
  input,
  attachments,
  busy,
  canSubmit,
  fileRef,
  onInput,
  onFiles,
  onRemoveAttachment,
  onSubmit,
}: OdinComposerProps) {
  return (
    <Box>
      {/* Staged attachment chips */}
      {attachments.length > 0 && (
        <Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5, mb: 1 }}>
          {attachments.map((s) => (
            <Chip
              key={s.id}
              label={s.file.name}
              size="small"
              variant="outlined"
              onDelete={busy ? undefined : () => onRemoveAttachment(s.id)}
            />
          ))}
        </Box>
      )}

      <input
        ref={fileRef as React.RefObject<HTMLInputElement>}
        type="file"
        accept="application/pdf,image/*"
        multiple
        hidden
        onChange={(e) => onFiles(e.target.files)}
      />

      {/* Composer pill — full-width growing input with attach + send icons */}
      <Box
        sx={{
          display: "flex",
          alignItems: "center",
          gap: 0.5,
          border: 1,
          borderColor: "divider",
          borderRadius: 3.5,
          bgcolor: "background.default",
          pl: 0.75,
          pr: 0.75,
          py: 0.5,
          transition: "border-color 0.15s ease",
          "&:focus-within": { borderColor: "primary.main" },
        }}
      >
        <IconButton
          onClick={() => fileRef.current?.click()}
          disabled={busy}
          aria-label="Přiložit fakturu"
          title="Přiložit fakturu (PDF)"
          sx={{ flexShrink: 0, color: "text.secondary" }}
        >
          <Box
            component="svg"
            viewBox="0 0 24 24"
            sx={{ width: 21, height: 21 }}
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
          >
            <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" />
          </Box>
        </IconButton>

        <TextField
          multiline
          maxRows={8}
          variant="standard"
          placeholder="Napište zprávu…"
          value={input}
          onChange={(e) => onInput(e.target.value)}
          onKeyDown={(e) => {
            if (e.key === "Enter" && !e.shiftKey) {
              e.preventDefault();
              onSubmit();
            }
          }}
          fullWidth
          slotProps={{ input: { disableUnderline: true } }}
          sx={{ flex: 1, "& textarea": { py: 0.75, lineHeight: 1.5 } }}
        />

        <IconButton
          onClick={onSubmit}
          disabled={!canSubmit}
          aria-label="Odeslat"
          title="Odeslat (Enter)"
          sx={{
            flexShrink: 0,
            width: 36,
            height: 36,
            color: "common.white",
            bgcolor: "primary.main",
            "&:hover": { bgcolor: "primary.dark" },
            "&.Mui-disabled": {
              bgcolor: "action.disabledBackground",
              color: "action.disabled",
            },
          }}
        >
          <Box
            component="svg"
            viewBox="0 0 24 24"
            sx={{ width: 18, height: 18 }}
            fill="none"
            stroke="currentColor"
            strokeWidth="2.5"
            strokeLinecap="round"
            strokeLinejoin="round"
          >
            <line x1="12" y1="19" x2="12" y2="5" />
            <polyline points="5 12 12 5 19 12" />
          </Box>
        </IconButton>
      </Box>
    </Box>
  );
}
