import { useState } from "react";
import { View } from "react-native";
import { Button } from "@/components/ui/Button";
import { Card } from "@/components/ui/Card";
import { Field } from "@/components/ui/Field";
import { Text } from "@/components/ui/Text";
import { colors } from "@/lib/theme";

export function RxQueriedPanel({
  pharmacistMessage,
  customerReply,
  onReply,
}: {
  pharmacistMessage?: string;
  customerReply?: string;
  onReply: (message: string) => void;
}) {
  const [reply, setReply] = useState(customerReply ?? "");

  return (
    <Card tone="brand" elevated={false}>
      <Text variant="h3">Pharmacist needs clarification</Text>
      <Text variant="bodySm" color={colors.muted} style={{ marginTop: 6 }}>
        {pharmacistMessage ||
          "Please confirm dosage, patient name, or upload a clearer page."}
      </Text>
      {customerReply ? (
        <View
          style={{
            marginTop: 12,
            padding: 12,
            borderRadius: 12,
            backgroundColor: colors.surface,
            borderWidth: 1,
            borderColor: colors.line,
          }}
        >
          <Text variant="caption" color={colors.subtle}>
            Your reply
          </Text>
          <Text variant="bodySm" style={{ marginTop: 4 }}>
            {customerReply}
          </Text>
        </View>
      ) : (
        <View style={{ marginTop: 12, gap: 10 }}>
          <Field
            label="Your reply"
            value={reply}
            onChangeText={setReply}
            placeholder="Clarify dose, brand preference, or re-upload note…"
          />
          <Button
            title="Send reply"
            onPress={() => {
              if (!reply.trim()) return;
              onReply(reply.trim());
            }}
          />
        </View>
      )}
    </Card>
  );
}